子テーマの作り方で参照したページ
参照(1) 子テーマの概念など初心者向け情報
WordPressにおける子テーマの作り方
参照(2) @import は使わない。style.css と functions.php の最低限の記述
参照(3) WordPress 公式情報
参照(4) 親テーマがスタイルシートを読み込む方法の違い
参照(5) get_template_directory_uriとget_stylesheet_directory_uriの違いについて
get_template_directory_uriとget_stylesheet_directory_uriの違い
上記ページを参考に、最低限の子テーマファイルを作成
MAMP/htdocs/wp/wp-content/themes/
├── index.php
├── onepress
│ ├── functions.php
│ ├── index.php
│ └── style.css
├── onepress_child
│ ├── functions.php
│ └── style.css
├── twentysixteen
│ ├── index.php
│ ├── functions.php
│ └── style.css
└── twentysixteen_child
├── functions.php
└── style.css
子テーマフォルダ onepress_child → style.css
/*
Template:onepress
Theme Name:OnePress_child
Theme URI:
Description:OnePress の子テーマです
Author:やまちゃん
Version:1.0
*/
子テーマフォルダ onepress_child → functions.php
add_action() は アクションが起こったときに フックさせる関数 を定義する関数。
参照 → https://wpdocs.osdn.jp/関数リファレンス/add_action
ここで少し疑問。
【疑問1】
上記子テーマの functions.php では、add_action() のあとに、フックさせる関数を記述している。
本当は、フックさせる関数 の定義が先で、そのあとに add_action() の定義では??
よく見る記述
<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
?>
でも本当はこっちが正しいのでは?
<?php
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
?>
【疑問2】
OnePress も TwentySixteen も、functions.php 内でスタイルシートを読むときの関数は
wp_enqueue_style() を使っている。
なのに、なぜ子テーマの functions.php の add_action() のアクション名は
‘wp_enqueue_scripts’ なのか?
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
↓
本当はこうあるべきではないのか?
add_action( ‘wp_enqueue_style’, ‘theme_enqueue_styles’ );
wp_enqueue_style というアクションがないのか?
参照→ https://wpdocs.osdn.jp/プラグイン_API/アクションフック一覧
————————————————————————————
親テーマOnePress の functions.php → 139行目あたり。
function onepress_scripts() の
wp_enqueue_style( ‘onepress-style’, get_template_directory_uri().’/style.css’ );
【推測】
ここでスタイルシートを取り込んでいる。
子テーマ style.css まで継承読み込みをせず、親テーマの style.css だけしか読まないような記述なのではないか??
↓
wp_enqueue_style() をいろいろ書き換えてみる。
/*
* これがOnePressオリジナルの functions.php 子テーマを作っても、子テーマの style.css を読んでくれない
* wp_enqueue_style( ‘onepress-style’, get_template_directory_uri().’/style.css’ );
*
* get_template_directory_uri() を get_stylesheet_uri() に変えてみたけどだめだった
* wp_enqueue_style( ‘onepress-style’, get_stylesheet_uri() .’/style.css’ );
*
* TwentySixteenは この記述でスタイルシートを読み込んでいる。
* 子テーマ時にも 子テーマフォルダの style.css を読んでくれる。
* wp_enqueue_style( ‘twentysixteen-style’, get_stylesheet_uri() );
*
* TwentySinteen のやり方に合わせてみたら、子テーマも読み込んでくれるようになった。
* wp_enqueue_style( ‘onepress-style’, get_stylesheet_uri() );
*/
残る問題点
【問題点1】
親テーマの時点でダッシュボードからカスタマイズした内容が一部反映されない
【親テーマ OnePress ダッシュボード → 外観 → カスタマイズ】で、OnePress独自のカスタマイズ画面になる。
ここで変更した内容のうち、子テーマに切り替えたときに反映するものとしないものがある。
○:子テーマでも反映される
☓:子テーマでは反映されない
○ 「ナビゲーションメニュー」の、構造、ラベル文字列、URL
○ 「サイト基本情報」の、サイトのタイトル、キャッチフレーズ
○「固定フロントページ」の「フロントページ」や「投稿ページ」の設定
☓ OnePress 独自の「セクション」内の設定。カウンターの初期値とか、各セクションのタイトル名とか、Font Awesome のフォント指定とか。
☓ OnePress 独自の、ヘッダーの配色、リンクの配色など
【追加情報】
OnePress子テーマ有効化後に【ダッシュボード → 外観 → カスタマイズ】でカスタマイズした、OnePress独自の「セクション」内の設定は、子テーマでのみ有効。
逆に、親テーマに切り替えた後に設定した OnePress 独自の設定は、子テーマでは反映されない。
(OnePressの場合) 親テーマと子テーマで、設定の保存場所が違う??
これは、TwentySixteen テーマの場合も同様で、子テーマと親テーマの設定は独立して保存されているようです。
【推測】
→ メニューやタイトル名など、WordPress の general な設定は、テーマの種類や親子テーマとは関係ない場所に独立して保存される。
→ テーマ独自の設定は、テーマの種類ごと、親子テーマごとにそれぞれ保存される。
【対応策】
親テーマのダッシュボードからはなにもカスタマイズしないようにする。
【さらなる疑問点】
親テーマOnePress がアップデートされた時、
子テーマの style.css を編集した内容は保持される。これが子テーマの利点。
MAMP/htdocs/wp/wp-content/themes/onepress_child/style.css
子テーマの 【ダッシュボード → 外観 → カスタマイズ】で変更した内容は消えてしまわないのか?
【検証】
OnePress独自のカスタマイズ部分を変更してみて、テーマの削除後でもそれが維持されるかを調べる。
【ダッシュボード→テーマオプション→サイト配色→メインカラー】がわかりやすい。
(1) 親テーマOnePress でメインカラーを 赤(#ff0000) に変更
(2) 子テーマOnePress に切り替え。(1) の変更は適用されていない
(3) 子テーマOnePress でメインカラーを 青(#0000ff) に変更
(4) 親テーマOnePress に切り替え。(3) の変更は適用されておらず、(1) の変更が維持されている。
(5) 一時的に TwentySixteen を有効化。→ 親テーマOnePress を削除。
(6) MAMP/htdocs/wp/wp-content/themes/onepress/ が削除されていることを確認
(7) 親テーマOnePressがなくなったので、子テーマOnePress は選択できない。まだ TwentySixteen のまま。
(8) 親テーマOnePressを 新規インストール。
(9) MAMP/htdocs/wp/wp-content/themes/onepress/ が存在することを確認
(10) 親テーマOnePress に切り替え。(1) の変更が維持されている。
(11) 子テーマOnePress に切り替え。(3) の変更が維持されている。
【推測】
子テーマOnePress の【ダッシュボード → 外観 → カスタマイズ】で変更した内容は、
親テーマOnePress の【ダッシュボード → 外観 → カスタマイズ】で変更した内容とは区別されている。
おそらく、それぞれが SQL に保存されている。
【あとがき】
親テーマOnePress の functions.php → 139行目あたり。
function onepress_scripts() の
wp_enqueue_style( ‘onepress-style’, get_template_directory_uri().’/style.css’ );
↓↓↓ 書き換えるのを忘れないように
wp_enqueue_style( ‘onepress-style’, get_stylesheet_uri() );