Xeory_Base をカスタマイズしたいので小テーマを作ってみた

最近のお気に入りのワードプレスのテーマ、それは「Xeory」です。

これはバズ部さんが無料で提供しているテーマで、

シンプル
SEO対策バッチリ
LP(ランディングページ)が標準で用意されている
CTA(コール・トゥー・アクション)が標準で用意されている

などなど、最初からいろいろと用意されています。

このサイトも「Xeory_Base」を使っています。

このシンプルな状態でも気に入ってるのですが、やはり自分なりのカスタマイズしたくなりますよね。

そこで登場するのが「子テーマ」になります。

[q3-adsense01]

子テーマって何？
子テーマを作成しよう
子テーマをアップロードしよう
重要：キャッシュ系プラグインを使っている方へ
最後に

子テーマって何？

WordPress はテーマを使って外観をカスタマイズします。

本当に色々なテーマがあり、そのままで十分使えるものばかりです。

そのテーマ毎にカスタマイズ機能があり、外観やメニュー配置などは簡単にカスタマイズができます。

しかし使っているとほんの少しだけ自分好みに修正したいときが出てくるものです。

そんなときは、コードを直接修正すればいいのですが、そうすると色々面倒なことになります。

一番はテーマのバージョンアップがあったときです。

バージョンアップをすると全て上書きされてしまうために、今まで一生懸命修正したコードが綺麗さっぱりなくなってしまいます。

せっかく修正したデザインが更新ボタン一つでリセットされるのはとてもショックです。（昔やらかしました）

そこで「子テーマ」を新たにつくりそこを修正していくことで、ベースとなるテーマが更新されてもカスタマイズが上書きされずに残すことができるのです。

子テーマを作成しよう

では、ここからは子テーマを作っていきます。

直接サーバに作成してもいいですが、パーミッションの関係もあるので、ローカルのPCで作成したものをアップロードするほうが楽です。

まずは、ローカルのPCに作業する場所を決めましょう。

子テーマ用フォルダ作成

では、子テーマのファイルを入れるフォルダを作ります。

今回の子テーマ名は「xeory_base_child」にしました。

以下の用意するファイルはこのフォルダ内に入れます。

用意するファイル1：style.css

まずは空の `style.css` を作ります。

そのファイルの中に最初はテーマ情報だけを記述します。

カスタマイズは後からですね。

@charset "UTF-8";
/*   
Theme Name: XeoryBaseChild
Theme URI: https://q-three.com/
Template: xeory_base
Description: Xeory Base Child Theme
Author: もりすけ
Author URI: https://q-three.com/
Version: 0.1
*/

内容は、自分の環境に書き換えて下さい。

最低でも、「Theme Name」と「Template」は必要になります。

Theme Name は子テーマの”名前”を、Template は親テーマの”フォルダ名”を入れます。

親テーマのフォルダ名を間違えると適用されないので注意が必要です。

用意するファイル2：functions.php

ここで必要なことは、親テーマの `style.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' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}
?>

最初はこれだけ記述して保存します。

用意するファイル3：screenshot.png

テーマ一覧で表示される画像を一緒に入れておきます。

だいたい 880×660 くらいで作成します。

同じくらいの比率であれば小さくても大丈夫です。

子テーマフォルダを圧縮する

用意ができたら、子テーマフォルダを圧縮して完成です。

完成品：xeory_base_child.zip

[q3-adsense01]

子テーマをアップロードしよう

作成した子テーマをアップしてみましょう。

アップロードを説明しようと思いましたが、ここまで見ている人はもう Xeory Base をインストールしているのではないかと気付きました。

ですので飛ばします。

インストール中はこのように「親テーマが必要です」などの文章が出てきます。

「有効化」をクリックして有効にしてみましょう。

これで新しい子テーマが適用されました。

あとは実際にサイトをみて上手く表示されているか確認してみて下さい。

重要：キャッシュ系プラグインを使っている方へ

子テーマを作ったのに最初は子テーマの `Style.css` が反映されませんでした。

原因を探っていったところ、こちらのサイトにたどり着きました。

それってどうなの？

サラリーマンの趣味的ブログ

僕の環境も完全にビンゴで、全く同じプラグインを入れていたのでした。

「W3 Total Cache」を無効にしたらきちんと反映されました。

キャッシュ系プラグインを使っておられる方は気を付けて下さい。

最後に

今回の作成ではまだ親テーマと見た目はまったく変わっていません。

ここからが腕の見せ所となります。

今はまだ `style.css` と `function.php` しか修正をしていませんが、また別のファイルを修正する場合は新たにファイルをコピーする必要があります。

例えば、`header.php` を修正したい場合は、親テーマからコピーをしてから修正する感じです。

ぜひ、参考にして下さい。

ありがとうございました。

[q3-adsense01]