WordPress子テーマ

子テーマを作ろう!

子テーマを作っておけば、使用しているWordPressのテーマがバージョンアップしてもせっかくカスタマイズしたものが無駄になりません。

まずは、CyberduckからFTPサーバに接続しkyouore→wp-content→themesに新規のディレクトリー(フォルダー)を作成→名前を使用する親テーマの名前-chidと付けると子テーマと分かりやすいです。

例) twentyseventeen-child

子テーマのディレクトリー(フォルダー)に入れるのは2つ。

・style.css

・functions.php

テキストエディターでタイトルをstyle.cssにしテキスト内に下記のコードを記載。

/*

 Template:twentyseventeen

 Theme Name:twentyseventeen-child

 Version:2.3

*/

Template:親テーマ名を記載

Theme 子テーマ名を記載

Version:の行はなくても大丈夫ですがバージョンアップした際に把握しやすいので記載しています。

同じくテキストエディターでタイトルを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’)

  );

}

?>

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’ ),
filemtime( get_theme_file_path( ‘style.css’ ) )
);
}

上記のコードはfilemtimeを追加(更新時にキャッシュをクリア)

この2つを作成したらCyberduckからFTPサーバに接続し子テーマのディレクトリー(フォルダー)の中にアップロードします。

WordPressの管理画面から外観テーマで作成した子テーマが表示されているので有効にします。

あとは子テーマの方にカスタマイズする場合は追加していく事により親テーマをベースに子テーマから書き換えられ変更していく事が可能になります。

子テーマ注意?!

以前は子テーマで@importを使っての親テーマのcssのスタイルを適用させる方法を使用しておりましたが、現在では@importを使用しない方法が推奨されているようです。

子テーマにfunctions.php入れて記載すると、親テーマテーマのCSSを読み込んでくれる方法が今は推奨されているようです。

テーマによっては子テーマを使わなくてもカスタマイズされたものが、バージョンアップ後も利用出来たりとかもあるので、必ずしも子テーマは必要という訳ではありません。

ちなみに失敗談として…

今回子テーマにstyle.css、functions.phpを入れてもなかなか子テーマが反映されず…

意味が分からなくてなっていたら…

テーマの子テーマが壊れている事に気づき( > < )

サイバーダックからディレクトリーやstyle cssなどを見直していると、大文字と小文字がゴッチャになってる所を発見!!!

小文字で直したらちゃんと反映してなんとか子テーマ作成も終了しました!

こんな事もあるので気をつけましょう!

ちなみに3時間位は格闘してました( T_ T)