ワードプレスのテーマを編集するために知っておくべきこと

1. はじめに

私はプログラマーではありますが、いざワードプレスのテーマを編集しようと思ったときに何をしてよいのかわからなかったため、ワードプレスのテーマを編集するために知っておくべきことを備忘録としてまとめることにしました。ですので、PHPやjavascriptなどのプログラミング文法は本記事では取り扱っておりません。ご了承ください。

2. 作業環境を構築する（ダウンロード/インストール）

• まずは環境構築からはじめましょう。基本的に以下の二つをインストールしておけば十分です。
  • ローカル編集環境（Wordpress実行環境）：LOCAL
    • 直接サーバー上のファイルを編集するのではなく、ローカル環境上でファイルを編集して、表示確認、アップロードするのがおすすめです。
  • ソースコードエディタ：Visual Studio Code
    • エディタは何でもOKなのですが、個人的にはこれが一番なじみがあって使いやすいです。プラグインも豊富です。

PHP、データベース（Mysql）はそれぞれ最新バージョン、サーバーは汎用性の高いApacheの選択をお勧めします。
※参考URL：Localの環境構築について

3. ワードプレステーマの構成を理解する

3.1 テーマの最小構成

以下の2ファイルがあればワードプレスにテーマとして認識される(空ファイルでも可)

• index.php
• style.css

3.2 テンプレート階層について

各ページで表示されるファイルの優先順位が以下のテンプレート階層図に表現される。
日本語版リンクはこちら
英語版リンク（最新）はこちら

「Primary Templete」部分が主要ファイルとなっており、左側のブロックが優先的に表示される仕様となっている。「Page Type」に対してテンプレートファイルが存在しない場合は何も表示されず、3.1で挙げた最小構成の2ファイルが存在すればテーマ破損やエラー扱いにならない。

3.3 便利なプラグイン

3.2で紹介したテンプレート階層に従ってファイルを作成するが、「Query Monitor」というプラグインを使えば、表示されているページのファイル名が確認できるので便利。

3.4 テーマ名の設定

テーマ名や作者、説明などの属性は「style.css」のコメント欄から判断される。例えば以下のように記述できる。

/*
 * Theme Name: My Blog
 * Author: klingmu
 * Description: learning
 * Version: 0.1
 */

3.5 親テーマと子テーマ

テーマを編集する際は、子テーマを作成して編集するのが基本。親テーマを直接編集することもできるが、バージョンアップが行われた場合に、変更部分が上書きされてしまう。

子テーマは「Template」に親テーマ名を記載し、以下のように作成する。

/*
 * Theme Name: My TwentyTwenty
 * Author: klingmu
 * Description: learning
 * Version: 0.1
 * Template: twentytwenty
 */

子テーマはstyle.css以外のファイルを親テーマから引き継ぐため、ファイルが存在しない場合でも親テーマのファイルが読み込まれる。ただし、子テーマのファイルは親テーマより優先されるため、基本的には親テーマからの差分ファイルのみ準備すればよい。

3.6 テンプレートタグ

ワードプレス専用に用意されているPHPの関数を「テンプレートタグ」という。例えば以下のような関数がある。

• the_title() : 現在の投稿のタイトルを表示、あるいは返します
• the_date() :記事の投稿/更新日を出力

こちらに一覧があります。

PHPファイルに必ず必要なテンプレートタグ

テンプレートファイルを動かすために必ず記述が必要がものが以下の二つ。

• wp_header(): headタグ終了の直前に挿入
• wp_footer(): bodyタグ終了の直前に挿入

上記を忘れてしまうと、表示が崩れたりする原因になるので注意が必要。
忘れないように新規で作成する場合は必ず最初に記載するようにしましょう。

4. PHPプログラミング

ブログのタイトルを複数件表示するような部品コンポーネントや、デザインだけでは表現できない動的なページテンプレートの生成などの際にはやはりPHPプログラミングが必要になります。最低限知っておくべきことだけまとめておきます。

4.1 PHPの基本文法と逆引き関数

以下のサイトにまとまっているので、プログラミングの際は参考になります。

• 基本構文はこちら
• 逆引き関数はこちら

4.2 コンポーネント化（パーツファイルを分ける）

オブジェクト指向プログラミングでは基本ですが、index.phpに全てを記述するのではなく、いくつかパーツファイルに分けてPHPファイルを作成するようにしましょう。例として以下のような分け方ができるかと思います。

• header.php
• footer.php
• sidebar.php

4.3 テンプレートタグ

テンプレートタグとは、ブログのデータを動的に表示したり、個性的で面白いブログにカスタマイズしたりするときに3.2 テンプレートの中で利用されるWordPressの特別な関数のことです。以下によく使うテンプレートタグについて記述します。

• the_permalink(): 個別ページのリンク
• get_template_directory_uri(): テンプレートディレクトリのURI（http://XXXXX.local/）
• get_template_part(): テンプレートパーツを表示する

他にもさまざまな関数が用意されていますので、テンプレートタグ一覧を参照ください。

4.4 関数リファレンス

テンプレートタグ以外にも、WordPressにはさまざまな関数が提供されています。

4.5 functions.phpについて

functions.phpは全ファイルにリンクされており、以下の2種類の使い方があります

• テーマ内で汎用的に使われるソースコード
  • ショートコードの定義
  • 使いまわしたい処理（ページネーションなど）
• 管理画面等の設定用ファイル
  • 記事投稿画面のカスタマイズ
  • 権限ごとに許可される行動のカスタマイズ

以下はテーマがアイコンキャッチ画像の設定を有効にするものです。

<?php
add_action('init', function() {
  add_theme_support('post-thumbnails');
})
?>

5. スターターテーマを利用する

• Underscores
  • テーマを作成する際、スターターテーマを使ったほうがゼロから作るより効率的です。UnderscoresはWordPressを開発しているAutomattic社が提供しているテーマで、余計な装飾がなくて使いやすいため、一般的によく利用されているようです。Undersocresのダウンロード方法はこちらで紹介されています。