【WordPress】子テーマの作成に苦戦した話
バンド、ミュージシャンのホームページに特化したWordPressテーマ「zousanrecords」を制作しています太田ヒロシです。
今回zousanrecords用の子テーマを作ったのですが予想以上に苦戦したのでそのレポートです。
WordPressの子テーマとは？
例えば、WordPressでホームページを作って「ここだけ文字の色を変えたい」「ここの画像の大きさを変えたい」となったとします。
そんなときに、元のテーマ（親テーマ）に対する子テーマを作成して、そちらを編集することで、親テーマを改変することなくカスタマイズすることができます。
「そんなことせずに親テーマを編集すれば良いんじゃないの？」
と思われるかもしれませんが、親テーマを改変してしまうと、テーマをアップデートしたときに改変したところが元に戻ってしまい、再度、同じところを編集する必要がでてきます。
主に「自分でホームページをカスタマイズしたい」という場合に必要となってくるのが子テーマです。
なぜ子テーマを作ることにしたのか？
zousanrecordsではオプションでページの追加や各種カスタマイズも承っています。
カスタマイズに対応する度に「以後、テーマのアップデートの通知が来ることがあると思いますが、アップデートしてしまいますとノーマルの状態に戻ってしましますので、アップデートする際はご連絡ください。」と説明をしていました。
ですが、最近は使ってくれる人が増えてきたのもあって、連絡をもらってこちらで手動でアップデートするというのも限界に近づいてきました。
子テーマを作ってそちらでカスタマイズすることで今後のアップデートを気軽にできるようにしよう、というのが目的です。
上手く反映されない
ここから専門的な話になります。
とりあえずWordPress Codexを参考に子テーマを作って自分のホームページで有効化してみたのですが、、下の画像のように完全にデザインが崩れてしまいました。
どうも親テーマのcssを読み込めていないよう。
いろいろ調べた結果、親テーマでのcssの読み込み部分の記述がマズかったみたいです。
get_stylesheet_directory_uriとget_theme_file_uri
これまでcssの読み込みはget_stylesheet_directory_uriという関数を使って
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/common/base.css" media="all">のように記述していたのですが、これだと有効化されている子テーマの方のcssを読みにいってしまうそう。
そこで、WordPress 4.7から追加されたというget_theme_file_uri関数を使って
<link rel="stylesheet" type="text/css" href="<?php echo esc_url( get_theme_file_uri('/css/common/base.css') ); ?>" media="all">のように記述。そうすると、子テーマを読みにいって、そちらになければ親テーマを読みにいく、ということなるそうです。
親テーマのcssとjsの読み込み部分をすべてget_theme_file_uriに変更して改めて子テーマを有効化。
すると正しく表示されました！
これで、任意の部分を子テーマで追加編集することにより親テーマを改変することなくホームページをカスタマイズできる、ということになります。
まとめ
はじめは子テーマのfunctions.phpの記述がおかしいんだろうと思って、いろいろ書き方を変えてみたのですが上手くいかず。
get_theme_file_uri関数にたどり着いてようやく解決しました。
「子テーマ 作り方」で検索すると、古いものから新しいものまで、情報が錯綜してて翻弄されました。。
というわけで
今後のzousanrecordsのカスタマイズは子テーマを利用して反映させますので、以後も気軽にテーマをアップデートしていただけるようになりました！
すでに有料版「zousanrecords PRO」をご購入で、カスタマイズしたことによってテーマのアップデートにご不便をおかけしていますクライアントの皆さまにつきましては、ご要望であれば子テーマを設置させていただきます。どうぞよろしくお願いします。
--------------------
バンド、ミュージシャンのホームページ制作をお手伝いしています。「zousanrecords」では無料版も用意しております。
最近は、ミュージシャンだけでなく広くクリエイターやアーティストに使っていただけるWordPressテーマ、
イベントの特設サイトに使えるWordPressテーマも作りました。
この記事が気に入ったらサポートをしてみませんか？