WordPressのテーマは、php、css、javascript…と、様々な種類のファイルで構成されています。
- php
- css
- javascript
- 画像ファイル
- 翻訳関係のファイル
- ライセンス関係のファイル
_sをダウンロードして、どのようなファイルがあるのか、それぞれのファイルはどのような役割を持つのかを確認します。
_s のダウンロード
_sは、公式サイトとGitHubの双方からダウンロードできます。
内容はどちらも大きく変わりませんが、公式サイトでadvanced optionsを入力してコードを作成すると、テーマを独自に使っていくための設定をいくつかやってくれるので、公式サイトがおすすめです。公式サイトのadvanced optionsからダウンロードする際に、自分はすぐに理解できなかった点が3点ありました。
- Theme Slug テーマのフォルダ名を記入する。
- WooCommerce boilerplate ECサイトのプラグインを含んだコードを作成したい時はチェックを入れる。
- _sassify! sassファイルを含んだコード を作成する際にチェックを入れる。
_sの構造を理解する
ダウンロードした_sを解凍して中身を確認します。
htmlに関わるphpファイル
各phpファイルの中で、まずはhtmlの構造に関係するphpファイルについて注目します。
header.php、sidebar.php、comments.php、footer.phpは、どのように使われるのか名前で想像しやすいです。メインのコンテンツになる部分には、index.php、page.php、single.php、archive.php、404.php、search.phpが使われます。
普通の2カラムのwebsiteを考えると、それぞれのファイルは以下のように対応します。
テンプレート階層とテンプレートファイル
WordPressでは、テンプレート階層という仕組みに従って、ある情報が要求された時にどのhtmlを使ってその情報を表示するのか、を決めます。index.php、page.php、single.php…などのファイルは、テンプレートファイルと呼ばれ、このテンプレートファイルの名前によって、テンプレート階層に従った表示の優先順位が決まるので、ファイル名がとても重要です。 また、 例えば「page.phpなら固定ページを表示する」というように、このファイル名はこういう用途で使うとそれぞれ決まっています。下はWordPress Codex のテンプレート階層の図です。
https://developer.wordpress.org/files/2014/10/Screenshot-2019-01-23-00.20.04.png
ダウンロードした_sに入っているテンプレートファイルは6種類です。
- index.php 下以外を表示する際に使うテンプレート
- page.php 固定ページを表示する際に使うテンプレート
- single.php 投稿ページを表示する際に使うテンプレート
- archive.php アーカイブページを表示する際に使うテンプレート
- 404.php 404を表示する際に使うテンプレート
- search.php 検索結果を表示する際に使うテンプレート
テンプレートパートファイル
header.php、sidebar.php、comments.php、footer.php は、各テンプレートで内容が共通する部分をそれぞれ切り出したモジュールのようなもので、テンプレートパートファイルと呼ばれます。
例えばheader部分は、ほとんどのテンプレートファイルで共通なので、header.phpというモジュールとして切り出しておいて、それぞれのテンプレートファイルで読み込んで利用します。
その他、_sでは、template-partsというディレクトリに、content.php、content-non.php、content-page.php、content-search.phpというテンプレートパートファイルがあります。これらのファイルは、index.php、page.php、single.php…といったWordPressが事前に用意してくれたテンプレートファイルとは違って、テーマを作る人が独自に定義して使用するためのテンプレートファイルで、get_template_partという関数で呼び出すことができます。
テーマで使われる関数を定義するファイル
PHPが標準で準備してくれている関数や、WordPressが準備してくれている関数以外に、独自の機能を追加するため、関数をテーマごとに追加することができます。_sでは、functions.phpとincディレクトリ以下のphpファイルに定義されています。
テーマのデザインを定義するCSS
styles.cssにテーマのデザインを記述します。また、WordPressでは、そのテーマを識別するための基本的な情報をstyles.cssの最初に記入するルールになっています。rtl.cssという、右から左に読む言語のためのcssファイルがあります。また、layaoutsディレクトリには、2カラム用のcssが入っています。
その他、自分の場合、以下のファイルが生成されていました。
- screenshot.png テーマのスクリーンショット
- phpcs.xml.dist コーディングルールに関する設定
- jsディレクトリ テーマで使われるjavascriptファイル
- languageディレクトリ 多言語化対応の際に翻訳ファイルを設置
- README.md マークダウンのreadme
- readme.txt テキストのreadme
- LICENSE ライセンスについて書かれている。_sはgnuライセンス。
Webサイトの3つの柱
簡単に言うと、webサイトは一般的に3つの柱から出来上がっています。
- コンテンツを担当するhtml
テキスト部分、画像、リンク、ボタン、フォームなど、ブラウザに表示される情報。 - スタイルを担当するcss
htmlがブラウザ上でどのように見えるかというデザインを決める。 - 動きを担当するjavascript
ブラウザ上でインタラクティブな部分など、動的な機能を実現する。
WordPressテーマと3つの柱の関係
_sで解凍したディレクトリを見ると、style.cssとjsディレクトリがあります。この2つがそれぞれ、3つの柱の2つにそのまま対応します。残る柱は、htmlです。
WordPressは、phpというプログラミング言語とmysqlというデータベースシステムを使って、htmlファイルを作成します。 例えば、index.htmlをクライアント（ブラウザ）から要求されると、WordPressでは、phpがデータベースから必要な情報を部分ごとに取り出してindex.htmlを作成し、クライアントに渡します。
_sでは、index.php、header.php…といった各phpファイルが一体となって、データベースから必要な情報をとりだして、必要なhtmlファイルを作成します。テンプレートファイルという単語が前回出てきましたが、テンプレートファイルとは、htmlにデータベースの情報を埋め込むためphpが組み込まれたものです。
まとめると、_sでは、どういった変更したいかによって、どこをいじるのか決まります。
- サイトに表示する情報を変更したい。→ phpファイルを作成変更する。
- サイトの見た目を変更したい。 → style.cssを作成変更する。
- サイトに動きをつけたい。→ jsディレクトリ以下のjsファイルを作成変更する。