[WordPress] TwentySixteenの導入:子テーマをカスタマイズ


前回子テーマの作成に成功したので、今度は子テーマをカスタマイズしていこうかと。

と言いつつ、子テーマのカスタマイズって実際にはどのように手をつけたらいいのか・・・さっぱりわからない・・・。
「子テーマのstyle.cssを優先して、足りない部分を親テーマのstyle.cssで補完する」というようなイメージでぼんやりとらえていたけど、本当にそれで合っているのか??

「子テーマ」「カスタマイズ」等で検索しても、子テーマ作成の方法だけの記事がぶわーーーっと出てきて、「作成した後どうするか」を解説してある記事がなかなか見つからず、やっとこさ発見しました。

バイラルクラブ – wordpress子テーマの作り方!style.css・各テンプレートファイル・function.php の設定手順

一般的には、親テーマの内容を全コピーして、カスタマイズしたい部分だけ、変更・追記していく形が良いでしょう。

アフィリエイトで稼ぐ方法を全部話そうと思う – WordPressでフォントや文字大きさ、行間をカスタマイズ
style.cssに関しては、「全コピーして必要な箇所だけを変更・追加」ではなく、「最初に作った状態に追記」という形でいいようです。

とりあえず試しに、上記サイトで例として書かれているフォントの変更にチャレンジ。
・・・してみたものの、記事本文が明朝体のまんま!!

原因究明のため、続く・・・

[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点で最初は失敗しましたが、最終的には作成できました。

続く。