【WordPress】yStandardカスタマイズ、子テーマの使い方

【WordPress】yStandardカスタマイズ、子テーマの使い方

2020年1月17日
Web/WordPress

今回は、子テーマを使ったカスタマイズについて紹介したいと思います。
使用テーマはyStandardです。

子テーマの使い方

子テーマって?

子テーマは自分だけのカスタマイズをするときに使用します。具体的には親テーマを上書きしたり、付け足したりしてカスタマイズします。yStandardの公式では、テーマのダウンロード時に子テーマもあわせてダウンロード、インストールすることを推奨していますね。

yStandardテーマ本体・子テーマのダウンロードページです。 yStandard 本体 yStandardをダウンロード 動作に必要な環境 WordPres
wp-ystandard.com

子テーマを使うメリット

親テーマでカスタマイズする場合、テーマのアップデートがあるたびにカスタマイズした部分がリセットされてしまいます。
子テーマは親テーマに対し上書き、付け足しを行うものなので、親テーマにアップデートがあっても子テーマの情報は消えません。

カスタマイズするファイルによっては、一字違うだけでサイトの運営に支障をきたすようなものもあります。そのようなファイルも、子テーマのエラー部分の記述を削除するだけでデフォルトの親テーマが適用されます。

このように、子テーマを使用することでカスタマイズを容易に、安心して行うことができます。

基本的な使い方

子テーマは、親テーマのファイルを子テーマにコピーして使います。
ここではテーマファイルのコピーにFileZillaというFTPソフトを使用します。

「FTPソフトとは何?」というところから「WordPressでFTPソフトを使うメリット」「FileZillaの使い方」まで詳しく解説します。初心者の方向け。
saruwakakun.com

子テーマでカスタマイズしてみる

画面右側、赤枠で囲った部分が子テーマのテーマファイルです。ここにあるファイルをいじってカスタマイズします。

user-custom-head.phpを見てみましょう。
ここに書かれた内容は、<head>内に出力されます。よく目にする、「このコードを<head>内に貼ります」的なものはここに貼ります。

上の画像にはweb font用のコードが貼ってあります。

カスタマイズとして最もよく利用するのがcssではないでしょうか。[外観]→[カスタマイズ]→[追加css]でも編集できますが、テーマファイルのスタイルシートでも編集できます。

既に設定されているaのリンクの色を変えたり、自分で作成したクラスを設定したりと親テーマを上書き、付け足しすることができます。

cssでのポイントとして、親テーマで設定してある項目を子テーマでは設定しなかった場合、未設定部分は親テーマがあてられます。

h2 {
	font-size: 1.4em;
	margin: 3em 0 .25em;
	padding: 0;
	font-weight: 400;
}

例えばこんな感じのパラメータがあるとします。

h2 {
	font-size: 1.8em; /* 上書き */
	letter-spacing: .1em; /* 付け足し */
}

子テーマのスタイルシートでカスタマイズしたパラメータ。

font-sizeは既に設定されていたので上書きになり、元々設定されていなかったletter-spacingは新たに付け足しになります。
残りの設定は、カスタマイズした方には書かれていないため、元の設定を引き継ぎます。消えたりはしません。

親テーマからコピーしてカスタマイズ

親テーマからコピーすることで、カスタマイズするテーマファイルを増やすことができます。

一番苦労するのが、親テーマのどこに何があるのか、自分がカスタマイズしたいファイルは何なのかを探すことです。これはほんとに大変。

一例として、footer-parts.phpを子テーマにコピーしてみます。
使用しているのはFTPソフトのFileZillaです。

yStandardの親テーマからfooter-parts.phpファイルをPCにコピーします。このとき親テーマのフォルダ構成を覚えておきましょう。

[yStandard]→[template-parts]→[singular]→footer-parts.php

となっています。

子テーマにアップロードするときは、親テーマのフォルダ構成と同じにします。

[yStandard-child]→[template-parts]→[singular]→footer-parts.php

template-partsフォルダを作成し、その中にsingularフォルダを作成し、footer-parts.phpファイルを置きます。

コピーが上手くいっていればテーマファイルにtemplate-partsが現れ、その先にfooter-parts.phpがあるはずです。
これで子テーマでfooter-parts.phpがいじれるようになります。その他のファイルも同じ要領で子テーマにコピーしてカスタマイズすることができます。

【WordPress】yStandardカスタマイズ、SNSボタンの下に関連コンテンツを配置する
今回は、関連コンテンツをSNSボタンの下に配置するカスタマイズ例を紹介したいと思います。使用テーマはyStandardです。 ※yStandardはv3からv4…
seguimiii.com

いかがだったでしょうか。
親テーマを非破壊でカスタマイズできるのが子テーマです。特にyStandardは自分でカスタマイズするのがコンセプトのテーマで、子テーマを利用していじり倒すのが楽しみのひとつかなと思います。

機会があれば是非、子テーマでカスタマイズしてみてください。