マナブログコピー

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

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

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

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

メリットとしては、

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

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

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

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

まずは manablog_child というフォルダを作り、その中に style.cssfunctions.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を選択します。