WordPressのスタイルを修正したり、自分でphpいじったりする系の記事だと必ず、子テーマ作ることが推奨されていますよね。
丁度子テーマを設定する機会があったので理由とやり方をまとめておきます。
※よくよく考えるとWordPressユーザの殆どがこの設定必要なんじゃないかと思います。
やり方としては、以下の二通りがあります。
- プラグインを使う
- 自分で子テーマを作る
私はプラグインが嫌いあまり好きではないので、この記事では自作の方法をまとめています。
子テーマ作成法
①子テーマ用のフォルダを作る
親テーマ(今回はtwentyseventeen)と同じ階層にフォルダを作ります。新規フォルダ作成でOKです。
②子テーマ用のfunctions.phpとstyle.cssを用意する
親テーマフォルダにあるfunctions.phpとstyle.cssをコピーして①で作成したフォルダ内に入れます。
もちろん、新規作成してもいいのですが、ファイル名や改行コード、文字コードをミスると死ぬのでコピーした方が無難です。
③function.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'));
}
?>↑の内容をコピペでOKです。あ、改行コード等は気を付けてくださいね(念押し)
functionの中の1行目で親テーマのstyle.cssを読み込んでいます。
functionの中の2行目は親テーマの後に子テーマを明示的に読み込む処理です。
通常は不要ですが、子テーマのstyle.cssが正しく読み込まれない場合はコメントを外してみてください。
④style.cssを書き換える
/*!
* Theme Name: Delivery Lite child
* Theme URI:
* Template: delivery-lite
* Description: Delivery Lite is a minimal, light and bright magazine WordPress theme. It comes with clean design, beautiful and mobile-friendly. Well suited for online magazines websites, news websites or personal blogs. It has a easy-to-use logo uploader via the Customizer. The main features include a featured posts slider, built-in breadcrumbs, built-in pagination, schema.org support, 4 widget areas and 2 menus. Demo: http://demo.theme-junkie.com/delivery-lite
* Version: 1.0.6
* Author: mathkuro
* Author URI: https://www.mathkuro.com
*/↑の内容をコピペして適宜書き換えてください。あ、改行コード等は気を付けてくださいね(念押しの念押し)
<<注意点>>
3行目の”Template:~”の部分は一字一句ミスらずに親テーマの名称にすること！！
これをミスると表示が崩れるので注意！！（そして気づくまで数時間かかる）
それ以外の箇所は別に表示には影響しないので適当で大丈夫です。
精神衛生上ちゃんとしておいた方がいいですが。
⑤子テーマが正しく作成されたことを確認する
WordPressテーマを作成した子テーマに変更して以下を確認しましょう。
- サイトが表示されるか？
- 表示が崩れていないか？
- 子テーマのstyle.cssに変更を加えると変更がページに反映されるか？
※子テーマのstyle.cssへの変更はキャッシュ等の影響ですぐに反映されない場合があります。ブラウザのシークレットモード等で確認してください。
終わりに
作業自体はそんなに難しくないです。
が、文字コード・改行コードをミスると表示が崩れたりするので慎重に行う必要はあります。文字コード＆改行コードミスに気づくのに数時間かかった