【WordPress】Xeory Baseの子テーマの設定方法_初心者向け

このブログを始めて約2ヶ月（＝Wordpress暦2ヶ月）の初心者の私が、「Xeory Base」で子テーマを設定したので、備忘録としてその設定手順を残しておきます。

WordPressの子テーマとは？

wordpressの既存テーマをカスタマイズする方法としては、

1. 直接テーマを書き換える（外観　＞　テーマの編集）
2. 子テーマを設定して、子テーマを書き換える

の2つの方法がありますが、WORDPRESS Codexの子テーマでも推奨しているように、子テーマでのカスタマイズがオススメです。

その理由は以下のとおりです。

子テーマの使用にはいくつかの利点があります。

• テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれません。子テーマを使用すればテーマの変更は確実に保持されます。
• 子テーマを使用することで開発時間を短縮できます。
• 子テーマの使用することでWordPressのテーマの開発を良い形で学べます。

引用：WORDPRESS Codex（http://wpdocs.osdn.jp/子テーマ）

「Wordpress　子テーマ」などで検索すると子テーマを設定したほうがいい理由を書いてくださっているブログがたくさん出てきますので、より詳細に知りたい方は参考にされるといいかと思います。ということで、このブログでも利用している「Xeory Base」で子テーマを設定する方法を書きます。

Xeory Baseに子テーマを設定する手順

条件

• OS：Windows7
• テーマ：Xeory Baseインストール済み、ほぼ初期状態のまま
• エディター：Atom
• サーバー：さくらインターネット
• FTPソフト：FileZilla

手順①：デスクトップに空のフォルダを作る

デスクトップで、新規作成 ＞ フォルダ →名称を「xeory_base-child」に変更。

手順②：style.cssのファイルを作る

WordPressの管理画面 ＞ 外観 ＞ テーマの編集 ＞ （右下）スタイル ＞ スタイルシート（style.css） を順にクリックし、cssを全コピーします。
Windowsであれば、ファイル内のどこかを適当にクリックし、Ctrl+Aで全選択してCtrl+Cでコピーできます。

テキストエディタ ＞ ファイル ＞ 新規ファイル 　で新しいファイルを開き、先ほどコピーしたcssを貼り付け、style.cssの名称でxeory_base-childのフォルダ内に保存します。

次に、ファイルの2行目から9行目に書かれている「/*」から「*/」の部分のTheme Name、Description、Templateを下記のように書き換えます。

/*
Theme Name: XeoryBase
Theme URI: http://xeory.jp/
Description: Xeory　ベーステーマ
Author: バズ部
Author URI: http://bazubu.com/
Version: 0.1.9
*/↓

Theme URI: http://xeory.jp/
Description: Xeory Base Child Theme
Author: バズ部
Author URI: http://bazubu.com/
Template: xeory_base
Version: 0.1.9書き換えたら上書き保存します。

手順③：functions.phpのファイルを作る

style.cssのときと同様に、
Wordpressの管理画面 ＞ 外観 ＞ テーマの編集 ＞ テンプレート ＞ （右中央あたり）テーマのための関数（functions.php） を順にクリックし、記述されているコードを全コピーします。

テキストエディタ ＞ ファイル ＞ 新規ファイル 　で新しいファイルを開き、先ほどコピーしたphpを貼り付け、functions.phpの名称でxeory_base-childのフォルダ内に保存します。
書かれている内容をすべて消し、1行目から次のコードを書きます（コピペでOK）。

<?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’)
);
}
?>できたら保存して完了です。

手順④：アップロードする

FTPソフトのFilezillaを使っていますので、その手順です（インストールはこちらからできますのでインストール後だけ）。

FileZillaを立ち上げます。

左側が自分のパソコンのファイルなどが表示されていて、右側（今は空欄）がサーバーのファイルやフォルダを表示する部分です。

次にファイル ＞ サイトマネージャを開きます。

サイトマネージャを開いたら、左下の「新しいサイト」をクリックします。

「新しいサイト」のところに自分のサイトの名前を入力します。

次にサーバーの情報を設定します。右側の一般のタブをクリックし、ログオンの種類を通常に変更した後、以下の内容を入力します（さくらインターネット）。

• ホスト名：FTPサーバ名
• ユーザ：FTPアカウント
• パスワード：パスワード

これらは、サーバ契約時にメールで送られてきているので確認してみてください。それぞれ入力し終わったら右下の「接続」ボタンを押します。

そうすると右側のリモートサイトの中に、サーバ上のフォルダが出てきます。その中の

www
└ wp
└ wp-contents
└ themes

と開き、左側のウィンドウからxeory_base-childのフォルダを右クリックし、アップロードします。アップロード完了後に右側にxeory_base-childが表示されれば、無事にアップロード完了です。

手順⑤：アップロードした子テーマを有効にする

WordPressの管理画面から、外観 ＞ テーマを選択し、xeory_base-childを有効化します。

これで有効化されました。

有効化した後のデザインの変更は、子テーマのstyle.cssを変更するとサイトへも反映されるようになりました。

私はこの方法でやりましたが、他にもいろいろな方がその方法をブログに書かれているので参考にしてみてください。

おわり