ワードプレス無料テーマ「XeoryBase」のインストールと子テーマの作り方

バズ部さんが無料で配付しているワードプレステーマ(テンプレート)「XeoryBase」をインストールして、子テーマを作る方法です。

「Xeory」テーマは、非常にシンプルなデザインなのですが、場合によってはデザインをカスタマイズしたくなることがあるかもしれません。
テーマをインストールして、直接スタイルシートを編集してもよいのですが、この場合、テーマを最新版にバージョンアップすると今まで行ったカスタマイズが元に戻ってしまいます。

それを防ぐには、子テーマを作成してカスタマイズを行うという方法があります。
今回は、「XeoyBase」テーマをインストールして子テーマを作成してみます。

「Xeory」テーマは、下記サイトから無料でダウンロードすることができます。(ダウンロードにはメールアドレスの登録が必要です。)
→ https://xeory.jp/

XeoryBaseテーマ(テンプレート)をダウンロードする

先ほどのサイトからダウンロードしたzipファイルを、デスクトップなどの分かりやすい場所においておきます。

zipファイル

zipファイルをダブルクリックしてデスクトップに展開(解凍)します。
展開(解凍)が完了したら、元の「xeory_base.zip」ファイルは「ごみ箱」に入れておきます。

Xeoryテーマファイル

展開(解凍)された上記のファイルをクリックしてフォルダの内容を表示します。

Xeoryテーマファイル内容

Windowsで見てみると、上記のように「__MACOSX」と「xeory_base」という2つのファイルが表示されています。
「__MACOSX」ファイルは、Macで圧縮したデータをWindowsで展開すると自動で生成されるファイルです。
Windows環境では、必要のないファイルなので、削除しても大丈夫です。

ちなみに、このファイルを残したままテーマをインストールしても不具合は起こりません。

「__MACOSX」を削除する場合は、ファイルを右クリックするとメニューが表示されるので、そのメニューの中から「削除(D)」をクリックします。

__MACOSXファイル削除後

「__MACOSX」ファイルが削除されるので、次に「xeory_base」ファイルをダブルクリックしてみます。

Xeory_baseファイル内容

このファイルの中にテーマの各種ファイルが格納されています。

この中に「.DS_Store」というファイルがあるのですが、これも自動で生成されるファイルで、Windows環境では必要のないファイルです。
先ほどと同じようにファイルを右クリックして「削除」しても大丈夫です。

ちなみに、こちらも削除せずにテーマをアップロードしても不具合は起こりません。

ファイル削除後

次に「lib」ファイルをダブルクリックしてみます。

libファイル内容

ここにも「.DS_Store」ファイルがあるので、削除しても大丈夫です。

削除後

同じように各ファイルの内容を見てみると「css」と「js」ファイルの中にも「.DS_Store」ファイルが存在しているので、先ほどと同じように「.DS_Store」ファイルを削除しても大丈夫です。

圧縮前

削除が完了したら、「xeory_base」ファイルをzip形式で圧縮します。

デスクトップに解凍した「xeory_base」ファイルの中にもうひとつ「xeory_base」ファイルが入っているので、中に入っているファイルの方を圧縮します。
ファイルを右クリックするとメニューが表示されるので、「送る」にカーソルを合わせます。
さらにメニューが表示されるので、その中から「圧縮(zip形式)フォルダー」をクリックします。

zipファイル生成

「xeory_base.zip」というzipファイルが生成されます。
(環境設定により生成される場所が変わる場合もあります。)

新しく生成されたzipファイルは、デスクトップに移動しておきます。
(ドラッグ&ドロップで移動することができます。)

繰り返しになりますが、テーマのダウンロードサイトからダウンロードしたzipファイルをそのままアップロードしても不具合は起こりません。
ただ、Windows環境でそのままアップロードすると「.DS_Store」ファイルも一緒にアップロードされてしまうので、ここでは削除しておきました。

次に、テーマファイルをワードプレスにインストールします。

Xeory_baseテーマをインストールする

ワードプレスのダッシュボード(管理画面)にログインします。

ダッシュボード

左側に表示されている「外観」にカーソルを合わせるとメニューが表示されます。
その中に表示されている「テーマ」をクリックします。

インストール済みテーマ一覧

インストール済みのテーマ一覧が表示されます。
上側に表示されている「新規追加」をクリックします。

テーマ追加画面

テーマ追加画面が表示されます。
上側に表示されている「テーマのアップロード」をクリックします。

テーマアップロード画面

画面が切り替わるので、「参照」をクリックします。

ファイル選択ウィンドウ

「アップロードするファイルの選択」ウィンドウが表示されます。
デスクトップを表示して「xeory_base.zip」ファイルをクリックして選択し、「開く(O)」をクリックします。

インストール画面

ワードプレスのテーマ追加画面に戻るので、「いますぐインストール」をクリックします。

ファイルインストール

テーマのインストールが始まります。
インストールが完了したら「有効化」をクリックします。

インストール後のテーマ一覧

インストール済みテーマの一覧が表示されます。
上側に表示されている「サイトを表示する」をクリックしてみます。

xeory画面

インストールした「xeory_base」テーマが反映されています。

これで「xeory_base」のテーマインストールは完了です。

続いて「子テーマ」を作成します。

XeoryBaseの子テーマを作る

まず、デスクトップに空のフォルダを作り、名前を「xeory_base-child」に変更します。

childテーマフォルダ

次に子テーマ用の「style.css」と「functions.php」ファイルを作成します。

style.cssの作り方

「xeory_base」ファイルの中にある「style.css」ファイルをテキストエディタで開きます。

ファイルを開く場合は、Windows標準の「メモ帳」では開かず、「TeraPad」や「EmEditor」などの「UTF-8 BOMなし」で保存できる専用エディタを使用します。

ファイルの冒頭に記載されている「/*」から「*/」の部分以外を消去します。
現在記述されている「/*」から「*/」の部分を下記の記述例のように書き換えます。

/*   
Theme Name: XeoryBaseChild
Theme URI: http://example.com/
Description: Xeory Base Child Theme
Author: ○○○○
Author URI: http://example.com/
Template: xeory_base
Version: 0.1.6
*/

7行目に記述されている部分は、親テーマが「xeory_base」であることを示しています。
最低限2行目と7行目の項目が記述されていれば、子テーマとして認識されます。

書き換えが終了したら、文字コードを「UTF-8」にしてデスクトップに保存します。
ファイル名は「style.css」のままで大丈夫です。

functions.phpファイルの作り方

これも「xeory_base」の中に入っている「functions.php」ファイルをテキストエディタで開きます。
このファイルは、必ず「UTF-8 BOMなし」で開かないと不具合が起こるので注意しましょう。

現在記述されている内容をすべて消去し、1行目から下記のように記述します。

<?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')
    );
}
?>

記述が完了したら、文字コードが「UTF-8 BOMなし」になっていることを確認して、デスクトップに保存します。
ファイル名は、「functions.php」のままで大丈夫です。

子テーマをアップロードする

先ほど作った「style.css」ファイルと「functions.php」ファイルを、デスクトップに作った「xeory_base-child」フォルダの中に移動します。
移動はドラッグ&ドロップで行うことができます。

xeory_base-child

ここでは、FTPソフトを使ってアップロードしてみます。
(使用しているFTPソフトは「FileZilla」、サーバーは「さくらのレンタルサーバ」です。)

FTPソフトを立ち上げ、左側ウィンドウ(PC側)には「デスクトップ」を、右側ウィンドウ(サーバー側)には、ワードプレスの「themes」ディレクトリ(wp-content/themes)を表示します。

FileZilla

左側ウィンドウの「xeory_base-child」を右クリックし、表示されたメニューから「アップロード(U)」をクリックします。

childテーマアップロード

アップロードが完了すると右側ウィンドウに「xeory_base-child」が表示されます。
これで子テーマのアップロードは完了です。

子テーマを有効化する

ワードプレスのダッシュボード「外観」-「テーマ」を開いてみると、新しく「XeoryBaseChild」が追加されています。
「XeoryBaseChild」にカーソルを合わせると、下側に「有効化」のボタンが表示されるのでクリックします。

子テーマの有効化

これで「子テーマ」が有効化されたので、上側に表示されている「サイトを表示する」をクリックしてみます。

子テーマ

このように表示されていれば、子テーマのインストールと有効化は完了です。

デザインの変更部分を子テーマの「style.css」に記述しておけば、親テーマをバージョンアップしても変更箇所はそのまま保持されるようになります。

デザインだけでなく、ヘッダーやトップページのなどの表示をカスタマイズする場合は、子テーマに「header.php」ファイルや「index.php」ファイルを親テーマからコピーしておき、子テーマのファイルをカスタマイズするようにします。

これで、親テーマをバージョンアップしてもデザインが元に戻るということを防ぐことができます。

2 Responses to “ワードプレス無料テーマ「XeoryBase」のインストールと子テーマの作り方”

  1. […] 参考 ワードプレス無料テーマ「XeoryBase」のインストールと子テーマの作り方 […]

  2. […] イズするには、子テーマなるものを作って、そっちをカスタマイズするのがお約束らしいので、子テーマを作る。 ワードプレス無料テーマ「XeoryBase」のインストールと子テーマの作り方 […]

コメントを残す

サブコンテンツ

PAGE TOP