初心者がXeory Baseで子テーマを作成してみました

2017-10-01

ワードプレスでブログを始めてから3・4日目ぐらいの頃トップページをカスタマイズしようとしてfunctions.phpをいじったら画面が真っ白になってしまい、悪戦苦闘した結果テーマを削除してインストールし直す事でなんとか復旧させたことがあります

それ以来、ファイルを編集することが怖くなってしまったのですが、調べてみると子テーマなるものを作ることでこのリスクをかなり回避できることがわかったのでそれについて書いてみようと思います

Xeory Baseでの子テーマの作成方法

本当は子テーマとは何かとか子テーマを利用する上での利点とかそういう事から書いていくのがいいんだろうとは思います
しかしそれはワードプレスの先駆者の方たちのサイトに分かり易く載っているので、今更(しかも初心者の)私が書くことではない事を十分理解しています
ですのでいきなり子テーマの作成方法から入ります
ちなみに@importantを使用しない方法です

準備するもの

準備するものというかあった方がいいものを紹介します
なくても代替方法はありますが、揃えておいて不都合な点はなにもないので以下を準備しておくのがいいかと思います

  • エディタソフト
  • ftpソフト

エディタソフト

要するにメモ帳ですが、Windows付属のメモ帳は適しません
文字コードをUTF-8 BOMなしで保存可能なエディタを使用する必要があります

私はサクラエディタを使用しています
無料でダウンロードできるのでありがたく使わせてもらっています

ftpソフト

ftpソフトはサーバーとファイルのやり取りをするためのソフトです
ftpソフトは何でもいいかと思いきや、どうやらソフトによってレンタルサーバーとの相性があるらしいです

私はXサーバーを使用しているのですが、Xサーバーと不具合を起こさないftpソフトの1つにffftpが挙げられるとの事で私はffftpを使用しています
こちらも無料でダウンロードできるのでお勧めです
窓の杜からDLできます

子テーマフォルダの作成の仕方

まず最初にワードプレスのテーマがある所に子テーマ用のフォルダを作成する所から始めます

ftpソフトを使って
/自分のブログのアドレス/public_html/wp-content/themes
まで潜ると、ここに自分の使用しているテーマのフォルダがあります

ここに新しく子テーマ用のフォルダを作成します
私はXeory Baseを使用しているのでフォルダの名前をxeory_base-childとしました
親テーマにあたるxeory_baseというフォルダ名に-childをくっつけただけの単純な名前ですね

子テーマフォルダに入れるファイルの作成

以前は@importantの一文を入れたstyle.cssというファイル1つだけで良かったそうです
しかし今は公式サイトから非推薦とのお達しが出ているので別の方法で子テーマを作成します
それはstyle.cssとfunctions.phpという2つのファイルを作成する事です

style.cssの中身

テキストエディタを開いたら
/*
Template:xeory_base
Theme Name:xeory_base-child
*/
のように4行入力してファイルを作成します
その際必ず文字コードをUTF-8 BOMなしで保存します

この中のTemplateは親テーマのフォルダ名のことを表します

functions.phpの中身

テキストエディタを開いたら
<?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’)
);
}
?>
のように10行入力してファイルを作成します
その際必ず文字コードをUTF-8 BOMなしで保存します

子テーマを有効化する

これらstyle.cssとfunctions.phpを作成し終えたらftpソフトを使って作成した子テーマフォルダにアップロードします
ワードプレス管理画面の外観-テーマをクリックするとxeory_base-childというテーマがあるのでそれを有効化して無事子テーマ作成終了となります

まとめ

以上がXeory Baseで子テーマを作成する方法となります

入力ミスによる妙なエラーでブログ真っ白けというリスクをかなり減らせるのは初心者の自分には(特に精神的に)本当に大きいです
早い段階で導入しておけば良かったんですけどね

最後になりますが、ファイルアップロード後は必ず有効化しておきましょう(笑)
私はどうもそれを忘れていたみたいでいくらstyle.cssを編集しても変更が反映されず1週間近く悩んでいました
有効化のボタンを押した記憶はあるんだけどなぁ・・・

Word Press

Posted by ペペ