カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

WORDPRESSの子テーマを作成する

この記事は最終更新日から1年以上経過しています。

WORDPRESSでは、既存のテーマを元に子テーマを作成することができます。
最低限必要なのは、テーマの基本となるスタイルシートファイル(style.css)のみです。
あとは、スクリーンショットがあれば尚可。

まず、themesディレクトリに子テーマ用のディレクトリを作成します。
ここでは親テーマの名前を「parent」、子テーマの名前を「child」とします。

wp-content/themes/child

style.cssを作成します。

/*
    Theme Name: child
    Template: parent
*/

@charset "utf-8";
@import url("../parent/style.css");

@import url();にて親テーマのCSSファイルを相対パスを指定して読み込みます。
そして、このファイルにスタイルを記述していけば親テーマのスタイルよりもこちらが優先されます。

その他、header.phpやfooter.phpなどは上書きされるため、各テンプレートファイルも子テーマディレクトリに作成すれば親テーマのファイルよりも優先されます。
functions.phpの場合は注意が必要です。functions.phpのみ上書きされません。
子テーマのfunctions.phpを読み込んでから、親テーマのfunctions.phpを読み込みます。
そのため、同名の関数などが存在すれば親テーマより子テーマの関数のほうが優先されます。

【画像ファイルについて】
子テーマ用の画像を用意した場合は、子テーマのディレクトリにimagesディレクトリを作成して画像を入れます。

wp-content/themes/child/images

その際の注意点として、画像タグ<img>のsrc属性にbloginfo('template_url')bloginfo('template_directory')ではなく、bloginfo('stylesheet_directory')を使用しておくようにしましょう。

<img src="<?php bloginfo('stylesheet_directory') ?>/images/example.png" />

bloginfo('template_url')、もしくはbloginfo('template_directory')を使用している場合、返ってくるパスは親テーマの画像ディレクトリのパスになってしまいます。

以上で、子テーマとして機能するようになります。

この記事がお役に立ちましたらシェアお願いします
2,123 views

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です