ワードプレスの子テーマの作り方

ワードプレス

ワードプレスの子テーマとは?作り方と設定方法も解説!

投稿日:

こんにちは!在宅ママブロガーのチカです^^

デザインやカスタマイズが自由にできるテーマを利用して様々なサイトに利用されている、ワードプレス。

みなさんは「子テーマ」使っていますか?
ワードプレスでカスタマイズやデザインをするなら、子テーマを利用することをおススメします。
その理由と作り方、設定方法を解説していきますね^^

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

ワードプレスのテーマは自作することも可能ですが、
一から作るには知識や経験、そして時間がかかります。
数ある豊富なテーマから選ぶ、というのが主流ですよね^^(これを親テーマといいます)

わたしもアフィンガー5を利用しています。
(ちなみにアフィンガー5は子テーマをダウンロードできます)
つまり以下の手順を踏まなくても子テーマを有効化するだけでOKです。

ワードプレスの子テーマでは、親テーマの機能やスタイルを継承した上で、
デザインの編集や機能を追加することができます。

子テーマはあったほうがいい?必要な理由

ワードプレスのテーマは新しく機能の追加やアップデートが行われる場合があります。
「テーマの更新」ですね!

子テーマを作らず、テーマの更新をしてしまうと…
既存のテーマにデザインや機能などを直接カスタマイズしていた場合、アップデートした際に全て上書きされてしまい、これまでカスタマイズしたものがなくなってしまうのです。

今までの苦労はなんだったの…となってしまうのです^^;

子テーマを設定しておけば、親テーマがアップデートされてもそんな心配はなくなります。

子テーマの作り方と設定方法

では子テーマの作り方と設定方法について解説していきます。

子テーマのフォルダーを作成

FTPソフトを使って追加していきましょう^^
参考FFFPTの設定方法と使い方
子テーマフォルダ作成
親テーマと同じ階層に新しく子テーマとしてフォルダを作成します。
名前は「親テーマ-child」などがわかりやすいです^^

style.cssファイルを作成

子テーマのフォルダー内に「style.css」を作成します。
メモ帳もしくはテラパッドなどのエディターから作成しましょう。

内容は以下を入力します。

/*
 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 Name:(子テーマの名前)Twenty Fifteen Child
  • Template:(親テーマのフォルダ名)twentyfifteen

子テーマがうまく起動しない!といった場合はまずこちらの名前にスペルミスがないかどうか確認してくださいね^^

functions.phpファイルを作成

次に子テーマ内にfunctions.phpにphpファイルを作成します。
内容は以下を入力しましょう。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
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')
);
}
?>

準備完了!子テーマのフォルダ内を確認

さて、子テーマの準備が整いました!
子テーマのフォルダ内はこのようになっています^^
子テーマのフォルダ内

子テーマを有効化する

ではダッシュボードより子テーマを有効化させていきましょう!
無事に子テーマができていれば、子テーマとして認識されています。
子テーマの作成

子テーマを有効化させます。
子テーマを有効化

はい!出来上がりです^^!

子テーマのstyle.cssがきちんと反映されているか確認

しかし、子テーマとしてカスタマイズできるかわからないので、試しに子テーマのcssファイルをいじってみましょう。
子テーマ内のstyle.cssに、以下を入れて更新します。
子テーマのcss
↓ソースコードのコピペはこちら!↓

body { background: yellow; }

そしてサイトを見てみると…
子テーマを試してみる
き、黄色い!!(背景をyellowにしているので黄色くなります)
こんな感じで背景が黄色くなっているので、子テーマはきちんと動作している!!!
ということがわかりました^^

※反映されているのにデザインが変わらない場合は、
キャッシュの問題かもしれませんのでキャッシュをクリアしてみてください。(Ctrl+F5)

確認出来たらこのコードを削除してくださいね^^

ワードプレスの子テーマを有効活用しよう

いかがでしたか?

ワードプレスの子テーマを活用することでカスタマイズの幅が広がります!

やり方はとってもシンプルなので、ぜひ取り組んでみてくださいね^^
やり方がわからなかったらチカに相談してみてください。

それではまた!

チカの公式メルマガ登録はこちらから

-ワードプレス
-

Copyright© ブログを収入へつなげよう! | チカブロ , 2019 All Rights Reserved.