色々なサイトで解説されているので今更感は否めないけど、これから先に書く記事で必要になってくるもんで
WordPressでは子テーマを作ってカスタマイズ、管理するのが吉
理由は単純、テーマを直接カスタマイズした場合は以下のような不幸が起こるから。
- テーマが更新されるとカスタマイズしたファイルも上書きされて泣きを見ることがある。
- 特に functions.php に変更を加えた場合、画面が真っ白になって何も表示されなくなったり、管理者としてのログイン画面すら表示されなくなって手も足も出ないという地獄に突き落とされる危険性がある。
WordPressで子テーマを作る方法
2018年8月現在、標準のテーマとなっている Twenty Seventeenを例に、ざざっと説明しておく。
- 以下が Twenty Seventeenが格納されているディレクトリ(フォルダ)なのでローカルにダウンロードしておく
/wp-content/themes/twentyseventeen
- 以下のように子テーマのディレクトリ(フォルダ)を作る。
/wp-content/themes/twentyseventeen-child
- 上記 2.で作成したディレクトリに functions.phpと style.cssというファイルを作成する。
(上記 1.のディレクトリからコピペするもよし) - functions.phpに以下を記述。12345add_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'));}
(ただし、親からファイルをコピペした場合は内容を全て削除してから) - style.cssに以下を記述。1234/*Theme Name: twentyseventeen childTemplate: twentyseventeen*/
(ただし、親からファイルをコピペした場合は内容を全て削除してから) - 子テーマのディレクトリをサーバーにアップロード。
(上記 2.で作成した /wp-content/themes/twentyseventeen-child) - WordPressの管理画面(ダッシュボード)にログインし、『外観』→『テーマ』で twentyseventeen childを選択して有効化する。
(もし、画面最下部に以下のメッセージが表示されたら上記 5.の Theme Name: または Template: 部分に誤字脱字があると思われる。)
- これで子テーマを使えるようになったので、あとはカスタマイズするファイルを親から子にコピーしていじり倒すが良い。
WordPressの子テーマでカスタマイズの一例
- 例として、ブログ(WordPress)のフッター(最下部)に表示されている『Proudly powered by WordPress』という文字を消すなり変更したければ、親(/twentyseventeen/)から子(/twentyseventeen-child/)に footer.phpをコピーして 42行目あたりの1get_template_part( 'template-parts/footer/site', 'info' );
を削除すれば表示は消える。 - 他の文字列を表示したければ、上記部分を削除後の 42-43行目あたりに記述すればOK。1©2017-<?php echo date("Y");?> HOGEHOGE
とでも記述しておけば、『©2017-(今年) HOGEHOGE』って表示できる。 - スタイルシートを変更したければ子の style.cssに以下を記述すれば1.site-footer { background-color: #ddd; }
フッター部分がぼんやりとグレーになるってこと。
ざっくりした子テーマに関してのアレコレは以上。