使い始めたユーザーに書いていただきました。選ぶ理由とは...?本連載は6回シリーズでお送りする予定です。cmsのメリットWordPressユーザーの皆さんこんにちは。cms入門、今回は、「テーマ」と「テンプレート」を取り上げます。cmsとWordPressは同じです。cmsではPHPをテンプレート内に記述できないようにしているため、テンプレートの拡張子は.phpではなく.htmlを使います。テンプレート内に直接PHPを書けないようにすることで、セキュリティホールができにくくなります。cmsの特長を支えるテーマとテンプレートの構造、カスタマイズの方法を見ていきましょう。WordPressのテーマWordPressの魅力のひとつは、多彩なテーマです。有料あるいは無料のさまざまなテーマから気に入ったものを選んで有効化するだけで、好みの見た目のサイトにすることができます。プラグインと同様、不具合やセキュリティーホールの原因になる可能性があるので、よく吟味して信頼性の高いテーマを選ぶ必要があります。有料あるいは無料のさまざまなテーマ大規模なサイト、複雑な構造のサイトを作る際には特にテーマを熟知しなければならないので、使い回しが効くベーシックなテーマを自作しているユーザーも多いでしょう。1年ごとに新しく発表されるデフォルトのテーマをカスタマイズするという方法もあります。WordPressのデフォルトのテーマは最新の技術とデザイントレンドを取り入れていて、これをカスタマイズすることは良い勉強にもなりますが、毎年ガラリと変わるテーマをその都度追いかけるには学習コストがかかります。毎年発表されるWordPressデフォルトのテーマは見た目が個性的で、それと分からないようにカスタマイズするにはCSSを大幅に書き換える必要があります。WordPressのテンプレート階層テーマを選び、適用するだけなら簡単なWordPressですが、テーマを自作したりカスタマイズしたりする場合はテンプレート階層を知っておく必要があります。上図はWordPressのテンプレート階層のうち、重要な部分のみをごく単純化したものです。Codexに詳しい図がある通り、実際にはスラッグやIDなどが絡んでもっと複雑です。「投稿」のレイアウトをカテゴリーごとに変えたい場合はテンプレートファイルの中でPHPの条件分岐を使って振り分けます。WordPressではひとつの投稿は複数のカテゴリーに属する場合があるので、テンプレートファイル自体を分けることができないためです。ホームページの表示」で何が選択されているかによって表示されるテンプレートが違います。このことと関連してWordPressでは全カテゴリーの投稿アーカイブの扱いが意外に難しく、設定やテーマの構成によって異なるのも注意が必要な点です。全カテゴリーの投稿アーカイブはcategory.phpやarchive.phpでは表示することができないので、他のアーカイブと同じレイアウトであってもテンプレートファイルは別になってしまいます。※1※1:図で示した通り、index.phpまで遡れば全カテゴリーの投稿アーカイブとその他のアーカイブを統一することができますが、テンプレートファイル内での条件分岐が複雑になるため一般的な方法とは言えません。cmsにもサードパーティ製のテーマがありますが、数は少なく、多くの場合は静的なサイトから構築するか、または同梱のテーマをカスタマイズして使います。cmsではテンプレートにおけるフォルダとファイルの構造はURLと対応している」については後の文章で詳しく説明します)。cmsの機能をフルに備えたsite2018、シンプルで分かりやすいbeginner2018(simple2016の後継)、v4.0.0のBootstrapが組み込まれたbootstrap2018、ブログに最適なblog2018などがあります。どのテーマも時代に左右されないベーシックなレイアウトで、最新の技術を取り入れながらもそれぞれのテーマの基本的な設計は変わりません。cmsとウェブの技術への理解を継続的に深めていくことができます。分かりやすいコメントが日本語でつけられているのも私たち制作者にとっては嬉しいポイントです。cms同梱のテーマは、すべてベーシックなレイアウトです。個性的なレイアウトやデザインのサイトのベースとして使うこともできます。テーマを変更するにはablogcms.ioをご使用の場合、デフォルトではsite2018がテーマとして設定されています。コンフィグ」の「テーマ設定」をクリックして、「テーマディレクトリ名」のセレクトメニューからテーマを選択して「保存」をクリックします。cmsをインストールしたフォルダ/themes/」内のフォルダ名が表示されます。コンフィグ」の「テンプレートファイル」でそれぞれのページに使用するテンプレートファイル名を必要に応じて変更することができますが、初心者のうちはこのままで使うほうが良いでしょう。同梱のテーマも、このテンプレートファイル名で作られています。_top.htmlindex.html_entry.htmlの3種類は特に重要なテンプレートファイルです。cmsではすべてこの3種類のファイルで実現されます。cmsでは「カテゴリーなし」のエントリー(WordPressでは「投稿」)をトップページとして作成し、そのエントリーコード(WordPressでは「スラッグ」)を空にします。すれば、「{ドメイン名}/」のURLでは_top.htmlではなく_entry.htmlが表示され、トップページの内容をこの連載の第1回でご紹介した「ユニット」で編集できます。cmsでは、デバッグモードを有効にした状態でログインした場合には管理用パーツ内に現在表示中のテンプレートが表示されます。デバッグモードを有効にした際は、ページのソースにインクルードしているテンプレートファイルの情報もコメントとして表示されます。開発者ツールを使って「ページのソースを表示」や「検証」で確認してみましょう。ヘッダー用のテンプレートファイルがインクルードされ、その内側にSNS用のJavaScriptがインクルードされていることが分かります。設定する必要があります。cmsインストール直後のコンテンツに「beginner2018」テーマを設定した場合を例に見ていきましょう。上図は、beginner2018テーマに含まれるテンプレートファイルのうち、主要なファイルの関係を示したものです。テーマディレクトリ直下の_top.htmlはサイトのトップページのテンプレートファイルです。テーマディレクトリ直下のindex.html、_entry.htmlはそれぞれサイト内で共通の一覧ページ、詳細ページのテンプレートファイルです。カテゴリーに特有のテンプレートファイルを表示したい場合は、カテゴリーコードと同名のフォルダをテーマ内に用意して、その中にindex.htmlや_entry.htmlを置きます。インストール直後のコンテンツのカテゴリーの中で、テーマに同名のフォルダが存在しない会社概要(company)製品情報(products)とその子カテゴリーの家庭用製品(domestic)、業務用製品(business)採用情報(recruit)に属する一覧ページや詳細ページでは、それぞれテーマディレクトリ直下のindex.htmlや_entry.htmlが表示されます。同名のフォルダが存在する物件情報(realestate)お知らせ(news)お問い合わせ(contact)に属する一覧ページや詳細ページでは、それぞれのフォルダの中にindex.htmlや_entry.htmlがあればそれが優先されます。cmsを構築する前段で見てきたとおり、URLと同階層同名のファイルがテーマディレクトリに存在する場合にはそのテンプレートファイルが表示されます。静的サイト全体をフォルダにまとめ、テーマ名をつけて/themes/フォルダにアップロードし、管理画面でそのテーマを選べばそれだけでサイトはすべて表示される状態になります。その状態から、CMSとして機能させる手順については、詳しいハンズオンがあります。テーマの構造について一通り知ることができるので、時間のある時にぜひやってみましょう。developerパスの起点はテーマディレクトリのルートテーマディレクトリ内のイメージファイルやCSSファイル、JavaScriptファイルへのパスは、テンプレートには/images/acms.svg/css/dest/site.css/js/site.jsといった具合に、テーマディレクトリを起点に書くことができます。cmsのシステムがパスを書き換えてくれるので、これらは自動的に/themes/{テーマ名}/images/acms.svg/themes/{テーマ名}/css/dest/site.min.css/themes/{テーマ名}/js/site.jsに変換されます。ドメイン名やテーマ名が変わってもテンプレートを書き換える必要はありません。cmsの場合はテーマディレクトリを起点に書くだけで、まず子テーマ内でファイルを探し、なければ親テーマのファイルを探してくれます。使ってエンキューする必要があります。複数のプラグインからjQueryなどのライブラリを何回も重複して読み込むのを防ぐ必要があるためです。linkタグやscriptタグを書き込むことができます。cmsでは@include("/include/header.html")のように書きます。ここでも、パスはテーマディレクトリが起点です。子テーマを使ったカスタマイズ同梱のテーマをカスタマイズする場合は子テーマを使うのがおすすめです。cmsでは子テーマの作成はもっと簡単です。コンフィグ」の「テーマ設定」で選ぶことができます。子テーマにないテンプレートファイルを親テーマに探しに行く仕組みはWordPressと同じで、カスタマイズしたいファイルだけを親テーマから子テーマにコピーして編集します。cmsでは、親テーマより上位のテーマとして「system」があり、管理ページやログインページのテンプレートファイルなど、どのテーマでも共通で使うファイルが入っています。systemテーマから使用中のテーマにテンプレートファイルをコピーして編集することによって、管理ページやログインページなどもカスタマイズすることができます。テンプレートの継承Ver.2.8で追加された便利な機能のひとつに、テンプレートの継承があります。ベースとなるテンプレートを継承し、継承元とは異なる部分のみ上書きする機能です。blog2018のテーマではこの継承機能を使ってテンプレートファイルが書かれていて、以前のバージョンと比べると行数がかなり短くなっています。entry_ext.htmlのように、テンプレートの継承機能を使っていないファイルと使ったファイルが同梱されています。どちらを使っても表示結果は同じです。比較して、継承機能の理解に役立てましょう。すべてのテンプレートファイルのベースになっています。囲んだブロックが継承できる範囲、つまり、それぞれのテンプレートで独自に設定したい範囲です。それぞれのテンプレートファイルの冒頭で@extends("/layouts/base.html")と継承元のテンプレートを指定し、継承元のテンプレートとは異なるセクションだけを記述します。-->@include("/include/entry/summaryImageMain.html")@endsectionの8行だけで終わっています。これは、「”/layouts/base.html”のテンプレートをベースにして、”main”セクションを書き換える(”/include/entry/summaryImageMain.html”をインクルードする)」という意味です。使って、継承元のテンプレートのセクションの内容を活かして、さらに独自の内容を追加することもできます。rel=”stylesheet”>を追加する」という意味です。テンプレートの継承機能を覚えれば、効率的なカスタマイズが可能です。詳しく知りたい場合は下記のリンクを参照してください。cmsの公式ドキュメントを参照してください。developerそれでは、第4回「URLの階層と一致しているテーマ&テンプレート」は以上となります。第5回は「更新、再利用が簡単なパーツ「モジュール」」です。cmsでこんなことってできるの?」などのお気軽なご相談をお待ちしています。開発元のスタッフとビデオチャットを使ってリアルタイムで疑問にお答えします。なにか気になっていることや疑問があればスッキリ解決できるはずです。Webサービスを使ってオンライン相談をおこないます。ソフトウェアの準備は必要なし。マイクとスピーカーのみご準備ください。亜貴子WordPress歴はかれこれ10年ほど。cmsは2017年の夏、勉強会で知りました。フリーランスでCMS構築、コーディングをやっています。美容師にそそのかされて前髪を短く切ってしまいました。体験してみませんか?必要なのはメールアドレスだけ。スマホからも登録可能。インストールされているあなただけの環境を30日の間提供する無料のサービスです。必要なのはメールアドレスだけ。登録だけならスマホでも始められるのでお手軽にお試し可能です。あなた専用の制作環境のため、記事の投稿はもちろん、SFTPでサーバーに接続して自由にカスタマイズできます。cms製Webサイトをご覧いただけます。