wordpressで子テーマを作成

子テーマを作成した。

<head>内にGoogle Analyticsのスクリプトを埋め込むため。

環境
準備
style.cssの内容
functions.phpの内容
header.phpの拡張
子テーマの配置
子テーマをテーマとして設定
その他

環境

WordPress 5.2.1
Docker version 18.09.0, build 4d60db4
docker-compose version 1.23.1, build b02f1306
docker-machine version 0.16.0, build 702c267f

テーマを直に編集してもいいのだが、更新すると消えてしまう問題がある。

子テーマの作り方は、子テーマ - WordPress Codex 日本語版に従えばOKだが、ここに自分が行ったことをまとめておく。

自分の場合、子テーマのディレクトリは、最後にまとめてscpというかdocker cpで移動させた。（後述）

準備

ローカル環境内に、子テーマ用のディレクトリを作成する。
その中にstyle.cssとfunctions.phpを作成する。
functions.php以外のファイルは上書きとなるので、必要であれば作成する。自分の場合はheader.phpを作成した。

style.cssの内容

スタイルシートヘッダを記述するだけでいい。Theme Name, Theme URI, Description, Template, Tags,Text Domainなどを必要に応じて書き換える。なお、公開などは考えていない。

/*
Theme Name:   Twenty Fifteen Child  // 書き換える
Theme URI:    http://example.com/twenty-fifteen-child/  // 書き換える
Description:  Twenty Fifteen Child Theme  // 書き換える
Author:       John Doe  // 放置
Author URI:   http://example.com  // 放置
Template:     twentyfifteen  // ディレクトリ名にする
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready  // 親テーマのTagsを参考にする
Text Domain:  twenty-fifteen-child  // 書き換える
*/

Templateは親テーマのwp-content/theme/ディレクトリ内でのディレクトリ名を指定する。

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');

}

なお、親テーマのファイル構成は、次のようになっている。

parent-theme
├── functions.php
├── header.php  // これは上書きするので無視される。
├── style.css
├── ...
└── css
    └── ie.css

css/ie.cssがあるが、おそらく気にしなくていい。親テーマのfunctions.phpの実行時に読み込まれると思う。

header.phpの拡張

拡張といっても、タグを追加するだけ。親テーマのheader.phpの中身を子テーマのheader.phpにコピーして、<head>タグの中に設置する。

子テーマの配置

dockerでwordpressを動かしているので、コピー方法は工夫する。dockerにはcpコマンドがあるので、あまり困らない。テーマをローカルに移すのも逆にするだけでOK。

docker cp my-theme-child/ <container_name>:/var/www/html/wp-content/themes/

子テーマをテーマとして設定

外観 > テーマから移した子テーマを選択して有効化すればOK。

その他

一応docker-composeのサービスに接続してvimで作業もできなくはない。この場合は、docker-compose exec wordpress shでできる。

ie.cssはよくわかってない。あとでIEで確かめてみたい。