マナブログコピーの子テーマを作る方法とテーマが認識されない場合に試したいこと【WordPress】

今回の記事では、マナブさん（@manabubannai）が公開しているWordPressテーマ manablog_copy（マナブログコピー）の子テーマを作る方法について書いていきたいと思います。

1 カスタマイズを始める前に子テーマを作るのがオススメ

カスタマイズを始める前に子テーマを作るのがオススメ

WordPressでは、親テーマ（マナブログコピー）のファイルを直接編集していると、カスタマイズした変更を残しながらアップデート内容を取り込むということが、とても大変になってしまいます。

メリットとしては、

どれだけ子テーマを編集しても親テーマには影響が無い
カスタマイズで使用したコードの管理が楽になる
親テーマをアップデートしても、子テーマには影響が無い

というところになると思います。

この記事を書いた少し前にもマナブログコピーのテーマに大きなアップデートがありましたが、やっぱりアップデートがあったら自分のブログに反映したい場合が多いと思うので、まずはカスタマイズをする前に子テーマを作るのがオススメです。

子テーマ用フォルダを作成

まずは manablog_child というフォルダを作り、その中に style.css と functions.php ファイルを作成します。テーマ一覧などで子テーマのサムネイル画像を表示させたい場合には、screenshot.png という名前の 880 x 660px（解像度は72でOK）の画像を追加します。

※ ここではフォルダを manablog_child という名前にしましたが、名前はお好みで変更しても大丈夫です。

style.css を編集

WordPressでは manablog_child という名前のフォルダを作っても、フォルダ名から子テーマであることを自動で認識してくれません。

子テーマとして認識させるために、以下のコードを style.css にコメントとして追加します。

@charset "UTF-8";
/*
Theme Name: マナブログコピー子テーマ    
Template: mblog_ver3　　　← お使いのマナブログコピー（親テーマ）のフォルダ名
Description: マナブログコピーの子テーマです
*/

注意して欲しいのが、上のコードの Template: 部分です。

Template: 部分はマナブログコピー（親テーマ）のフォルダ名を記入する必要があるので、お使いのマナブログコピーのフォルダ名を記入するようにしてください。でないとユーザーに見えることはありませんが、テーマが壊れているというエラーが表示されます。

子テーマをサーバーにアップロード

ここまでできたら、作成した子テーマをFTPなどを使ってサーバーにアップロードします。

うまく子テーマが表示されていれば、これで完成です。

子テーマを認識してくれないとき・テーマが壊れていると表示されるとき

子テーマを認識してくれないときや、テーマが壊れていると表示されるときは、子テーマのstyle.cssに書く Template: の箇所が原因かもしれません。

Template: の箇所には、親テーマのフォルダ名を書く必要があるので、子テーマをうまく認識してくれない場合には、こちらをチェックすると解決するかもしれません。

/*
Theme Name: ...
Template: mblog_ver3
Description: ...
*/

※ この記事を書いた時点では、マナブログコピーはver3まで公開されていたのですが、フォルダ名が mblog_ver3 なので、下のコードの Template: も mblog_ver3 にしています。もしマナブログコピー（親テーマ）のフォルダ名が mblog_ver3 以外の名前になっていたら、子テーマの Template 部分も別の名前にしてください。

それでもうまくいかないときは、以下をチェックしてください。

Template: の後は親テーマの「フォルダ名」になっているか
親テーマのフォルダ名に、半角などのスペースが入っていないか
親テーマのフォルダ名と Template: の後に大文字、小文字の違いはないか
Template: の後などに全角スペースが入っていないか
utf-8 で保存されているか

※ utf-8 という部分ですが、もし utf-8 で保存されていないかも…と思える場合には、SublimeText のようなお使いのテキストエディタから「別名で保存」すれば、utf-8を選択できると思います。

Sublime Textなら Save with Encoding でwith BOMでない方のUTF-8を選択します。