ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

【baserCMS】テーマを構成するファイル内容を把握しよう【初心者向け】

| カテゴリー : baserCMS

ホームページ制作でCMSを導入するときは「テーマ内のどのテンプレートファイルを触るとどのページが変化するか」を把握することが肝心です。

今回はbaserCMSのテーマを作成・カスタマイズするときに、まずは最低限知っておきたいテーマファイルの構成を見ていこうと思います。

baserCMSはテーマの切り替えでホームページデザインの変更が簡単

baserCMSは便利なテーマ切り替え機能を備えており、管理画面のテーマ管理ページからテーマの切り替えが簡単にできるようになっています。

テーマ管理ページは次の画像のような表示になっており、使いたいテーマを選択するだけであっという間にサイト表示を差し替えることができます。

クリックするだけで初心者でも簡単にウェブサイトのデザインを変更できる。

クリックするだけで初心者でも簡単にウェブサイトのデザインを変更できる。

それではこれらテーマのデータを保存しているフォルダはどこにあるのでしょうか?

baserCMSでは「baserCMSフォルダ/app/webroot/theme/テーマフォルダ」にテーマフォルダが格納されています。FTPソフトなどを利用してサーバーにアクセスして確かめてみましょう。

baser-theme-files02

baserCMSをインストールした段階でthemeディレクトリ以下には複数のテーマが用意されているはずです。このなかにPHPファイルや画像、CSSファイルなどを設置することでテーマは作られています。

さらにテーマフォルダ内の構成を見てみましょう。今回はテーマ作成のときベースにしやすいskeltonテーマの中身を見てみます。

baser-theme-files03

テーマフォルダ内にはbaserCMSテーマの命名ルールに沿った複数のフォルダが入っています。

ここではひとまず「こんなフォルダやファイルが入ってる」ということだけ知っておけばOKです。それでは順番にみていきましょう。

トップ(デフォルト)ページを表示させるには?

では実際にbaserCMSのテーマ作成やカスタマイズを行うときに、どのファイルを触ればよいか確認していきましょう。

引き続きデフォルトでインストールされているskeltonテーマを参考にしていきます。

まずはサイトのトップページを作成したい場合、どのファイルを触れば良いかが気になります。baserCMSのトップページに関してはテーマフォルダ/Layouts/default.phpを見てみましょう。

baser-theme-files04

このファイルがトップページ、というよりサイト全体のデフォルト表示のベースになっています。

実際にdefault.phpのソースコードを見てみるとbaserCMS独自のタグ(baser関数)でjsファイルやcssファイルを読みこんでいるのが確認できます。

baser関数について詳しく知りたい方は公式ガイドの関数リファレンスをご参考ください。

ヘッダーやフッターなど、共通化できるパーツもbaser関数で読み込まれていることがわかります。(共通化パーツの作成や呼び出し方の詳細は後述)

ページのレイアウトを決める、HTMLの全体を把握したい場合はこのLayouts以下にあるファイルを確認しましょう。

default.phpはサイト表示のベースになるもの、と覚えておけば良いでしょう。

ヘッダー、フッター、サイドバーなど共通化パーツを編集するときは

先ほどのdefault.phpにはページのレイアウトを決定するHTMLが記述されています。

しかしskeltonテーマのdefault.phpにはヘッダーやフッターの記述がなくbaser関数が書かれているだけでしたね。

次は複数ページで使い回しされる共通化パーツを作るにはどのファイルを利用するかを見ていきたいと思います。

ホームページ制作ではヘッダー、フッターなどを共通化パーツとして管理することはメンテナンス性の向上につながるので重要です。baserCMSではそうした共通化パーツのファイルはテーマフォルダ/Elements/の中に置きます。

baser-theme-files05

ヘッダーやフッターの内容を変更したいときはElementsフォルダ内にあるheader.phpやfooter.phpを編集しましょう。

独自の共通化パーツをつくるとき

ヘッダーとフッター以外で共通化パーツを作りたいときはElementsフォルダ以下に適当な名前でphpファイルを作成しましょう。

例:sidebar.phpなど

作った共通化パーツはどうやって呼び出すのか?

作成した共通化パーツはbaser関数を利用して呼び出します。ヘッダーとフッターには専用のbaser関数が用意されています。

HTMLにこれらの記述をしてあげるとブラウザで表示されるときにそれぞれの共通化パーツが呼び出されていることがわかると思います。

独自に作成した共通化パーツを呼び出すときは次の関数を利用しましょう。

各baser関数の詳細は以下のリンクをご参考ください。

固定ページ用のテンプレートを編集するときは

固定ページの内容を編集するときはどのファイルを触れば良いしょうか。

baserCMSでは管理画面側で作成した固定ページについてはテーマフォルダ/Pages/以下にそのページのファイルが保存されるようになっています。

baser-theme-files06

管理画面から固定ページを新規追加してからテーマフォルダ/Pages/を確認すると、作成したページファイルが加わっていると思います。

逆に、ここにエディタなどで保存した新規ファイルの内容を、管理画面から読み込みしてサイトコンテンツに加えるということもできます。

自分で作ったコンテンツテンプレートを利用したい場合はテーマフォルダ/Pages/templatesのなかにテンプレートファイルを作成すると、固定ページカテゴリごとに任意のコンテンツテンプレートを選ぶことができます。

詳しくは公式ガイドをどうぞ!

固定ページ管理 – baserCMS公式ガイド

ブログに利用するテンプレートを編集するとき

baserCMSはブログを複数設置できてコンテンツ管理のしやすいCMSです。

ブログ関連のテンプレートはテーマフォルダ/Blog/に保存されています。

baser-theme-files07

ブログコンテンツはデフォルトでは、テーマフォルダ/Blog/defaultのなかのファイル表示が反映されています。他にもいくつかコンテンツテンプレートを用意する場合はdefaultフォルダを複製して作成していくと良いでしょう。

ブログのコンテンツテンプレートは基本的に以下の4つのファイルで構成されます。

  • index.php ・・・ブログのトップページ用
  • single.php ・・・個別の記事表示用
  • archives.php ・・・記事の一覧表示用
  • posts.php ・・・サイトのトップページ等からブログ記事一覧を呼び出した際の表示用

テーマ作成の時は、それぞれのページに対応したファイルを把握して整理しておきましょう。

baserCMSはテーマフォルダ内にファイルが不足している場合、コアテンプレートを読み込みにいく

あれこれとファイルを触りつつテーマ作成を進めていくと「このページのテンプレートはどのファイル内容が反映されているんだ?」という場面が出てくると思います。

テーマ内にファイルが見つからない場合はコアテンプレートを読み込む」というbaserCMSの仕様を覚えておくと良いでしょう。

テーマのフォルダを覗くとElements フォルダ内に header.php 、footer.php などが入っており、そちらを読み込むようになっていると思いますが、中には、テーマフォルダ内に存在しないエレメントを読み込んでいる場合もあると思います。

実は、baserCMS では、利用しているテーマフォルダの中にないファイルは、lib/Baser フォルダの中の「コアテンプレート」を探しにいく仕様となっています。

抜粋:コアテンプレートのカスタマイズ

コアテンプレートがあるのはbaserCMSフォルダ/lib/Baserというディレクトリ内になります。

baser-theme-files08

通常はテーマフォルダ内に設置したテンプレートが優先されるのですが、使用するテンプレートがテーマフォルダ内で見つからない時はbaserCMSが自動的にコアテンプレートを適用してくれます。

コアテンプレートをあまり触ることはないと思いますが、「使用されているコアテンプレートを作成中のテーマフォルダにコピーしてカスタマイズ」という時にコアテンプレートの場所を覚えておくと役立ちます。

コアテンプレートを直接編集してしまうとbaserCMSのアップデートの際に不具合がでる可能性があるので、必ず必要なファイルをテーマにコピーしてカスタマイズするようにしましょう。

詳しくは下記のページをご参考ください。

コアテンプレートのカスタマイズ – baserCMS公式ガイド

実際に手を動かしてファイルを触って変化を確認してみよう

ここまでbaserCMSのテーマ作成で最低限覚えておきたいテンプレートファイルについてご紹介してきました。

あとは実際にファイルに手を加えつつ、サイト表示の変化を確認しつつ学習を進めていくとテーマ作成の仕方が早く身につくと思います。

今回紹介しきれなかったテーマ構成も多いのですが、詳しくは公式ガイドにてテーマ構造がまとめてありますのでそちらをご確認下さい。

テーマの構造 – baserCMS公式ガイド

またテンプレート内で使われている関数も公式ガイドを見ながら覚えていくと役に立つと思います。

関数リファレンス – baserCMS公式ガイド

それではまた!

 

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。