やっと子テーマを適用したら思ってた以上に簡単だった件

ども、たけけんです。

子テーマ化しようと思ってから早3年か、4年か、忘れちゃった。それはさておきで当時調べたときにはなんともややこしやーという手順に見えたものだけど、よく読んでみると、アレ?すぐできる?ように見えたので試してみたらほんとにすぐに終わった。

というわけで、サイトのリニューアルと合わせて待望の子テーマ化をしてみました。

大半のユーザーが億劫に思いそうなところというと、おそらくファイルの作成とかコピーとかだろうか。画像と文章と見るとまた億劫になりそうなのでやることを箇条書きにしてみるとかなり簡単です。

  • WordPressのテーマフォルダ直下に子テーマのフォルダを作る
  • フォルダの中にstyle.cssを作る
  • フォルダの中にfunctions.phpを作る

以上。

てことで中身の説明を書いていきます。

style.cssには親にしたいテーマ名と、子テーマ名を書く。
わたしの場合はTwentySixteenを記述していますが、それぞれのテーマを参照するようにしてみてください。
今後、追加したいスタイルはこのstyle.cssを編集していくことになります。

/*
 Theme Name: Twenty Sixteen Child
 Template:   twentysixteen
*/
続いては、WordPress is PHPということで大切なPHPのfunctions.phpを作ります。ちなみに enqueue というのはキューにデータを入れるという感じの意味ですが、それぞれの関数もなんとなくそれらしい名前になってるので、なんとなしにでもやってることの雰囲気はつかめるかもしれない。関数というのは後ろに()が付いているものです。ここで使われている関数は、theme_enqueue_styles()、wp_enqueue_style()、get_template_directory_uri()、get_stylesheet_directory_uri()、add_action()、array()。
余談ですが、今年の4月からは小学校でプログラミングが必修になるらしいけれど、変な教材サイトとかに引っかからないように気をつけよう。

<?php
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') );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
準備はこれで終わりです。タイプミスなどが無ければWordPressの管理画面で子テーマを設定してページを確認すると親テーマそのままでの表示がされているはずでござる。

ファイルの設置の方法はウェブ検索でわりと出てくるのがFTPソフトを使ってるケースが多い気がしたけども、クラウド系のサービスだったらSSHでつないでコマンドでやっちゃって、レンタルサーバとかだったらファイルマネージャでウェブ上でやっちゃった方が楽じゃないかなと思います。
一番簡単な方法で。

問題なければ子テーマ側のstyle.cssを編集していきましょう。
これでテーマの手動アップデートとはさようなら〜。

Related Posts


投稿者: Takeken

インターネット利用者のITリテラシーを向上したいという設定の2次元キャラです。 サーバー弄りからプログラミングまで手を付けた自称エッセイストなたけけんの物語。

コメントを残す

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