WordPressテーマを子テーマを使ってカスタマイズする手順

スポンサーリンク

WordPressのテーマのカスタマイズは、子テーマを作って子テーマをカスタマイズします。
テーマの更新によってせっかくカスタマイズしたものが初期化されるからです。

子テーマを作ってカスタマイズする方法を備忘録としてまとめます。

選択しているテーマが「Sample Theme」とすると、子テーマ用のフォルダ名称は[sample-theme_child]こんな名前にします。
「親テーマの名前_child」としておくと分かりやすいです。

[style.css]を作成します。

/*
Template:sample-theme wp-content/themesにあるファイル名
Theme Name:sample-theme_child
*/

[style.css]に書込みするのは最低限これだけです。

ただし、推奨されている書き方というのがあって、『次のように書いた方がいいですよ』ということです。

/*
Template:sample-theme wp-content/themesにあるファイル名
Theme Name:sample-theme_child
Description:子テーマの説明
Theme URI:親テーマのサイト
Author:親テーマの制作者
Author URI:親テーマ製作者のサイト
Version:バージョン
*/

最低限の記述で作動しますのでまずは作ってみましょう。

style.cssに親テーマの内容を読み込む為に「@import url(“../●●●/style.css”);」の記述が以前は行われていましたが、子テーマの[functions.php]で読み込む方法が推奨されています。

上の[style.css]と次のような[functions.php]を作ります。

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

この二つのファイルを子テーマ用のフォルダにアップします。

フォルダ階層は次のようになります。

wp-content
 ├languages
 ├plugins
 ├themes
  ├sample-theme1
  ├sample-theme2
  ├sample-theme3
  ┕sample-theme3_child
   ├functions.php
   ┕style.css
 ├upgrade
 ┕uploads

[functions.php]は必要に応じて変更したり追加したりする記述を書き込みます。
親テーマの内容は子テーマで書換られますので、変更点・追加点だけの書き込みです。

[index.php][single.php]などは、すべてをコピーして変更や追加したい部分を記述して、子ページフォルダにアップロードします。
[header.php]には「Google analytics」のコードを入れたりしますので、必ず子テーマにアップしておかないと親テーマが更新されると、アクセス解析が無効になってしまいます。

尚、phpファイルやcssファイルの変更は必ず「Terapad」か「秀丸」を使って書き込みして下さい。
「メモ帳」はUTF-8の保存が「BOM有り」になります。phpファイルやcssファイルは「BOM無し」でなければエラーの原因になります。

コメント