ワードプレスをやろう!と決めてから何日も過ぎている・・・

ようやく初めてログインできても全く進まない・・・

なんとかブログの投稿を始めたが全然稼げない・・・

これ以上時間を無駄にしたくない・・・

そんなあなたには下記の書籍がおすすめです!

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

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

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

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

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

詳細はこちら

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

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

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

ワードプレスをカスタマイズするなら子テーマは必須!その機能・役割と作る方法

ワードプレスで自分のWebサイトをつくったら、最初はデフォルトのテーマのままでもよいですが、慣れてきたらカスタマイズをしていきたいですね。

自分のオリジナリティを少しでも追加して、独自の世界観を出していく・・・そうすることで、同じようなジャンルでも、多くの他のWebサイトとの差別化をしていくことができます。

しかし、カスタマイズを進めるにあたって、注意したいことが1点あります。それは、必ず子テーマを使用する、ということです。

本記事では、次のことを学ぶことができます。

  • 子テーマとは何か?どんな役割をするのか?
  • 子テーマを使う理由
  • 子テーマの作り方
  • 子テーマと親テーマとの関係性(ファイルの上書きをする場合、しない場合)

ぜひ最後まで読んで、子テーマについて理解を深め活用するようにしましょう。

ワードプレスの子テーマとは?

ワードプレスでは、サイトのベースとなるデザインや一部の機能は、テーマを選択することによって決まります。

子テーマというのは、元々のテーマ(子テーマに対して親テーマと言います)の機能をそのまま引き継いだまま、使用できるテーマのことです。

と聞いても、なんのことかピンとこないですよね。

でも、子テーマ使う理由を具体的に聞けば理解できますので、気にせずこのまま読み進めてください。

子テーマを使う理由

テーマには、あらかじめデザインを設定・変更できるテーマカスタマイザーという機能が準備されています。例えば、サイト全体の配色を変更する、とか、使用するフォントを変更する、などです。

しかしながら、テーマカスタマイザーの範囲外でさらに細かくカスタイズを進めるためには、テーマのCSSやテンプレートファイルを書き換えたり、functions.phpという機能記述用のファイルに追記する必要が出てきます。

CSS?テンプレートファイル?functions.php? 何それ?という方は、後で少し説明があるので、深く知らなくても大丈夫です。ようは、テーマカスタマイザーでできないカスタマイズをするときに使うもの、と理解しておきましょう。

(でも、いずれ、少しづつでもこれらのCSS、テンプレートファイル、functions.phpを触ることになる日がくるかもしれません。少しでもわかり始めたら、ワードプレスがますます楽しくなります)

アップデートでテーマのファイルは書き換えられる

一方で、テーマには時々アップデートが入ります。バグの修正や機能追加、ワードプレスの最新バージョンに対応するためです。

このテーマのアップデートのときに、テーマを構成するメインのファイルは新しく上書きされてしまいます

したがって、あなたがせっかく施した独自のカスタマイズも、書き換えられて消えてしまうわけですね。

テーマの更新でカスタイズ消失

上のように元のテーマ(青色状態)をカスタマイズして黄色状態に書き換えても、テーマのアップデートによってカスタマイズは消失し、青の状態に戻ってしまうわけです。

このようなテーマのアップデートによるカスタマイズの消失を避けるために子テーマを使います

子テーマを使用した場合のテーマのアップデート

子テーマとは、すでに説明したように、”元々のテーマの機能を引き継いで使えるテーマ”です。

すなわち元々のテーマが親テーマとなり、その機能を使えるわけですので、ユーザーの立場からは、元々のテーマを使用するのとなんら変わりはありません

そのうえで、独自のカスタマイズを子テーマに加えていきます。

すると、先ほどと違って、テーマのアップデートが入っても、子テーマ自身に影響はありません。アップデートされるのは親テーマのほうだからです。

子テーマを使用の場合のテーマの更新

このように、親テーマがアップデートされても、子テーマはその新しい親テーマの機能を引き継いだうえで、カスタマイズを加えることになります。

したがって、子テーマに施した独自のカスタイズ内容は、テーマのアップデートによって消失することはないのです。

これが、子テーマの役割であり、メリットです。

したがって、カスタマイズを進めていくなら必ず子テーマを使用すると覚えておきましょう。

子テーマの使い方

子テーマを使う場合は、次の点に注意しましょう。

  • 親テーマと子テーマの両方をインストールする
  • 子テーマの方を有効化する

この2点だけです。必ず両方をインストールしたうえで、子テーマのほうを有効化する、ということですね。

親テーマをインストールせずに子テーマだけをインストール・有効化しても機能しない、ということです。

例えば、テーマLuxeritasを使用している場合、ダッシュボードの外観>テーマの画面で、次のように表示されていればOKです。

Luxeritasのテーマ画面

左側にある子テーマ”Luxeritas Child Theme”が有効化されていて、右側には親テーマ”Luxeritas”がインストールされている状態ですね。

テーマの作り方

有料テーマや無料でもLuxeritasやLightningのように、子テーマがテーマ制作者によって提供されている場合はそれを使えばよいのですが、提供されていない場合、自分で作る必要があります。

Twenty TwentyやTwenty Seventeenなどの公式デフォルトテーマでは、子テーマの提供はありませんよね。

作成手順

子テーマの構成に最低限必要なのは、次の3つです。原理はわからなくても、この手順どおり実施すれば、作成できます。

  1. 子テーマ用のディレクトリ(フォルダ)を作成する(名前は任意でよい)
  2. 1のディレクトリ内にstyle.cssを作成する(ファイル内ヘッダーに所定の記述をする)
  3. 1のディレクトリ内にfunctions.phpを作成する(親テーマのstyle.cssを読み込む記述をする)

この3ステップだけです。ワードプレスのcodexにも記載されていますので、参考にしてください。

それでは、例として、デフォルト公式テーマTwenty Sventeenの子テーマを作成してみます。

テーマTwenty Seventeen

子テーマ用ディレクトリを作成する

フォルダを1つ作成します。パソコンのデスクトップ上で構いません。

名前は任意ですが、後ろに”-child”をつけることが推奨されています。そこで今回は、”twentyseventeen-child”という名前にしておきます

このフォルダの中に子テーマに最低限必要なstyle.cssfunctions.phpを作成した後、サーバー内の親テーマのあるディレクトリと同じ階層にアップロードすることになります。

style.cssというのは、サイトのデザインを司るCSSという言語を書き込んであるファイルです。functions.phpというのは、テーマが持つ機能を定義できるファイルです。テーマ独自のプラグインの役割をする、と理解すればよいでしょう。

アップロードには、FileZillaなどのFTPソフトを使用しますので準備しておきましょう。

親テーマのディレクトリを確認しておく

念のため、今回の親テーマであるTwenty Seventeenのディレクトリを確認しておきましょう。

FileZillaでサーバーに接続して、ワードプレスがインストールしてあるディレクトリに入ります。

そのディレクトリの中の、wp-content/themes の中にテーマのフォルダが入っています。

テーマTwenty Seventeenのディレクトリ

wp-content>themes の中を確認すると、twentyseventeenというディレクトリ名でテーマtwenty Seventeenがインストールされていることがわかります。ほかにもtwentytwentyなど、インストールしてあるテーマのディレクトリも見えます。

このディレクトリ名を後ほど、style.cssの中で記述することになります。

style.cssを作成する

エディターを使ってstyle.cssを作成します。私のおすすめエディターは、Visual Studio Codeですが、どんなエディターでも操作はさほど変わりません。概ね次のような手順です。

①エディターで、ファイルの新規作成をします。

VS Codeでファイル>新規作成

②作成したファイルをとりあえずstyle.cssという名前で、フォルダtwentyseventeen-childに保存します。

style.cssとして保存

③先頭にヘッダーとして、次の内容を記述して保存します。

/*
 Theme Name:   Twenty Seventeen Child
 Description:  Twenty Seventeenの子テーマです
 Template:     twentyseventeen
 Version:      1.0.0
*/

この記述をstyle.cssに記述することによって、twentyseventeen_childというフォルダが、twenyseventeenというディレクトリにあるテーマの子テーマであることを示すこととなります

ちなみに先ほど紹介したワードプレスのcodexでは、次のようにヘッダー記述をしています(テーマTwenty Fifteenの子テーマ事例)。

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

すべての項目を取り揃えると、これだけの項目となりますが、最低限としては、Theme NameTemplateがあれば機能します。

私は、この2項目に加えて、自分で管理しやすいようにDescription(何の子テーマかの説明)とVersionを記述するようにしています。

この中で間違いやすいポイントとしては、Template: twentyseventeen と記述しているところです。これを間違って、Template:Twenty Seventeenと親テーマの名前を記述してはいけません

あくまで、親テーマが入っているディレクトリ名(フォルダ名)を記述するようにしてください

今回親テーマ名は"Twenty Seventeen“と単語の頭文字が大文字で、かつ単語間にスペースが空いています。しかし、ディレクトリ名は、すべて小文字でスペースもない”twentyseventeen”です。

このように、テーマ名とディレクトリ名は、必ずしも一致しないことがありますので、必ずFileZillaなどで親テーマのディレクトリ名を確認してから、項目Templateとして記載するようにしましょう。

functions.phpを作成する

style.cssを作成した手順と同じように、エディターを使ってフォルダtwentyseventeen-child内に、functions.phpを新規作成してください。

このfunctions.phpに次の記述をして保存します。

<?php
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

これは先ほどのワードプレスcodex内にもほぼ同じ記述があります。

この記述をすることで、子テーマをロードしたときに親テーマのstyle.cssも読み込むようになります。

functions.phpは、テーマの機能を記述するファイルで、PHPというプログラミング言語で記述します。

PHPは通常、先頭に<?php と書き、最後に?>と締めるのがルールですが、ワードプレスのfunctions.phpでは、最後の?>は記述しないことに注意しましょう。

できあがった子テーマをインストールしよう

できあがった子テーマが機能するかどうか、確認してみましょう。

FileZillaなどで、子テーマのフォルダtwentyseventeen-childを、親テーマと同じディレクトリ階層のwp-content>themesにアップロードします。

子テーマのアップロード

アップロードできたら、ダッシュボードの外観>テーマ からテーマ一覧を見てみましょう。

子テーマをアップロード後のテーマ一覧画面

上のように、Twenty Seventeen Childというテーマが一覧表に追加表示されていればOKです。

もしstyle.cssの記述を間違ったりしていると、表示されなかったり、表示はされていてもエラーも表示される、といったことが起こります。

ここでTwenty seventeen Childというのは、先にstyle.cssのヘッダーに記述したTheme Nameが表示されています。

ではこの子テーマを有効化してサイト表示も確認しておきましょう。

子テーマ有効化後サイト表示

このように、親テーマを使った場合と全く同じサイト表示であればOKです。

もしfunctions.phpの記述に間違いがあった場合、親テーマのCSSを読み込むことができず、サイト表示してもコンテンツはあるものの、全く違ったレイアウト(ようはCSSによるデザインが全く適用されていない状態)になります。

※今回は、FileZillaを使ってサーバーに直接アップロードしましたが、ダッシュボードの外観>テーマの画面で”新規追加”からアップロードする方法でも可能です。

その場合は、子テーマのフォルダ(今回の例ではtwentyseventeen-child)をあらかじめzip形式に圧縮してからアップロードする必要があります。

子テーマと親テーマのファイルの関係性

以上がテーマの作り方ですが、子テーマに記述したファイルと親テーマにあるファイルとの関係性を理解しておきましょう。

今後子テーマを活用する上で必要な知識だからです。

今回子テーマの中にstyle.cssとfunctions.phpの2つファイルだけを作成しましたが、style.cssもfunctions.phpも親テーマの中にも存在します。

このように同じファイル名のものが、親テーマにも子テーマにも存在する場合、次のような関係性で機能します。

  • functions.phpについては、親テーマの記述内容に子テーマの記述内容を追加する。
  • functions.php以外については、親テーマのファイルを子テーマのファイルで上書きする。

親テーマには、style.cssfunctions.phpのほか、テンプレートファイルと呼ばれるファイルが複数存在します。

テンプレートファイルというのは、Webサイトの各ページに、どのようにコンテンツを配置するのかを決めるファイルです。

例えば、ブログの個別ページにはsingle.php、固定ページにはpage.php、ブログ一覧表にはindex.phpを使う、というようにページによってテンプレートを使い分けます

例えば、次のように親テーマに5つのファイルがあるとき、子テーマにそのうちの3つと同じ名前のファイルを作成すると機能はどうなるでしょうか?(親テーマの記述をA子テーマの記述をBとします)。

親テーマに5つのファイル子テーマに3つのファイルがある場合

functions.php以外は次のように子テーマの記述Bに上書きされて機能します。

functions_php以外は子テーマの記述Bに変わる
  • index.phpとsingle.phpは子テーマに存在しないので親テーマのまま(記述A)で機能する。
  • 子テーマに存在するstyle.cssとpage.phpは子テーマの機能(記述B)で上書きされる。
  • functions.phpは、親テーマの記述Aに子テーマの記述Bが追記されて機能する。

このように、何か機能を追加したければ、子テーマのfunctions.phpに記述すれば、親テーマの機能に追加される形で機能が追加できます

また、親テーマのテンプレートと違うテンプレートに変更したければ、子テーマに新しく作成すれば変更できる、というわけです。

ただしここで1つ問題があります。style.cssも子テーマの内容で上書きされてしまうことです。これだと、親テーマのデザインが消えてしまいます。

そこで先に実施したように、functions.phpの中に親テーマのstyle.cssを読み込むような記述をしておく、というわけですね。

ワードプレスがロードされてテーマのfunctions.phpを読み込むとき、先に子テーマのfunctions.phpを読んでから親テーマのfunctions.phpを読み込みます。したがって、子テーマのfunctions.phpで親テーマのstyle.cssを読み込む記述をしておけば、親テーマのstyle.cssが先にロードされるわけです。

子テーマのfunctions.phpで親テーマのstyle.cssを読み込む

これで、子テーマのstyle.cssに書き込んだCSSで、デザインのカスタマイズができる、というわけです。

まとめ

子テーマとは何か?その作成の方法から、どのように機能するのか?についてまで、少し細かいところまで解説してきました。

もう一度内容をまとめておきます。

  • 親テーマを使って独自のカスタイズをすると、テーマの更新によって消えてしまう。
  • ワードプレスでカスタイズを進める場合は、子テーマを使うようにしよう。
  • 子テーマの使い方としては、親テーマと子テーマの両方をワードプレスにインストールして、子テーマのほうを有効化して使えばよい。
  • 子テーマは、子テーマ用ディレクトリを作成して、style.cssとfunctions.phpを作成すれば制作できる。
  • 子テーマ用style.cssには、親テーマのディレクトリを認識するためのヘッダー記述をする。
  • 子テーマのfunctions.phpには、親テーマのstyle.cssを読み込む記述をしておく。
  • functions.phpは、親テーマの内容に子テーマの内容が追加されて機能する。
  • functions.php以外のファイルが親と子テーマの両方にある場合は、子テーマのファイルが使用される。

ワードプレスのカスタマイズを進めるにあたっては、子テーマを活用するようにしましょう。

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

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

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

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