twenty sixteenで子テーマを作成してみる

WordPressでテーマのCSSをいじることがあると思うんですが、
僕の場合、
外観 > テーマの編集
でCSSを直接編集していました。


ところが、このやり方はよろしくないんですよ。
2年近くWordpress触ってるのに気づかないという不覚!!!!

この前、WordPress の更新で、利用していたTwenty Sixteenの更新があったから普通にクリックしちゃったんですよ。
そしたら、見事に今まで一生懸命編集してきたCSSたちが消え去りました。

そしてデフォルトのフォントサイズや色に逆戻り。くやしい~。

と、いうことで調べましたよ。必死に。
こんなことはあってはならぬ!!Googleさんお願いします。

そしたら出てくる、出てくる!!
「子テーマ」
がキーワードみたいですね。

子テーマを作成しておくと、テーマを更新してもそのまま自分が編集した部分は保持されるようです。便利なものがあるんですね。

子テーマの作り方は意外に簡単だったので
twenty sixteenテーマの場合で記載しておきます。

準備するファイルは2つ

以下の二つのファイルを作成します。
functions.php
style.css

phpファイルやcssファイルはテキストファイルの拡張子「.txt」を「.php」「.css」に変更すれば作成できます。
ただ、拡張子が表示されていない場合は変更してもファイルそのものが変わらないので、拡張子を表示させて、そこを変えてくださいね。

拡張子の表示は
windowsの場合、コントロールパネル > デスクトップのカスタマイズ > フォルダーオプション > 表示 > 登録されている拡張子は表示しないのチェックを外す
で設定できます。

style.css

cssファイルに以下のように記載します。

/*
Template:twentysixteen
Theme Name:twentysixteen_child
*/ 

参照サイトによってはその他の記載があるかもしれませんが、
以下の二つの設定が必須のようです。

Template:親テーマのディレクトリ名
サーバで表示されている名前です。別のテーマの場合は「twentysixteen」の部分を変更してください。
Theme Name:子テーマの名前
親テーマに「_child」とつけて子テーマであることを表示しましょう。
別のテーマの場合は「twentysixteen」の部分を変更してください。

サイトによっては、@importの記載が必要とありますが、下記を参照したところいらないようです。

以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。親テーマのスタイルシートをキューに入れる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。したがって子テーマには functions.php を作成する必要があります。

参照サイトへ

functions.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' );
}

サーバーにアップロード

僕の場合はさくらサーバーです。

さくらインターネットのサーバコントロールパネルから
左端の「運用に便利なツール」のファイルマネージャーをクリックします。
sakura1

wp-content > themes
を選択し、そこで右クリックで「フォルダの作成」を行います。
このフォルダ名は「twentysixteen_child」とします。
sakura2

このフォルダ内に、先ほど作成した
functions.php
style.css
のファイルをアップロードします。
sakura3

子テーマの有効化

テーマの有効化をします。
sakura4
子テーマを有効化しても、親テーマをそのまま表示した状態と変わらないので安心してください。

テーマの編集

外観 > テーマの編集
「twentysixteen_child」のCSSを編集します。

まとめ

CSSをせっかくいじり倒すなら、子テーマの作成は必須です。
知らないっていうことは怖いなって思うできごとでした。
これで安心して、テーマの更新ボタンをクリックできますね(*^。^*)

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

IROKAN

投稿者: IROKAN

IROIROKANSATSU創業者のIROKANです。面白いネタ、役立つネタを提供できればと思います。もっとーは「シンプルであること」。常にシンプルでわかりやすい記事を更新していきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です