第一回と言いつつ全く再開していなかった以下の記事の続きになります。
以前の記事で管理画面からCSSを編集していますが、これを行う前に確認するべき点があります！
よく調べもせず記事にしてすいません…
テーマのカスタマイズは子テーマを利用する方法もあります。
そのメリットは以下です。
子テーマの変更はテーマアップデート後も適用される
前回の僕の記事のように、わざわざ子テーマを作成せずとも親テーマに直接変更を加えることもできます。
しかし親テーマをカスタマイズする一番の問題は、テーマアップデートの際に変更箇所が消去されてしまうことにあります。
テーマアップデートを行わない手もありますが、Wordpress自体のアップデートによってテーマで使用されている関数などが非推奨になることがあります。
子テーマによる変更であれば親テーマをアップロードをしても、子テーマが消去されることはありません。
更新頻度が多いテーマであれば尚更、子テーマでのカスタマイズがおすすめといえるでしょう。
変更が簡単
WordPressのテーマを一から作成するのは大変です。
僕は当初テーマの自作を考えていましたが、これが超大変です。
それぞれのテンプレートファイルを作成するのはもちろん、CSSも自分で記述しなければなりません。
SEO対策やレスポンシブ対応などこだわりだすときりがありません。
子テーマを利用することで自分の変更したい箇所だけの記述に収まります。
また、仮に子テーマに記述したCSSが原因でデザインを壊してしまっても親テーマにはなんの影響もありません。
Stinger8の子テーマのインストール
STINGER8の子テーマはこちらからになります。
以下からインストールできます。
※親テーマをインストールしていることが前提になります。
インストールが完了したらWordpressの管理画面からテーマのダウンロードを行ってください。
子テーマによるカスタマイズ
カスタマイズに最低限必要なファイルは揃っています。
デザインのカスタマイズであればStyle.cssを編集します。
また、子テーマ自体もレスポンシブに対応しており、記述する個所によってどのデバイスで適用するか選択ができます。
PC表示のカスタマイズであれば、25~29行目あたりの以下に記述します。
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {/*-- ここまで --*/
}
また、子テーマによって各テンプレートファイルを上書きすることも可能です。
例えばトップページの投稿記事一覧を編集したい場合、親テーマであるSTINGER8ではトップページは「itiran.php」で表示しているようですので、このphpファイルを子テーマにコピー＆ペーストを行います。
これで画面表示の際には子テーマの「itiran.php」が最終的に読み込まれますので、子テーマの「itiran.php」の編集内容が適用されます。
僕はこの方法で以下のようにカスタマイズを行いました。
※トップ画像と背景は管理画面から変更しています。
↓before
↓after
記事の領域を広げてボックスっぽくしました。
テーマのデザインを根こそぎ変更する場合はかえって時間がかかるかもしれませんが、少なくとも親テーマのデザインを踏襲したまま一部変更したい場合は子テーマによる変更が圧倒的に時間の短縮にはなると思います。
しかしデメリットも存在する
以下の記事でデメリットを解説してくれています。
親テーマの読み込み後に子テーマを読み込むのでもちろんサイトの表示速度が遅くなり、表示速度はSEOの評価基準の一つなっているのでSEO的にもマイナス要因になるようです。
今回の子テーマで具体的にどれくらいサイトのパフォーマンスに影響がでたのか今度測定してみます。
以上が今回のカスタマイズになります。
子テーマ全体のカスタマイズのめどが付けば、困ったところやWordpressのテーマの仕組みを記事にしたいと思います。
ここまで読んでいただいてどうもありがとうございました。
それでは、また。