ワードプレスの見栄えを変えようと編集を考えると「子テーマ」を作ったほうがいいという声が聞こえてきます。「え？子テーマって何？」という方向けに、ワードプレスのカスタマイズのために、子テーマの重要性を初心者でも分かりやすく説明したいと思います。
ちょっとしたテーマの変更の時にも子テーマを作れば安心ですよ！難しくありませんので作ってみましょう。
ワードプレスの子テーマとは？
ワードプレスを扱って詳しく調べていくと【子テーマ】というワードにいつしか巡り合うと思います。
この単語に出会ったあなたは、ワードプレスの中級者への階段をすでに登っています^^ 初級者卒業おめでとうございます^^
さて、その「子テーマっていったい何ぞや！？」ということを、中級者のあなたに初心者でも分かりやすいようにご説明します(謎)
子テーマはその名の通り、親に対する子どものテーマになります。
親はメインのテーマになります。
例えば、アフィリエイターが使われる「賢威」や「TCD」などのテーマ、Wordpressにもともと入っている「twentyseventeen」などが親テーマになります。
以下は、twentyseventeenの子テーマを作成した時の表示です。
それに対して子どもテーマを作ることで、親テーマを生かしながら、マイナーチェンジを容易にすることができるのです。ワードプレスの子どもは親なしでは生きられませんので、子テーマを選択しても親テーマを削除することはできません。
子テーマを作っていじくることは、ワードプレスに対してもっと深く理解する助けになりますので、ぜひぜひトライしてみてくださいね。
ワードプレスの子テーマのメリットは一体なに？
何か分かりやすい例えはないかな？といろいろ想像をめぐらしていたのですが、普通に説明したほうが分かりやすいので普通に説明したいと思います。例え画像はがんばって使用しています(笑)
まず子テーマを理解するのにとても重要なこと３つのことです。
親テーマのすべての機能とスタイルを引き継ぐ
子テーマは親テーマのすべての機能とスタイルを引き継ぎますので、子テーマを作っただけなら分身のように親テーマとまったく同じなのです。
子テーマに追加したものだけが、親テーマに上書き、追加される
最低限のファイルしかない子テーマを作っただけなら親テーマとまったく同じです。
そして、子テーマに追加されたもの、上書きされたものだけが親と違う部分になります。
この場合、体は同じだけど、帽子とバッグは親に追加された形になります。
親テーマの更新は子テーマに影響しない
もしも、親テーマにアップデートがあった場合でも、このような形で子テーマで変更した部分は影響しません。
但し、下の画像のように、親テーマに大きな変更があった場合でも、子テーマで追加したものに影響がありません。しかし、例えば手がなくなるような大幅な変更があった場合(追加したものを保持できない)には、追加していたバッグに影響ができてしまいます。しかし、基本的にはこのように構造的に大幅に変更されるアップデートはされないでしょう。別テーマがリリースされると思います。
これをWoredpressの話で置き換えます。
子テーマを作って外観の色を変更するために【style.css】を編集する場合、どれだけ親テーマに変更がかかろうと、あなたの作ったstyle.cssは変更されません。気が付いたらアップデートされてて1日かけて作ったstyle.cssがなくなった！ということもありませんね。
またホーム画面の一番上に、告知案内やアフィリエイトサイトだったら広告を貼りたい、とか思う場合があると思います。その場合は、index.phpを子テーマにコピーしてHTMLやPHPコードを「追加」します。
親テーマには一切さわりませんので、なんか作ったものがぐちゃぐちゃになっちゃった！と言う場合でも、テーマを切りかえれば元通り！安心ですね^^
データを失わないためにも子テーマを作ることはいいことです。
初心者向け子テーマ作成方法は？
さて、実際にあなたのテーマに子テーマを作っていってみましょう！
まずは、親テーマに対する子テーマのフォルダを作ります。子テーマの最低構成は以下の通りです。
[wpfa5s icon=”folder-open” size=”1x” color”#ccc”]theme-child
|_[wpfa5s icon=”file” size=”1x” color”#ccc”] style.css
|_[wpfa5s icon=”file” size=”1x” color”#ccc”] functions.php
style.cssに書く内容は？
style.cssに書かなければいけない最低限のことは
/* Theme Name: Theme Child Template: theme */
具体的な例でtwentyseventeenにチャイルドテーマを作ろうと思った場合、↓のようになります。作成者Authorや、テーマの説明のDescription、バージョンなども記入することができます。
/* Theme Name: twenty Seventeen Child Template: twentyseventeen Author: Laptopreneur Description: このテーマはtwentyseventeenの子テーマです。 Version: 1.0 */
functions.phpに書く内容は？
function.phpに書く内容は、少し難しのでそのままおまじないのように書けば大丈夫です。
要は、親テーマのスタイルを継承(引継ぎ)ますよ、親のstyle.cssを読み込むコードになります。
<?php add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } ?>
この２つのファイルが入ったフォルダごとthemeファイルがあるフォルダに入れてあげます。
・[wpfa5s icon=”folder-open” size=”1x” color”#ccc”]theme-child
|_[wpfa5s icon=”file” size=”1x” color”#ccc”] style.css
|_[wpfa5s icon=”file” size=”1x” color”#ccc”] functions.php
wp-content ⇒ themes ⇒ twentyseventeen_child と言った具合になります。
プラグインで子テーマを作る方法は？
プラグインを使えば、子テーマを自動で作ってくれます。
子テーマ自動生成プラグインはたくさんありますが、【Child Theme Configurator】が更新がされていますし、たくさんの利用実績がありますので、おすすめです。
プラグイン「Child Theme Configurator」をインストールして有効化します。
すると「メニュー」⇒「Child Theme」という項目が追加されています。
全て英語ですが、心配いりません。以下に示す通りに進めましょう。
②の部分にタブが表示されて、現在インストールされている親テーマを選ぶことができます。こちらから子テーマを作りたい親テーマを選びます。
WordPressにインストールされている、Twentyシリーズを選んで子テーマを作ろうとすると、下のように！のwarning警告がでますが、一旦無視して進めましょう。
たくさんの英語で項目が表示されていますが、特に触る必要はありません。
もしも変更するとしたら、⑦の子テーマの名前(Chilld Theme Name)や、作成者の名前(Author)などです。別に変更されなくても問題ありません。
⑨のところに青いボタン「Create New Child Theme」をクリックします。
すると、実際のフォルダにも子テーマができますし、「外観」⇒「テーマ」へ進むと子テーマが作られています。
これで、子テーマが完成しました！英語のプラグインですが、たったワンクリックで子テーマが作ることができますので、非常におススメの方法です！！
子テーマのCSSを使ってカスタマイズする方法
さて、子テーマが出来上がったら編集してみましょう。
一応初心者向けに書いていますので、おそらくcssを編集して色や見栄えを変えたい場合を考えてみたいと思います。
twentyseventeenのテーマで例を挙げます。
右側のウィジェットのタイトルを変えたいと思った場合、
cssは以下のコードが親テーマに書かれています。
h2.widget-title {
font-size: 11px;
font-size: 0.6875rem;
margin-bottom: 2em;
}
子テーマのstyle.cssは何も書かれていないですが、タイトルに背景色と文字色を変更したい場合、変更するものだけを記載します。
h2.widget-title {
color:#ffffff;
background-color:#0000FF;
}
すべてコピーして親テーマのcssを全部貼りつけて、↑の2行を追加することもできます。ただし、継承していますのでわざわざ書く必要もありません。
↑のコードを子テーマのstyle.cssに追加した時の表示は下のようになります。
このように変更したい追加したい部分だけど、style.cssに書いていけばいいわけです。
最初はややこしいと思うかもしれませんが、やってしまえば簡単です！覚えてしまえば、親テーマをあーしたい！こーしたいに出来ない！ムキャー！ということがなくなりますよ^^
子テーマのスタイルだけでなく、構造(表示)も変更したい場合は？？
こちらはHTMLが分かる方向けの内容です。
装飾以外も変更したいという欲がでてきたら、style.cssではなくindex.phpなどのファイルの変更が必要になってきます。
FTPを利用できれば、親テーマから修正したいファイルをコピーして、子テーマのフォルダに貼りつけて、そのファイルをいじります。
プラグイン「Child Theme Configurator」だと、この作業も簡単にできます。
Filesというタブがありますので選びます。するとParent Templatesの項目に、チェックボックスと一緒に親テーマにあるテンプレートファイルが表示されています。
この中から、子テーマで編集したいファイルをチェックして「Copy Slected to Child Theme」をクリックします。
よく編集されるindex.php, page.php, single.phpの３つにチェックして、「Copy Slected to Child Theme」をクリックします。
すると、FTPで確認すると3つのファイルが無事に追加されていることがわかります。FTPからファイルをダウンロードして編集しても良いですし、「外観」⇒「テーマの編集」から修正することも可能です。
子テーマまとめ
テーマを編集するようになったら、子テーマを作る癖をつけてみてください。もう上級者レベルだと思いますので、たくさん編集したのに何気にテーマアップデート通知が来てアップデートしてしまうということもありえなくないです・・・。
もしもファイルを保存したとしても、子テーマを編集するほうが効率的です。
コメント・質問する