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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

このブログを始めて約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-folder

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

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

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

xeorybasechild-cature2

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

xeorybase_style.css-paste2

次に、ファイルの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) を順にクリックし、記述されているコードを全コピーします。

xeorybase_functions.php2

テキストエディタ > ファイル > 新規ファイル  で新しいファイルを開き、先ほどコピーした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を立ち上げます。

Filezillaの初期画面

 

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

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

Filezillaのサイトマネージャ

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

filezillaの新しいサイト

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

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

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

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

Filezilla接続ボタン

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

www
└ wp
└ wp-contents
└ themes

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

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

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

xeory_base-childを有効化する

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

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

 

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

 

おわり

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

ブライダル企業の課題を解決する!法人向けソリューションサービス一覧はこちら

ブライダル業界の課題を解決する様々な法人向けサービスをご紹介しています。

 ●集客改善ブライダルコンサルタント

 ●総合ブライダルコンサルタント

 ●ITシステムソリューション

 ●新規/打合せの担当・接客代行

など、今後も随時追加予定です。業績改善や新規事業の企画などにぜひご相談ください。


ブライダル業界の法人向けサービス一覧はこちら

SNSでもご購読できます。

コメント

  1. komiyaman より:

    参考にさせていただきました。ありがとうございました。

    1. いちまるけ より:

      コメントありがとうございます!

  2. みんな島 より:

    参考にさせていただました。ありがとうございます。
    しかし、有効化してパソコンでブログを見るとバグってしまい、途方にくれてます。有効化したときテーマの表示にバズ部さんの水色のロゴは出てきません。
    ブログは、iPhoneとiPadでは表示されるのですが….
    何が原因か分からず親テーマに戻しました。
    もしお分かりならご教授頂けないでしょうか?

    1. いちまるけ より:

      コメントありがとうございます。
      ただ申し訳ないですが状況がちょっとわからず原因などもわからないです。すみません。

  3. カリュウ より:

    参考になった、ありがとう

  4. caramel より:

    参考にさせていただきました。ありがとうございます。

コメントを残す

*