2020年7月17日更新

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

Thumbnail

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

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

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

メリットとしては次のようになると思います。

子テーマを使うメリット

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

この記事を書いた少し前にもマナブログコピーのテーマに大きなアップデートがありましたが、やっぱりアップデートがあったら自分のブログに反映したいですよね。

アップデートしたら「せっかくカスタマイズした内容が全部消えた…」なんてことにならないためにも、まずはカスタマイズをする前に子テーマを作るのがオススメです。

子テーマの作り方

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

まずは manablog_child などの名前をつけたフォルダを作り、その中に style.cssfunctions.php ファイルを作成します。


ここではフォルダ名を「manablog_child」としましたが、名前はお好みで変更してもらっても大丈夫です。

子テーマのサムネイルを表示させるには?
(テーマ一覧などで)子テーマのサムネイルを表示させるには、screenshot.png という名前の「880 x 660px」の画像を追加すれば、その画像が表示されます。親テーマからコピーしたものでも大丈夫です。

② style.css を編集

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

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

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

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

Template部分には注意が必要
「Template:」の箇所は、お使いのマナブログコピーのフォルダ名を記入することが必要です。たとえば親テーマの名前が「mblog_ver3」というフォルダ名なら、「Template: mblog_ver3」と記入します。
冬眠明けのクマ冬眠明けのクマ

テーマが壊れてもユーザーに見えることはないけど、「テーマが壊れています」という感じのエラーが管理画面のテーマ一覧で表示されるよ。

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


ここまでできたら、FTPなどを使って作成したフォルダをアップロードしましょう。
うまく子テーマが表示されれば、これで完成です!

子テーマを認識してくれない(壊れている)とき

Template: の箇所が原因かも

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

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

CSS
コピーする
/*
Theme Name: ...
Template: mblog_ver3
Description: ...
*/

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

それでもうまくいかないとき

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

子テーマが認識されないとき

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

UTF-8で保存するには

もしstyle.cssなどのファイルをutf-8で保存されていないかも…と思える場合には、SublimeText のようなテキストエディタで「別名で保存」すれば、utf-8の形式で保存できると思います。

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

Copyrights © WebCraftLogAll Rights Reserved.