ずっと昔のこと。
WordPressで運用されているとあるサイト。
テーマの新しいバージョンがでたので更新したところ、事件が発生しました。
なんと、表示されていた必要な情報が消えていたのです。
調べてみると、テーマをアップデートすると、情報が上書きされてしまうということがわかりました。
つまり、元々テーマ自体にカスタマイズがされていた。
ところが、テーマをアップデートしたため、カスタマイズした内容が上書きされてしまった。
その結果、カスタマイズした内容が消えてしまった、ということでした。
テスト環境だったので助かりましたが、一瞬ドキッとしました。
では、どうすれば良かったのかというと、子テーマを使用すればよかったのです。
WordPressの子テーマを使用することで、サイトに独自のカスタマイズをすることができます。
この記事では、「WordPressの子テーマを使用して、独自のカスタマイズをする方法」を説明します。
子テーマとは
そもそも、WordPressにはテーマといって、あらかじめデザインされたサイトのテンプレートがあります。
そのテーマとは別に、子テーマというものが用意されていることがあります。
子テーマとは、テーマの内容を引き継いだ上で、独自のカスタマイズができるテーマのことです。
例えば、「固定ページにはメインビジュアルがないけど、ある固定ページだけメインビジュアルを表示させる」といったことができます。
この説明だけだと、
「それなら子テーマを使用しなくてもできますよ？」
と言われてしまいそうです。
確かに、その通りです。
では、子テーマを使用するメリットは何なのでしょうか？
子テーマのメリット
メリットは、2つあります。
- テーマをアップデートしても、カスタマイズした内容が上書きされない
- CSSの管理がしやすい
テーマをアップデートしても、カスタマイズした内容が上書きされない
これが一番のメリットです。
もちろん、テーマをいじれば、特定のページの構造やデザインの変更をすることができます。
しかし、テーマをアップデートしてしまうと、カスタマイズした内容が上書きされてしまいます。
上書きされてしまった場合、また同じカスタマイズをする必要があります。
それでは面倒だし、手間ですよね。
そこで、子テーマの出番です。
子テーマを使用すれば、テーマをアップデートしても、カスタマイズした内容が上書きされることはありません。
CSSの管理がしやすい
デザインの変更自体は、子テーマがなくてもできます。
WordPressには、追加CSSという機能がついているので、そこでCSSを変更することができます。
しかし、追加CSSを使用すると次のようなデメリットがあります。
- テーマを別のテーマに変更すると、追加CSSの内容が消えてしまう
- CSSが増えてくると、読みづらいため、変更しづらくなってしまう
子テーマを使用すれば、そんなデメリットから開放されます。
「せっかくCSSを調整したのに、テーマを変更したら消えてしまうのはつらい。。。」
「CSSが増えて読みづらくなって、管理するのが大変だな。。。」
そんな思いをしたくない人は、子テーマを使用するようにしましょう。
子テーマの作成方法
子テーマのメリットがわかったところで、子テーマの作成方法について説明します。
子テーマがないテーマを使用している場合でも、同じように作成することができます。
安心してください。
とても簡単です。
今回は、デフォルトで用意されているテーマ「twentytwentythree」の子テーマを作成します。
デスクトップでもどこでも大丈夫です。
わかるところに作成してください。
フォルダー名は、何でもかまいません。
おすすめは、「テーマ名-child」の形式で作成するとわかりやすいです。
今回は、「twentytwentythree-child」というフォルダーを作成します。
「twentytwentythree-child」の中に、style.cssファイルを作成します。
style.cssの中に、次の形式でコメントを追加します。
/*
Theme Name: 子テーマの名前
Template: 子テーマを適用するテーマの名前
*/これに当てはめると、今回は次のようになります。
/*
Theme Name: twentytwentythree-child
Template: twentytwentythree
*/「twentytwentythree-child」の中に、functions.phpファイルを作成します。
functions.phpの中に、次のコードを追加します。
<?php
function theme_enqueue_styles()
{
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
wp_enqueue_style(
'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');興味のある方に向けて、簡単にコードの解説をします。
読み飛ばしても問題ありません。
やっていることは、簡単です。
テーマのstyle.cssを読み込んで、その後に子テーマのstyle.cssを読み込むように命令しています。
wp_enqueue_style関数は、CSSファイルを追加する関数です。
第一引数で、読み込むスタイルシートの名称を設定します。
第二引数で、読み込むスタイルシートのパスを指定します。
第三引数で、読み込むスタイルシートよりも前に読み込まれる必要があるスタイルシートを指定します。
参考: https://developer.wordpress.org/reference/functions/wp_enqueue_style/
これらを元に当てはめると、次のようになります。
最初に、テーマのstyle.cssにparent-styleという名称を設定して、読み込んでいます。
次に、子テーマのstyle.cssにchild-styleという名称を設定しています。parent-styleという名称がついているスタイルシートを読み込んだ後に、子テーマのstyle.cssを読み込んでいます。
最後に、子テーマを反映させます。
FTPを使用しても、管理画面からでもどちらでも大丈夫です。
親テーマと同じ階層に子テーマを設置します。
今回は、管理画面から反映させる方法を説明します。
- 子テーマをzipファイルに圧縮します
- 管理画面の外観のテーマから、新規追加をクリック
- テーマのアップロードから、zipファイルの子テーマを選択してインストール
- 有効化をクリックして完了です
FTPを使用する場合は、圧縮していない子テーマをwp-content/themes/の中に設置してください。
その後、外観のテーマから、子テーマを有効化して完了です。
子テーマのカスタマイズ
最後に、子テーマを使用したカスタマイズを紹介します。
CSSを変更する
テーマファイルエディターを使用して、子テーマのCSSを編集します。
外観の中、ツールの中のどちらかにあります。
デベロッパーツールを使用して、CSSを変更したいクラス名を探します。
変更したいクラス名がわかったら、あとはCSSを書いてあげるだけです。
例えば、次のような感じです。
.wp-block-post-title a {
color: red;
}構造を変更する
コードをみて、ある程度何をしているかわかる人向けです。
子テーマに、親テーマと同じディレクトリを用意して変更します。
例えば、「twentytwentyone」で説明します。
footer.phpを変更するなら、子テーマにもfooter.phpを作成します。
content/content.phpを変更するなら、子テーマにもcontent/content.phpを作成します。
こうすることで、テーマの環境を保ったまま、子テーマで自由にカスタマイズすることができます。
まとめ
WordPressの子テーマについて説明しました。
子テーマとは、テーマの内容を引き継いだまま、独自のカスタマイズができるテーマのことです。
子テーマを使用すれば、テーマをアップデートしても、カスタマイズした内容が削除されません。
また、固定ページから変更できないような内容でも、変更することができます。
WordPressをカスタマイズしたい方は、参考にしてみてください。
もし何かわからないことがあれば、サイバースペースまでご相談ください。
相談無料ですので、お気軽にお問い合わせください。
