バズ部の無料WordPressテーマXeoryBaseとXeoryExtensionの子テーマを作成してみる

XeoryBase ロゴ画像

以前から噂には聞いていたものの、ダウンロードにメールアドレスの登録が必要という事で何となく敬遠してしまっていた無料WordPressテーマのXeoryBaseとXeoryExtensionですが、色々なサイトを巡回している内にXeoryを使ったサイトを時々見かけるようになり、やはり一度チェックしてみたいと思うようになりました。

そう言えば友人にウェブサイト絡みの作業を頼まれた時に貰ったアドレスもある事だし、それを使えばいいやと遅ればせながらゲットしてみました。

アドレスが無いならYahoo!で貰えばいいじゃないという話もありますが。

スポンサーリンク

Xeoryのダウンロードはこちらから

残念ながら子テーマが用意されていません

いつも子テーマが用意されているテーマばかり使っていたので少し戸惑ってしまいましたが、考えてみたら公式テーマなんかは子テーマが無くて当たり前ですからね。ここらでひとつ子テーマくらい自分で作れるように勉強しておくのも悪くは無いかもしれません。

適当に作ってアップしてみました

という事で、ちゃちゃっと作ってインストールしてみました。

自作のXeoryBase子テーマをインストールしたら見事にエラーになった図

ごらんの有様ですよ!

これ以上無いってくらいの単順なポカミスだったので、どこをどう間違えたかはすぐにわかりましたが、やはり一度基本的な事にも目を通してからにした方がいいだろうと思い直したので、あらためてコチラで勉強してみる事にしました。

ブログカードが何だかおかしいような…見なかった事にしよう。

ちなみに私が先ほどやらかしたミスは、Template行の「_(アンダースコア)」と「-(ハイフン)」を間違えたというしょっぱいものです…これは親テーマのフォルダ名になる部分なのでそりゃ親テーマが無いって言われますわね。

それよりも先ほどのページを読んでいて気になったのはこの部分です。

以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。

な、なんだってー!

STINGER8の子テーマをコピーして作ったのでまんまそれでした…ならばその辺りも含めて修正した方が良さそうな感じです。

子テーマに必要なファイルを作成します

それではfunctions.phpとstyle.cssを作成しますが、WordPressで使用するファイルはいつものお約束で文字コードをUTF-8のBOM無しで編集するのを忘れないで下さいね?

functions.phpの書き方

親テーマの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' );
}

PHPの開始タグ以降は全てコピペです。

ちなみにPHPの終了タグは閉じ忘れではなく、閉じない方が良いという事であえて外してあります。やはりどんな事でも一度は自分で調べてみるものですね。

ただ、どんな場合にもこの方法で良いかというとそうでもないようで

親テーマが 1つの style.css ファイルを使用してすべての CSS を保持している場合にのみ動作します。

XeoryBaseでは親テーマの中にstyle.css以外のスタイルシートも含んでいますが、親テーマ側でそれらを読み込んでくれるようなので、ここでは基本部分となるstyle.cssだけの指定で良さそうな感じです。

実際にXeoryBaseの親テーマ内をgrepで検索するとそれっぽい記述もありますし、バズ部さんのXeory配布ページにあるFAQからも先ほどのWordPress Codexへリンクしてあるので、そこに掲載してある方法で簡単にCSSを読み込めないような構造のテーマだったら、恐らくバズ部さんの方で子テーマを用意してくれたのではないかとも思います。

style.cssの書き方

全てを埋める必要はありませんが、style.cssにはこのような項目があります。

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

内容を見る限り公式テーマTwenty Fifteenの子テーマでしょうね。自分で使う分にはここまできっちり記述しなくても必要最低限の項目だけで良さそうです。

@charset "UTF-8";
/*
Theme Name:	XeoryBase Child
Template:	xeory_base
*/

こんなに端折ってええのんかしらと思われそうですが、とりあえずこんな感じでも実用上は問題ありません。これはXeoryBase 子テーマ用の内容になります。Theme Nameはあくまでも表示用なので自分でわかるような名前なら好きにしていただいて結構ですが、Templateの方は親テーマのフォルダ名になりますので注意して下さい。私が最初に間違えたのはここです。

先頭行のUTF-8の記述に関しては親テーマのスタイルシートで指定されてますし、ここでは不要かな?とも思いますが、よくわからないので念の為につけてあります。要らないと思えば容赦なく消しちゃって下さい。

インストールに必要なファイルを確認

functions.phpとstyle.cssはこれで完成しましたので、あとは必要なファイル一式を揃えてインストール可能な状態にします。

  • xeory_base-childという名前でフォルダを作成
    特に決まりはありませんが、親テーマのフォルダ名に「-child」をつけるのが一般的なようです
  • 作成したfunctions.phpとstyle.cssをフォルダに入れる
  • テーマの一覧画面に表示される画像をscreenshot.png(jpgでも可)という名前で作成してフォルダに入れる(別に無くても構いません)

以上を確認したら、そのままFTPかファイルマネージャーでアップロードするか、zip形式に圧縮してダッシュボードからインストールします。

それではあらためてインストール

では早速インストールしてみたいと思います。

自作のXeoryBase子テーマをインストールしたら見事にエラーになった図

なん…だと…

どうやら先ほどインストールに失敗した時のフォルダがそのまま残ってしまっているのでエラーになったようです。上書き出来るようにしてくれればいいのにぃ…

フォルダを削除してやれば良い話ではありますが、ダッシュボードからインストールしようとしていた場合はその為にFTPクライアントを起動するか、サーバーの管理画面にログインしてファイルマネージャーを開かなければならないので、それも面倒だなぁ…と思っていたら

テーマ一覧画面からエラーのあるテーマフォルダが削除可能な件

テーマの一覧画面を一番下までスクロールさせると、エラーになっているテーマのフォルダが削除出来るようになってるじゃありませんか!

という事でボチっと削除してからテーマの再々インストールです。

三回目でようやく自作の子テーマインストールに成功

ようやく自作の子テーマをインストール完了…子テーマのインストールでここまで苦労したのは初めてだと思います。

テーマ一覧画面で子テーマを確認

私の場合は子テーマのフォルダに親テーマの画像をそのままコピって入れておいたので、一覧画面ではこのように表示されます。見た目が親テーマと全く同じなので有効化する時に間違えないよう気をつける必要はあるかもしれません。

XeoryBaseの自作子テーマを適用してみた

まだウィジェットもほとんどイジっていないテスト用のサイトなので非常に殺風景な感じですが、子テーマはちゃんと機能しているようでひと安心です。

XeoryExtensionの子テーマ

さて、次はXeoryExtensionの子テーマになりますが、XeoryBase用に作成した子テーマをフォルダごとコピーして以下の部分を修正するだけで使い回す事が出来ます。

  • フォルダ名をxeory_extension-childに
  • style.cssを開いてそれぞれの名前を変更
    Theme Name: XeoryExtension Child
    Template: xeory_extension
  • 必要に応じて画像の差し替え

XeoryExtensonに限った話では無く他のテーマにも応用可能ですので、機会がありましたらぜひ試してみて下さい。

以上、子テーマの作成方法でした

実を言うと子テーマ作成用のプラグインもある事はあるんですが、少しでもWordPressに対する知識を深めたいという事もあって今回は子テーマを自作してみた次第です。

そんなわけで新しくインストールしたバズ部さんのWordPressテーマ XeoryBaseとXeoryExtension、なかなか面白そうなテーマですのでヒマを見て色々イジってみたいと思っています。

スポンサーリンク
トップへ戻る