baserCMSとWordPressで同じテーマを組み込んでみた

次に開発環境の構築ですが、baserCMSの環境構築はとっても簡単です

baserCMSをダウンロードすると、開発用のDockerも入っているからです

/docker/docker-compose.yml.defaultをコピーして、docker-compose.ymlにリネームします

画像のようにコマンドでDockerを立ち上げると…？

http://localhost/でアクセスできるようになります！

あとは、案内に従ってポチポチとしていくだけで、インストールも完了しちゃいます

データベース設定は、Dockerを利用している場合以下になります

DBホスト名：bc-db
ユーザー名：root
パスワード：root
DB名：basercms

上の関数を駆使してエレメントの切り出しまで完了しました

共通部分を切り分けて流用することで、メンテナンス性の向上につながります
ファイルがスッキリして見やすくもなりますね！

次にブログを動的に表示していきます

baserCMSで、トップページにブログを表示するためには、$this->BcBaser->blogPosts()という関数を利用します

top.phpのブログを表示したい箇所に$this->BcBaser->blogPosts('{コンテンツ名}', '{件数}')を記述します

対象ブログのテンプレートのposts.phpを呼び出してくれます

今回のブログのテンプレート名はdefaultなのでplugins/{テーマ名}/templates/Blog/default/posts.phpを作成します

div.news配下をすべて移動させて、top.phpに$this->BcBaser->blogPosts('news', 3);と記述します

次にposts.phpを調整していきます

baserCMSでは、管理画面で登録した記事は$postsという変数で扱うことができます

$postsをforeachで回して表示するのが基本です

右の画像のように、ブログの表示にもたくさんの便利な関数が用意されています

今回は記事の日付（blogPostDate()）と記事タイトル（blogPostTitle）のみ表示します

表示できました！管理画面で登録した記事を3件出力しています

ブログで利用できる便利な関数をいくつか紹介します

• $this->Blog->category($post, ['link' => false])
  記事の属するカテゴリーを出力します、デフォルトではカテゴリー別アーカイブページへのリンクが付いているので、不要ならオプションで指定します

• $this->Blog->getEyeCatch($post)
  記事に登録されたアイキャッチを取得します

次にバナー管理プラグインを利用してバナー画像を動的に出力していきましょう

/element/banner_block.phpを作成し、top.phpのバナー部分を移動、$this->Banner->showBanner('side', ['num' => 3])を記述します

バナー管理プラグインでは、管理画面から登録した画像を$bannerDatasという変数で扱うことができます

ブログと同じようにforeachで回して表示していきましょう

banner_block.phpに画像のように記述します

バナーも動的に表示できましたね！

トップページの組み込みはこれで完了になります

次に、固定ページのレイアウトを実装をしていきます

固定ページのレイアウトはdefaultなので、layout/default.phpを編集していきましょう

top.phpと同じようにエレメントを呼び出し、関数を利用して組み込みました

topとの違いは、管理画面から登録した「本文」が存在する、ということです

まずは、管理画面からページの本文を入力していきましょう

バナー管理プラグイン同様に、BurgerEditorプラグインをマーケットからダウンロードし、有効化します

固定ページやブログ記事の編集ページを開くと、画像のように積み上げ式エディターを利用できます

直感的な操作なので、初心者にも使いやすいですね

適当なブロックをいくつか追加して保存します

管理画面で登録した内容を出力できましたね！
これで、baserCMSでの組み込みは完了とします！

最後に補足ですが、baserCMSでは、layoutでおまじないとして記述しておくものが2つあります

• $this->BcBaser->script()
  の前に記述し、コンテンツ内で定義したスクリプトやCSS、ツールバー表示用のスクリプトやCSS、そして、管理システムのシステム基本設定で設定したヘッダー埋め込みスクリプトなどを出力する

• $this->BcBaser->func()
  ツールバー用のHTMLや、管理システムのシステム基本設定で設定したフッター埋め込みスクリプト等を出力する

参考：公式ドキュメント

script()の記述を忘れるとBurgerEditorのデフォルトスタイルがあたらないので注意してください

無事にWPの画面が表示されました！

調べたところ「local」というアプリをインストールすればもっと簡単に環境構築できるとのことですが、今回はもうMAMPでやっちゃったのでこのまま行きましょう笑

インストール画面の案内文を参考にポチポチと情報を入力していくと、簡単にインストールできました！

インストールは、baserCMSもWordPressもシンプルで、どちらかをやったことがあればスムーズに進めそうだと思いました

style.cssにはテーマの名前など必須の情報を入力します

Theme NameはWordPressのテーマの名前(必須)です

なんと、テーマの情報などはstyle.cssに記述するんですね！

必須の情報を入力していきましょう

管理画面の外観 > テーマに移動すると、テーマとして認識されていますね！

早速有効化したところ、スタイルは崩れていますがしっかり適用されていました！

cssや画像の読み込みを調整しましょう

baserCMS5ではテーマをプラグインとして扱っていることもあり、テーマを構成するファイルが多くなってしまいがちですが、WordPressでは2ファイルでテーマとして認識されるんですね！

スタイルが読み込まれました！

その他のcssやjs、画像も上記の方法でパスを修正していきます

画像やjsはwp-content/themes/{テーマ名}/assets/img(js, css)に設置します

これでレイアウトが整いました！

ちなみにget_template_directory_uri()は、利用中のテーマのパスを返すWordPress独自の関数みたいです

初めての独自関数はget_template_directory_uri()でしたね！

ここで問題が…！

style.jsで$の記述をしていることでコンソールエラーが起きました

WordPressに備わっているjQueryはno-conflictモードになっていて「$」が使えなくなっているようです

調べたところ「$」を「jQuery」に置き換えて解消するのが一番シンプルっぽいので今回はそれで対応します

テンプレの固定ページ用HTMLを、作成したpage.phpに貼り付け

cssやjs、ヘッダーフッターなどを関数に置き換えました

固定ページにアクセスすると、しっかりテンプレートが適用されているようです！

ただ、これでは管理画面から入力した内容が出力されないので、コンテンツを表示するための関数を記述していきましょう

WordPressでは、記事のタイトルを出力するthe_title()と記事の本文を出力するthe_content()という関数を利用するようです

記事のタイトル、本文の部分をそれぞれ関数に置き換えたところ、無事にタイトルと本文を表示できました！

次に、トップページに投稿を4件取得していきたいと思います

index.phpを画像のように変更します

各関数の説明を簡単にしていきます

管理画面で登録した記事が表示できました！

大まかな処理はbaserCMSと同じでしたが、setup_postdata()など、特有の独自関数があっておもしろいですね！

投稿をトップページに表示したときと同じ要領で、get_posts()を使ってバナーを取得しました

foreachでバナーのデータを回して、正常に表示できました！

時間がかかりましたが、無事に完成です！