[無料WordPressテーマ] バズ部 Xeoryの子テーマを作成してみた [改定版]
バズ部のWordPressテーマXeory BaseとXeory Extensionは無料で利用可能ですが、公式サイトからダウンロード出来るのは親テーマだけで子テーマは自分で用意する必要があります。
当エントリーは私が過去に運営していたサイトからのリライト記事になりますが、実は先日こちらの記事でTCDのBlogPressの子テーマ作成について書かせていただいた後で
![[WordPressテーマ] TCDの有料テーマBlogPressの子テーマを作成してみた | unlimited c](https://unlimitedchaos.net/uc/wp-content/uploads/luxe-blogcard/5/5966dff4208b99059ad6274f41a6c574.jpg)
https://unlimitedchaos.net/uc/wordpress-theme-blogpress-chil...「そう言えば以前Xeoryの子テーマを作った時ってどうだったっけ？」とか思い、なにげにHTMLを確認してみたところ…
やっちゃってました、見事にやっちゃってました。ホント今更で大変申し訳無いですがマジすいませんでした。海より深く反省してます。
という事で何がすいませんでしたかは本文でお話ししたいと思います…
Xeoryの子テーマ作成について（やらかし編）
今から2年以上前に書いたエントリーなので私もまだWordPress初心者に毛の生えかけたレベルだったという事もありますが…いや今でもそれほど変わってないか、まるで成長していない…
それでも実装後にHTMLさえ確認していればわかった事なので完全に私のミスです、痛恨のいちげきです。子テーマのstyle.cssの後に親テーマのstyle.cssを読み込んじゃってました…
- 親テーマのbase.css
- 子テーマのstyle.css
- 親テーマのstyle.css
見た目はちゃんとXeoryになっていたので親テーマのCSSは読めてたという事ですし、子テーマに書いたCSSも反映されたのでてっきり巧く出来てるものだと思ってました。クラスセレクタがかぶっていれば「あれ？」ってな感じで気付いたかもしれませんが、たまたま優先順位が高かっただけのようです…ぐぬぬ。
なぜかその時はfunctions.phpで親のstyle.cssしか読み込むようにしてなかったんですね、子テーマのCSSは特に何もしなくても読み込んでくれるというのがあったからなんですが。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
何れにしても親テーマのstyle.cssの後に子テーマのstyle.cssを読み込んでいれば子テーマのCSSが効かないという事にはならなかったはずです。と言うか普通なら子テーマのfunctions.phpで読み込んだCSSが先に来るはずなんですけどね？そこも腑に落ちません。
XeoryのCSS読み込み順について
Xeoryでは以下のファイルでCSSの読み込みを行っています。このファイルは親テーマのfunctions.phpから最初に1回だけ実行されるようです。
xeory_base └ lib └ functions └ asset.php
asset.phpのこの部分ですね。
if( !is_admin() ){
add_action('wp_enqueue_scripts', 'bzb_add_style', 9);
function bzb_register_style(){
wp_register_style( 'base-css', get_template_directory_uri().'/base.css' );
wp_register_style( 'main-css', get_stylesheet_directory_uri().'/style.css',array('base-css') );
}
function bzb_add_style(){
bzb_register_style();
wp_enqueue_style('base-css');
wp_enqueue_style('main-css');
}
}
親テーマを直接利用する場合は特に問題ありませんが、これを子テーマで実行した場合は以下の順にCSSが読み込まれる事になります。
- 親テーマのbase.css
- 子テーマのstyle.css
なので、子テーマを利用する場合はやはり親テーマのCSSを読み込ませる必要がありますが、functions.phpで親テーマと子テーマのstyle.cssを読み込ませる方法だと
- 親テーマのbase.css
- 子テーマのstyle.css
- 親テーマのstyle.css
- 子テーマのstyle.css
結果はこんな感じになるんですね…本来なら子テーマのfunctions.php → 親テーマのasset.phpという順になるんじゃないかと思うんですが、ここで優先順位を"9″（デフォルトは"10″）に設定されていた為にどうやら順番が逆になるようです。
個人的にベストかなと思う方法
子テーマのstyle.cssが2回読み込まれる事さえ気にならなければ、一般的なfunctions.phpでCSSを読ませる方法で特に問題無いと思いますが、あくまでも私が個人的にベストかな？と思える方法は親テーマのasset.phpを直接編集して
- 親テーマのbase.css
- 親テーマのstyle.css
- 子テーマのstyle.css
この順にCSSを読み込むようにする事でしょうか。
if( !is_admin() ){
add_action('wp_enqueue_scripts', 'bzb_add_style', 9);
function bzb_register_style(){
wp_register_style( 'base-css', get_template_directory_uri().'/base.css' );
wp_register_style( 'main-css', get_template_directory_uri().'/style.css',array('base-css') );
wp_register_style( 'child-css', get_stylesheet_directory_uri().'/style.css',array('main-css') );
}
function bzb_add_style(){
bzb_register_style();
wp_enqueue_style('base-css');
wp_enqueue_style('main-css');
wp_enqueue_style('child-css');
}
}
こんな感じですかね？
ここでCSSを読み込むのでfunctions.phpは空で作成するか、ファイル自体無くてもOKという事になります。結局BlogPressの時もそんな感じでしたけど。
Cocoonのように頻繁に更新されるテーマならともかく年に一回更新されるかどうかというテーマなので、子テーマ側であれこれイジるよりもこの方法が一番手っ取り早いように思います。
asset.phpをイジるついでに出来る事
base.cssの内容を確認した上で慎重に行うべきだと思いますが、現状ではXeoryのCSSを読み込んだ後にFont AwesomeやGutenbergのブロックライブラリ用CSSを読む形になっているので、これが嫌な場合はとりあえずasset.php 7行目のbzb_add_styleの後ろにある数字の"9″の部分を"10″に変更する事でこの順番を入れ替えられます。
また、Font AwesomeもXeoryに同梱してある古いバージョン（4.5）を使用しているので新しいバージョンを読み込むように変更する事も可能ですが、そうするとボタンやウィジェットなどのアイコンが一部表示されなくなるので、その修正対応を考慮してもXeoryでバージョン5を使いたいという方は挑戦してみるのもありかと思います。
Xeory Base 子テーマのファイル構成
さて、かなり前置きが長くなってしまいましたが、ここからはごく一般的な方法でXeory Baseの子テーマを作成してみたいと思います。
xeory_base-child（任意の名前でも構いません）という名前でフォルダを作成し、その中に必要なファイルを入れて最終的に以下の構成になっていればOKです。
xeory_base-child ├ functions.php ├ screenshot.png └ style.css
それでは各ファイルの内容と説明を順番にしていきます。
functions.php
WordPress Codexにあったコードをほんのちょっぴり体裁を整えただけで、内容的にはほぼそのままコピペしたものです。
<?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' )
);
}
Xeoryの配布サイトにあるFAQからもこのWordPress Codexのページにリンクしてあるので、子テーマの作成方法としては間違っていないと思いますが、正直この構造だったら子テーマを用意してくれた方が親切だったのではないかとちょっとだけ思ってみたり。
screenshot.png
Xeory Baseの親テーマからscreenshot.pngをコピってきてそのまま利用するか、自分で適当に用意した画像をscreenshot.pngにリネームしてもOKです。この画像ファイルはダッシュボートのテーマ選択画面に表示されるだけなので無くても特に問題はありません。
あえて問題があるとすればサムネが同じなのでうっかり間違えて親テーマの方を有効化しちゃう事があるかも？というくらいでしょうか。
style.css
テキストファイルに以下のコードをまるっとコピペして、style.cssという名前で保存します。
@charset "UTF-8";
/*
Theme Name: XeoryBase Child
Template: xeory_base
Version: 1.0
*/
親テーマのディレクトリ名を変更している場合はTemplateの部分だけその名前に置き換えるのを忘れないようにして下さい。例によって今回もVersionは適当です。
Xeory Base 子テーマのアップロード・インストール
子テーマのアップロード・インストールには以下のような方法があります。
・FTPクライアント・ファイルマネージャーでアップロード
・ZIPファイルに圧縮してダッシュボードからインストール
こちらのエントリーでFTPを利用したアップロードについて紹介していますので、よろしければご参考までにどうぞ。
https://unlimitedchaos.net/uc/how-to-use-ffftp-upload-and-do...私としてはフォルダごと圧縮してダッシュボードからインストールする方法が一番簡単でいいように思います。
Xeory Extensionの子テーマを作成
次はXeory Extensionの子テーマになりますが、Xeory Base用に作成した子テーマの以下の部分を修正するだけで使い回す事が出来ます。
- フォルダ名をxeory_extension-childに変更（これも任意の名前でOKです）
- style.cssを以下のように変更
Theme Name: XeoryExtension Child
Template: xeory_extension - 必要に応じて画像の差し替え
Xeory Extensonに限らず他のテーマにも応用可能なので、機会があればぜひ試してみて下さい。その場合は子テーマを有効化した後にHTMLの確認をくれぐれもお忘れなく。
Xeoryの子テーマ作成方法でした
ぶっちゃけ本音を言うと今からXeoryを使おうという方がはたしてどれだけいるかは疑問ですが、自分で書いた記事の間違いに気付いてしまった以上は責任を持って正しておきたいという事で、大幅に加筆・修正・他のエントリーからコピれるところは使い回して全力でリライトしてみました。
以前こちらの記事でプラグインを利用して子テーマを作成する方法を紹介しましたが
![[WordPressプラグイン] 子テーマはChild Theme Configuratorで簡単に作成しよう！ | u](https://unlimitedchaos.net/uc/wp-content/uploads/luxe-blogcard/5/59570de23c35dd70ca6f037d66943d96.jpg)
https://unlimitedchaos.net/uc/wordpress-plugin-child-theme-c...その場合でも作成した子テーマのHTMLはしっかり確認するようにした方がよさそうですね。皆さんも子テーマを利用する際には十分ご注意下さい。