Onepress子テーマへの軌跡


子テーマの作り方で参照したページ

参照(1) 子テーマの概念など初心者向け情報

WordPressにおける子テーマの作り方
WordPressはテーマ内のソースコードを読み込むことでWebサイトを生成します。 なのでテーマ内のソースコードを変えることで、Webサイトのレイアウトを変更することができます。ですがそうすると元の

参照(2) @import は使わない。style.css と functions.php の最低限の記述

functions.phpを使ってますか?WordPress 子テーマの作り方間違ってたのに気づきました。

参照(3) WordPress 公式情報
子テーマ – WordPress Codex 日本語版

参照(4) 親テーマがスタイルシートを読み込む方法の違い

WordPress 子テーマで親テーマのスタイルシートを読み込む2つの方法

参照(5) get_template_directory_uriとget_stylesheet_directory_uriの違いについて

get_template_directory_uriとget_stylesheet_directory_uriの違い
get_template_directory_uriとget_stylesheet_directory_uriの違いはWordPressテーマにあり、前者は有効化したテーマか親テーマのディレクトリURL、後者は有効化したテーマのディレクトリURLを取得します。

上記ページを参考に、最低限の子テーマファイルを作成

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

公式Facebookページに
いいね!しよう

公式Twitterページを

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です