パソコン・スマホ備忘録

パソコン、スマホ、マイコン、家電などの備忘録と日記

WordPress

WordPress:@importを使わない子テーマの作り方(STINGER PLUS+)

2017/06/19

WordPressで子テーマの必要性

WordPressで何らかのカスタマイズを施したい場合、テーマそのものを編集すると、テーマがバージョンアップした際、折角カスタマイズした情報が失われてしまいます。またテーマを編集している段階でミスしますと、サイトが崩れたり開けなくなるかもしれません。

子テーマを作れば親テーマを変更することなくカスタマイズすることができます。親テーマは編集しませんから、バージョンアップしたとしてもカスタマイズした子テーマの内容は引き継ぐことができます。さらに親テーマにいつでも戻すことができると言うメリットもあります。親を編集してしまうとオリジナルは失われてしまいますので、万が一戻すときには一手間かけなければなりません。

@importを使わずに子テーマを作る方法

今使っているWordPressのテーマ、STINGER PLUS+を例に取りながら子テーマを作ってみます。少し前までは@importを使って親スタイルを呼び出していましたが、パフォーマンスが悪くなるため推奨されていません。本家STINGER PLUS+の子テーマのサンプルも@importを使っているので、こちらの方法に変更されることをおすすめします。

なお今回は自分が使っているSTINGER PLUS+の例を書いていますが、やり方はどテーマでも同じです。

具体的な方法は、

  1. 子テーマ用のディレクトリ(フォルダ)を作る
  2. そのディレクトリにカスタマイズするためのファイルを作る
  3. テーマから子テーマを選ぶ

このようにして「子テーマから親テーマを呼び出す」ようにします。ディレクトリ名は「親テーマの名前-child」になります。実際の場所は以下のようになります。通常のテーマを入れる場所と同じです。

/wp-content/themes/stingerplus-child

このディレクトの中に「style.css」と「functions.php」というように上書きしたいファイルを配置します。それぞれのCodeの中身は子テーマのstyle.cssですが、前述のように@import url('../stingerplus/style.css');で読み込むとパフォーマンスが悪くなるので最近では勧められていませんから、今回は推奨されている子テーマの functions.php で wp_enqueue_script()を使用する方法にします。

functions.php

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

これで親テーマのcssを読み込んでくれます。

そしてstyle.cssにカスタマイズしたい部分を書いてゆきます。

style.css

/*
Template:STINGERPLUS
Theme Name:stingerpluschild
*/

これで準備は完了です、テーマで「stingerpluschild」を選べばいつもと変わらないサイトが表示されるはずです。あとはテーマの編集はこの子テーマに対して行ないます。

スポンサーリンク

-WordPress