2017-07-07

【WordPress】子テーマの作り方と、うまく表示されないときの対処法

WordPressのテーマを編集するにあたっては、テーマ本体に直接手を加えるのではなく、「子テーマ」を作成・インストールすることが推奨されています。

そこで本記事では、子テーマの作成方法と、うまく表示されないときの対処法について書いていきます。

基本的に「子テーマ」をカスタマイズしよう

そもそも子テーマとは何か。一言でいうと「親から自立した子」です。

例えば、WorPressのテーマ配布サイトからとあるテーマ(親)をダウンロードし、インストールしたとしましょう。それが「親テーマ」と呼ばれるものです。

この親テーマさえあればカスタマイズできるのですが、ここで注意が必要です。

そもそも、なんでカスタマイズするのに子テーマが必要なのか?既存のテーマ(親テーマ)を直接カスタマイズすればいいじゃないか?と思われるかもしれません。それにはちゃんと理由がありまして。(中略)既存のテーマを直接カスタマイズしてしまうと、アップデートの際にファイルがすべて上書きされてしまい、苦労してカスタマイズしたものがすべてなかったことになってしまうのです。
(Webクリエイターボックス「子テーマを作ってWordPressの既存テーマをカスタマイズする方法」より引用)

そう。もしも「親テーマ」でカスタマイズを行うと、「親テーマ」がアップデートされた場合にそれまでのカスタマイズが消えてしまいます!

だからこそ、絶対に「子テーマ」が必要なんです。WordPressのテーマをインストールしたら、必ず「子テーマ」を作成するようにしましょう。

誰でもカンタン! 子テーマの作り方

それでは実際に、子テーマを作成していきます。

「(親テーマ名)_child」フォルダを作成する

デスクトップなど、パソコン上の好きな場所に「新しいフォルダー」を作成してください。

そして、フォルダ名を「(親テーマ名)_child」に変更します。例えば親テーマとして「Folclore」がインストールされている場合は、「Folclore_child」になります。

作成した「子テーマフォルダ」内に「style.css」を作成する

「子テーマフォルダ」が作成できたら、フォルダ内で「右クリック」→「新規作成」で、「テキスト ドキュメント」をクリックします。

※なお、こちらを参考にして、あらかじめ拡張子を表示できるようにしておきましょう。

ファイル名に「style.css」と入力して、名前の変更を許可します。なお、ここでいう「.css」が拡張子になります。

「style.css」内に必要な情報を記入する

作成した「style.css」を開いて、以下の情報を記入します。

/*
Template: (親テーマ名)
Theme Name: (親テーマ名)_child
*/

例えば、使用するテーマが「Folclore」の場合は画像の通りに記入します。

この際、「:」の後には、必ず半角スペースを入れるようにしてください!

これで「style.css」の作成が完了しました。

「子テーマフォルダ」内に「function.php」を作成する

次に、「子テーマフォルダ」内に、「function.php」を作成します。先ほどと同じく、テキストファイルから名前と拡張子を変更するやり方でいきましょう。

すると、PHPという種類のファイルができました。

「function.php」に必要事項を記入する

作成した「function.php」を開いて、以下の必要事項を記入します。なお、phpファイルの編集には、編集ソフトが必要になるかもしれません。「TeraPad」など、フリーソフトを活用しましょう。

<?php add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles()
{ wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
} ?>

これで「function.php」の作成が完了しました。

「子テーマフォルダ」を圧縮する

作成・編集した「style.css」と「function.php」が入った「子テーマフォルダ」を圧縮します。

圧縮の仕方は、Windowsの場合、ファイルのアイコンを「右クリック」→「送る」→「圧縮(zip 形式)フォルダー」をクリックすることでできます。

画像のように、zipファイルが生成されていたら成功です。

圧縮した「子テーマフォルダ」を、WordPressにインストールして完了

最後に、圧縮した「子テーマフォルダ」をWordPressにインストールして完了です。なお、テーマのインストール方法が分からない場合は、検索するなどして調べましょう!

インストールされた子テーマを適用すれば、あとは自分好みにカスタマイズしていくのみです。

おめでとうございます!

子テーマがインストールできない、うまく表示されないときの対処法

せっかく作成した子テーマ。場合によっては、WordPressにインストールできなかったり、インストールして適用してもうまく表示されなかったりする場合があります。

そのようなときは、次の点を確認してみてください。

  • 子テーマの名前が、親テーマの名前と異なっている。
  • 「style.css」内、「Template」および「Theme Name」の「:」の後に、半角スペースが入っていない。

多くの場合、これで解決されるはずです。ちなみに僕も、「:」の後に半角スペースが入っていなかったために、表示が崩れてしまいました。

「子テーマ」をカスタマイズして、素敵なWordPressライフを送りましょう

以上、今回は「子テーマの作成方法」と「不具合のときの対処法」について書いてきました。

WordPressを始めるまで分からなかったのですが、親テーマのアップデートは思っている以上に実施されます。なので、子テーマは必ず作成したほうがいいです!

もはや「親テーマ」を直接編集することは、怖くてできません…。

ということで、WordPressでサイトをカスタマイズする場合は「子テーマ」を作成して、安全で幸せなWordPressライフを送りましょう。

 





関連記事

コメントを残す