[WordPress] TwentySixteenの導入:子テーマ編


WordPressもバージョン4になり、新しい公式テーマも追加されたので、思い切ってTwentySixteenのカスタマイズに着手することにしました。
今まではものぐさなことに親テーマをそのまま書き換えてテーマをカスタマイズしていましたが、「子テーマを作ってカスタマイズするのが推奨されている」と聞き、慌ててまずは子テーマ作りに着手。

そもそも子テーマとは何なのか・・・
カスタマイズしたいテーマ(今回はTwentySixteen)を親として作成し、親テーマを直接カスタマイズするのではなく、子テーマ側をカスタマイズすることによって、TwentySixteenがアップデートされた時でもカスタマイズした箇所が変更されてしまわないようにするもの。らしいです。

「子テーマ作成」で検索すると山ほど解説してくださっている記事が見つかると思いますが、個人的には一つの記事だけではなくいくつかの記事をマルチに参考にすることをお勧めしたいです。なぜかと言うと、ハマったから。
必要なコードが抜けていたり、コードが全角で表示されてしまっていて丸ごとコピペしたら失敗した、という記事もあったのでね!

子テーマの作り方

コマンドラインの使えないレンタルサーバなので、FTPでやりました。

(1):まずはFTPソフトでWordpressがインストールされているディレクトリに移動、wp-contentディレクトリ内のthemesディレクトリの中に子テーマのディレクトリを作成する。
子テーマの名前を決めてそのテーマ名のディレクトリを作成します。「twentysixteen」の子テーマだから「twentysixteen-child」にするとわかりやすいよ!という記事が多いですが、別に好きな名前をつけてOK。今回は「twentysixteen-child」にしてみた。

(2):「style.css」という空のテキストファイルを作成。中に書く内容はこちらを参考にしました(xserver用の解説だけどコードの部分はこれを使わせて頂きました)。
  ここで文字コードと改行コードに注意せなあかんようです。文字コードはデータベースサーバをUTF-8にしたのですが、Wordpressの場合は「BOMなし」というのが標準らしく、Terapadの「文字/改行コード指定保存」で「UTF-8N」と「LF」を選択して保存しました。詳しくはこちら

(3):「functions.php」という空のテキストファイルを作成。中に書く内容はstyle.cssと同じくこちらを参考にしました。

(4):(1)で作成したディレクトリ(今回はtwentysixteen-child)に、(2)と(3)で作成したstyle.cssとfunctions.phpをアップロードする。
(5):Wordpressのダッシュボードにアクセスし、外観>テーマを選択。(2)で設定したテーマ名の項目ができているはずなので、「有効化」をクリックするとサイトに反映される。

以上で作成は完了!

自分の場合は先ほど書いた「コードを丸ごとコピペしたら全角が入っていておかしくなった」「改行コードと文字コードがおかしかった」の2点で最初は失敗しましたが、最終的には作成できました。

続く。