最先端のWebマーケティングを発信するメディア

最先端のWebマーケティングを発信するメディア
ウェブデザイン

サイトのカスタマイズに必須! WordPressの「子テーマ」とは

最終更新日:
SHARE
FacebookTwitterLineHatenaShare

サイトをより良いものにしたいと思ったとき、デザインのカスタマイズが必要になることがあるでしょう。しかし「デザインを変えるのは難しい」と思ったり「何かあった時に対処できるか不安」になったり、悩みを抱えている方もいると思います。そんな悩みを解消してくれるのが、今回解説する「子テーマ」です。

※この記事ではWordPress 新エディタGutenberg(グーテンベルク)を使用することを前提としています。

子テーマはもとのテーマを引き継いだ存在

WordPressには多くのテーマが存在し、無料で使用できるものがたくさんあります。テーマとはWebサイト全体のテンプレートのことで、デザインや構成、使える機能などが一式揃っており、それを適用させるだけで複雑な設定を行うことなく素敵なサイトが出来上がります。しかし、使い続けていくと「記事ページのレイアウトを変えたい」、「SNSのボタンを設置したい」など、サイトをより良いものにするために、そのテーマにもともと備わっていない機能やデザインを求める欲がでてきますよね。そこで子テーマを活用します。

子テーマは、もととなるテーマ(親テーマ)のスタイルや機能を受け継ぎ、編集するために使用する別のファイルです。テーマを別の領域で編集するための箱という風に思ってください。配布されているテーマの中には専用の子テーマが用意されているものもあり、子テーマを利用すること自体が一般的になっています。もし、利用しているテーマに子テーマが用意されていなくても、簡単な準備をするだけで使用できるので、便利な機能といえるでしょう。

※子テーマの設定方法は後ほど解説します。

WordPressで子テーマを使用する必要性

子テーマを使用するには一手間加えなければならないので、直接、親テーマに手を加えた方が早いと思うかもしれません。しかし、親テーマがアップデートされた時やテーマを変えた時に、サイトのデザインは元の状態に戻ってしまいます。そこで子テーマを使用すると、アップデートしても別ファイルで保存されているので、カスタマイズした状態をそのまま保持することができます。

また、親テーマをもとに作成するため、一から作る必要がなく、難しいコードを書く必要がないのも魅力です。子テーマを使用するメリットはこれだけではありません。親テーマはすべてのファイルを管理する必要があるのに対して、子テーマには必要なファイルだけを入れておけばいいので、仕事の効率化にも貢献してくれます。何かトラブルがあった時や直したい時にすぐに対処できるでしょう。子テーマは自分が手を加えたテーマを安全に守り、簡単にカスタマイズできる役割を持っているのです。

子テーマはどうやって作るの?

子テーマを自前で作るには1つのフォルダとその中に2つのファイル「style.css」、「functions.php」が必要になります。まず、WordPress のテーマがあるディレクトリ(/wp-content/themes)にフォルダを作りましょう。フォルダ名はなんでも構いませんが、分かりやすいように「(親テーマ名)-child」とつけると後で見つけやすいのでおすすめです。フォルダ名に空白が含まれるとエラーが生じるので気をつけてください。フォルダを作成したらその中に先ほど説明した2つのファイルを作ります。

「style.css」の作成

このファイルには、下記のコードを記述してください。

/*
Theme Name: (子テーマの名前)
Template: (親テーマの名前)
*/
画像内では、例として「twentyseventeen」のテーマを使用しています。
これでstyle.cssの準備は完了です。

「functions.php」の作成

このファイルには下記のコードを記述してください。

<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
  wp_enqueue_style( ‘style’, get_template_directory_uri() . ‘/style.css’ );
  wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’,
  array(‘style’)
 );
}
?>

これで「style.css」、「functions.php」のコードは完了です。上記は最低限のコードなので、必要に応じて追加してください。

ここでチェック

テーマ

ここでWordPressの管理画面に入って子テーマが認識できるか確認してみましょう。

「外観」→「テーマ」を選択し、親テーマの横に子テーマが表示されていたら成功です。


有効化を押せば子テーマが使用された状態になります。

WordPressの子テーマは親テーマより優先される

これで外見は親テーマと一緒になりました。この後はカスタマイズしたいテンプレートファイルを親テーマから子テーマのフォルダ内にコピーして編集をしていきます。

子テーマが有効化されている場合、WordPressは親テーマより子テーマのファイルを優先して読み込むようになります。なので、親テーマにないテンプレートを子テーマで作成してもサイト上に表示される仕組みになります。PHPの知識があまりない方はCSSの編集のみ行うといいでしょう。

ディレクトリ以外で子テーマを作るには?

子テーマはローカルから作ることもできます。先ほど説明したフォルダと2つのファイルを用意したら、フォルダをzip形式に圧縮します。そしてWordPressの管理画面の「外観」→「テーマ」から「新しいテーマを追加」を選択します。そして「テーマのアップロード」からファイルをアップロードすれば完了です。

WordPressのテーマをカスタマイズする際は、子テーマを作成しよう

WordPressは初心者でも使用しやすい環境が整っており、テーマをそのまま使うだけでも立派なサイトが構築されます。しかし、デフォルトのままだと無機質でどこか寂しい感じがしますよね。他サイトとの差別化を図るためにも個性は出したいものです。子テーマを導入すればデザインの幅が広がり、より自由にサイトをカスタマイズすることができます。自身のサイトに手を加えるということはサイトを良くするだけでなく、新たな可能性を見つける1歩になるでしょう。
子テーマを活用して、より素敵なサイトを作り上げてみてはいかがでしょうか。

SHARE
FacebookTwitterLineHatenaShare

この記事を書いた人

RYUICHI ARAI
神奈川県出身。いきなりフリーランスとしてキャリアをスタートさせ、スポーツ関連の記事を執筆。過去にはHIPHOPライターとしても活動。ライター 以外にもコンテンツ制作や編集などの仕事も行う。趣味はフィールドワーク。

UPDATE 更新情報

  • ALL
  • ARTICLE
  • MOVIE
  • FEATURE
  • DOCUMENT