PR

【WordPress】子テーマの作り方【初心者向け解説】

WordPress 子テーマの作り方 WordPress

WordPressの子テーマとは

あらゆるサイトでWordPressの子テーマとは何かを解説していますが一言で答えます。

子テーマとは親テーマのすべての恩恵を受けつつ自分好みにカスタマイズするためのWordPress標準の機能のことです。

子テーマの概要は公式サイトを確認しましょう。

公式サイトの内容を簡単にまとめます。

どこにも存在しない自分だけの子テーマ

特になにも書かれていない場合、テーマは親テーマのことを指します。WordPressに登録されているテーマはボタンをクリックすると簡単にインストールされて使用することができますが、子テーマはWordPressに登録されていないことがほとんどです。(ほとんどと書いているのはWordPressに登録済のテーマの中に子テーマを見かけたことがあるからです。)

子テーマは親テーマがあってこそ成り立つので、子テーマだけをインストールしても意味がありません。親テーマなしで子テーマを有効化することはできません。なぜならテーマを作成するのに必要なファイルや記述がないからです。

テーマにもよりますが、子テーマを利用することで親テーマで決められている色や見た目や機能を失うことなく上書きすることができます。

WordPressって便利すぎ♪

子テーマの配布

テーマを作成している作者さまが公式で専用の子テーマのテンプレートを配布していることがあります。子テーマのみのテンプレートを配布しているのも見かけます。テンプレート配布していなくてもすべてのテーマに対する子テーマを1から自分で作れます。子テーマの作り方は子の記事でも公開します。

フルサイト編集

話はそれますが、最近のWordPressはフルサイト編集を活用していく流れができていますのでテーマ自体が必要ないのじゃないかと言う意見も見かけます。フルサイト編集とはブロックエディタのようにブロックでホームページの見た目全体を編集していこうみたいな機能でテーマという概念がぶっ壊れています。筆者もフルサイト編集を試しに使ってみましたが実用化するにはまだかかりそうでした。単に使いこなせていないだけかもしれませんが・・・。

子テーマの作り方

フォルダの作成

まず、アップロードするためのフォルダを作成します。フォルダ名は小文字半角のアルファベットであれば何でも大丈夫です。ただし、他と重複しない名前にしましょう。判別しやすい名前がおすすめです。

使用している文字は小文字アルファベットとハイフンしか見かけたことないので小文字アルファベットとハイフンを使用しましょう。

定番は親テーマ名のあとにchildをつけます

  • lightning-child
  • cocoon-child
  • my-child-theme

テキストファイルの作成

作成したフォルダの中にテキストファイルを作成します。

ファイル名はstyle.cssfunctions.phpの2種類です。

style.cssを編集

まずは、style.cssをテキストエディタで開きます。style.cssの先頭に以下を入力しましょう。

/**
 * Theme Name: 子テーマの名前
 * Template:   ★親テーマのフォルダの名前★変更必須
 */

サイトによって記述量に差があると思いますが、基本的にはTheme NameとTemplateがあればOKです。

Theme Nameは日本語でも問題ありません。分かりやすい名前にしましょう。

Templateは親テーマのフォルダ名と同じにしましょう。大文字小文字も区別しますので正確に同じものにしておきましょう。テーマ名とテーマのフォルダ名が必ず一致しているとは限りませんのでthemeフォルダ内を確認しましょう。

themeフォルダ内

こちらの画像はCocoonの場合の例です。Cocoonはテーマ名がCocoonですがフォルダ名はcocoon-masterです。Cocoonは子テーマの配布を行っていますので配布した子テーマを利用するのが早いですが、1から自作する場合は注意しましょう。

記述したstyle.cssは名前を付けて保存→文字コードをUTF-8にしてBOMは付けずに保存しましょう。

functions.phpの編集

functions.phpは何も入力していなくても問題ありませんが、子テーマを利用するためには必要なファイルです。何か必要な処理があれば入力しておきましょう。phpですのでファイルの先頭に、

<?php

の入力を忘れないようにしましょう。

functions.phpに記述するべき内容

基本的には、なにか特別な処理をしたい場合以外は不要です。しかし、テーマによっては子テーマを使用しない前提で作られたものもあります。その場合は親テーマのスタイルシートを読み込む記述が必要です。

子テーマを使用しない前提のテーマかどうかを判断するには親テーマのプログラムを見るしか方法がありません。プログラムを見るのは大変ですのでまずは、子テーマを有効化してホームページの体裁が崩れたかどうかで親テーマのスタイルシートを読み込むかどうかの判断をしましょう。

親テーマのスタイルシートを読み込むには以下のような記述をfunctions.phpに記述しましょう。

/* 親テーマのstyle.cssを読み込む */
function parent_theme_enqueue_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_styles' );

それ以外は必要になったときに追加していくのがいいと思います。

子テーマのアップロード

ファイルが作成出来たら子テーマをアップロードしましょう。知識がある方はFTPでthemeフォルダ内にフォルダごとアップロードします。

難しい方はフォルダを圧縮してWordPressからアップロードするのがおすすめです。手順は以下に示します。

  1. 作成した子テーマ用のフォルダごと圧縮(.zip)する
  2. WordPressのサイドメニューにある外観からテーマを選択
  3. 新しいテーマを追加をクリック
  4. テーマのアップロードをクリック
  5. ファイルを選択で圧縮した子テーマフォルダ(.zipのファイル)を選択
  6. 今すぐインストールをクリック
  7. テーマのインストールが完了しました。と表示されたらOK
アップロードしたファイルからテーマをインストールしています
この画面が表示されるとOK

子テーマの有効化

これまでの手順で子テーマのインストールのみが完了しています。テーマのインストールだけで有効化はされていませんので、有効化しましょう。手順は以下です。

  1. 外観からテーマを選択
  2. アップロードしたテーマにある有効化をクリック

まとめ

筆者は親テーマを作れるほどの実力がないため子テーマを乱用しています。当サイトでも子テーマで運用しています。子テーマは便利です。この仕組みを考えたWordPress本当にすごい。

フックがたくさんあるテーマ大好きです。テーマを作れる実力がないくせにとにかくカスタマイズしたいので。

タイトルとURLをコピーしました