ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

WordPressプラグインで子テーマを3分で作成する方法(親テーマデザインの継承可能)

ワードプレスのカスタマイズには子テーマを使うことが望ましいですが、使用しているテーマによっては子テーマが提供されていません。

そんな場合、子テーマを自作する必要があるわけですが、今回はプラグインを使用して3分で制作してみましょう。

本記事でわかること

プラグインChild Theme Configuratorを使用して

  • 簡単に子テーマを作成できる(実質3分かかりません)
  • 子テーマを作成可能な親テーマかを判定する
  • 親テーマのデザイン設定(メニュー・ウィジェット・テーマカスタマイザー)を引き継げる

と、プラグインなしでは簡単にできないことを、いとも簡単にできる方法を紹介します。

ちなみに、

  • 子テーマがなぜ必要か?
  • プラグインを使用しない子テーマの作り方
  • 子テーマの使い方(親テーマ機能との連携を理解する)

についてはこちらの記事を参考にしてください。

目次

使用プラグインChild Theme Configurator

プラグインChild Theme Configurator

プラグインChild Theme Configuratorは、有効インストール数も30万を超える実績のプラグインですので、安心して使用できると思います。
(2カ月前に更新されたばかりですが、本記事作成時はワードプレスversion5.7がリリース後間がないので使用中WordPressバージョンで未検証とはなっています。)

使用テーマはTwenty Twenty-One

今回はテーマTwenty Twenty-Oneを使っていきます。

ダッシュボードメニュー 外観>テーマ の画面

外観>テーマの画面

ちなみにサイト表示(トップページ)は次の通りです。
サイトタイトルとキャッチフレーズ以外はデフォルト状態です。

デフォルトのサイト表示

子テーマの作成手順

それでは、子テーマを実際に作成してみましょう。手順は以下の2ステップだけです。

  • プラグインChild Theme Configuratorをインストール・有効化する
  • プラグインの設定をする(設定画面で4クリックで終了)

では、Child Theme Configuratorインストール・有効化後のプラグインの設定から解説していきます。

1.ダッシュボードメニュー ツール>Child Themes に入る

ツール>Child Themesに入る

2.設定をして子テーマを作成

①CREATE a new Child Themeを選択(デフォルトで選択されている)
②テーマを選ぶ
③”Analyze”ボタンをクリック
④”Create New Child Theme”ボタンをクリック

まずは手順①~③の画像です。
②のテーマの選択(ドロップダウンメニューから選択)して、③”Analayze”をクリックします。

子テーマ作成設定手順①から③

しばらくすると、”This Theme appears OK to use as a Child Theme.”と子テーマが作成可能であることが表示されます。

子テーマ作成可能メッセージ

テーマによっては、子テーマを作成すると不具合の出るものもあるので、ここで確認が必要です。

画面を下へスクロールして一番下のCreate New Child Theme”をクリックすると子テーマが作成されます。

途中に設定する箇所がありますが、基本的にはデフォルトのままでOKです。
一応簡単な解説を画像で紹介します。

親テーマのCSSを使用しない設定など
親テーマのデザイン設定を引きつぐ場合の設定

もし、親テーマですでにウィジェットやメニュー設定などをしていて、それを子テーマにも引き継ぎたい場合は、上の画像の場所にチェックを入れます(まずはチェックなしで作成)。

後ほど、ここにチェックを入れて親テーマの設定を実際に引き継げるかも別途確認します。

子テーマの確認

それでは、無事に子テーマが作成されているかを確認していきます。

インストールの確認と有効化

ダッシュボードメニュー 外観>テーマ で、子テーマがインストールされていることを確認します。

子テーマのインストールを確認

まだ親テーマが有効化されている状態なので、子テーマのほうを有効化します。

子テーマを有効化

style.cssが機能することを確認

有効化した子テーマが意図した動きをするかを確認します。

まずは、style.cssにcssを記述して反映されるか確認します。

1.ダッシュボードメニュー 外観>テーマエディター を開ける

外観>テーマエディターを開ける

2.styel.cssファイル内にcssを記述する

文字色を白背景色を青紫とするcssを記述します。

body {
    color: white;
    background-color: blueviolet;
}

style.css最初のコメント文が終了後の行に記述します。

cssの記述

記述後、”ファイルの更新をします。

3.サイト表示して確認

css適用後のサイト表示

子テーマのstyle.cssが機能していることがわかりました。

functions.phpが機能することを確認

ではもう一度ダッシュボードメニューの 外観>テーマエディター を開いて、functions.phpに次の記述をします。

function shortcode_test(){
    return "テストしてみる";
}
add_shortcode('test', 'shortcode_test');

簡単なショートコートを作成するコードです。
[test]というショートコードを記述すると”テストしてみる”と表示されるようになります。

functions.phpの最初のほうの記述が終了した後(//END ENQUE PARENT ACTIONの後)に記述します。

functions.phpへの記述

記述後”ファイルを更新をします。

投稿エディター(ブロックエディター)の中でショートコードを入力してプレビューしてみると、無事ショートコードが機能していることが確認できました。

ショートコードを入力して確認

これでfunctions.phpも機能していることが確認できました。

親テーマのテンプレートファイルをコピーする方法

子テーマの中には、現在、style.cssfunctions.phpおよびテーマ一覧で表示するのに使う画像ファイル(screenshot.png)の3つしかありません。

したがって仮にテンプレートファイルを編集して使いたい場合は、親テーマから子テーマへコピーする必要があります

テンプレートファイルのコピーは、FifleZillaなどのFTPソフトを使用して直接サーバー内でコピーすることができますが、プラグインChild Theme Configuratorで簡単にコピーできますので紹介しましょう。

再びダッシュボードメニュー ツール>Child Themes からChild Theme Configuratorの設定画面に入って次の作業をします。

①Filesタブへ切り換える
②コピーしたいテンプレートファイルにチェックを入れる
③”Copy Selected to Child Theme”をクリックする

親テーマのテンプレートファイルを子テーマにコピーする方法

例えば、header.phpおよび関連テンプレートパーツをコピーしてみました。

header関連ファイルをコピー

コピーしたのは
header.php
template-parts/header/entry-header.php
template-parts/header/site-header.php

の3つです。

ダッシュボードメニューの 外観>テーマエディター で確認すると先ほどまでなかったこの3つのファイルがコピーされているのが確認できます。

テーマエディターでheader関連テンプレートを確認

このように必要なテンプレートを子テーマにコピーして編集することが可能になるのです。

親テーマのデザイン設定を子テーマに継承する

最後に、親テーマのデザイン設定の継承確認をしておきましょう。

ここでいう各種デザイン設定とは、本来ワードプレスやテーマが持っている機能を使った以下のようなものです。

  • テーマカスタマイザーによるデザインカスタマイズ
  • メニューを使ったナビゲーション設定
  • ウィジェットによる記事エディター外エリア(サイドバーやフッターなど)への部品の配置

こういったデザインを親テーマで設定した後で子テーマを作成した場合、通常は引き継ぎできません。子テーマで最初から設定しなおす必要があります。

したがって通常はサイトづくりをスタートする前に子テーマを作成・有効化してから、各種デザイン設定をしていくのがセオリーなわけです。

しかし、プラグインChild Theme Configuratorならば、あとからでも親テーマのデザイン設定の引き継ぎが可能です。そのことを確認してみましょう。

親テーマを使ってデザイン設定をしておく

あらかじめ、テーマTwenty Twenty-One(親テーマ)を有効化した状態で、次のデザイン設定をしておきました。

①テーマカスタマイザーで背景色をピンク色に設定
②ナビゲーションメニューを作成
③投稿で1記事作成
④フッターにウィジェットでプロフィールを作成

親テーマでデザイン設定(ページ上部)
親テーマでデザイン設定(フッターエリア)

子テーマを作成

プラグインChild Theme Configuratorで子テーマを作成します。

作成手順はすでに紹介した通りですが、以下のようにCopy・・・・from the Parent Theme to the Child Theme”にチェックを入れてCreate New Child Theme”をクリックします。

チェックを入れて子テーマ作成

作成した子テーマを有効化してサイト表示させると以下の通りです。

子テーマ有効化後のサイト表示(ページ上部)
子テーマ有効化後のサイト表示(フッターエリア)
  • テーマカスタマイザーで設定した背景色
  • 投稿した記事
  • ナビゲーションメニュー
  • フッタエリアのウィジェット

の全てが子テーマに継承されていることが確認できました。

子テーマ作成後はプラグインを無効化・削除してもOK

なお、子テーマ作成後にプラグインChild Theme Configuratorを無効化・削除しても、作成した子テーマはそのまま残ります。

したがって、プラグインの数を増やしたくない人は、子テーマ作成後に削除してしまえばよいでしょう。

ただし、親テーマからのテンプレートファイルのコピーはできなくなるので、FTPソフトを使用するようにしましょう。

まとめ

プラグインChild Theme Configuratorで、

  • 簡単に子テーマを作成できる
  • 作成前に子テーマを作成可能なテーマかどうかを分析してくれる
  • 親テーマのテンプレートファイルを子テーマに簡単にコピーできる
  • 親テーマのデザイン設定(メニュー・ウィジェット・テーマカスタマイザー)を引き継げる

といったことができることを確認・解説してきました。

また、プラグインが増えるのが嫌な場合は、子テーマ作成後に無効化・削除しても子テーマはそのまま使用可能です。

このように便利なプラグインですので、子テーマをつくろうかどうしようか迷っておられる方は、ぜひ使ってみてはいかがでしょうか?

再度以下の記事と合わせて確認するとよいでしょう。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる