子テーマ親テーマについて

親テーマが全てなんです。
昔は、親テーマ(子テーマがなかったので単純にテーマと言ってましたが)を直接カスタマイズするわけですが、アップデートしたらもちろん無くなります。なのでカスタマイズした内容をバックアップしておき、アップデートのたびに修正を行っていたわけです。

これはあまりにも面倒だということで、子テーマという機能が追加されたかと思います。

どういうことができるかというと、一部例外もありますが、親テーマにあるファイルを子テーマにコピペしたとした時、同じファイルなら子テーマの方を優先して使おうと言う考え方で大まかにはあっているかと思います。

ただし、内部的にはマージ(合わせると言うか混ぜるというか)しているかと思います(場合によってはオーバーライド？)。例えば、子テーマstyle.cssの最初に親テーマのstyle.cssをインポートしてますよね？

親テーマのスタイル
子テーマのスタイル

と言う順番でcssをデザインすることになります。cssの場合、同じセレクタのプロパティは、後から読み込むものが優先になります。

親テーマに、

#site-title a {
  color: black;
  font-size: 14px;
}

とあったとして、子テーマで、

#site-title a {
  color: red;
}

こうあれば、

#site-title a {
  color: black;
  font-size: 14px;
  color: red;
}

こう書いているのと同じです。この場合、colorはredが適用され、親テーマのfont-sizeは継承されます。

このようにして、子テーマで変更を加えると親テーマの内容を上書きすることができ、親テーマをアップデートしても子テーマは残りますからカスタマイズしたデザイン等はそのまま利用し続けることができるわけです。
もちろん親テーマの仕様変更等で、子テーマのカスタマイズが原因でおかしな表示になることはある場合もありますが、子テーマを1回デザインしなおせば、仕様自体が早々変わるわけではないだろうと思うので、またしばらくそのまま利用し続けることができるという感じです。

> 子テーマにスタイルを書き込んでも親テーマに
> 反映されていないので疑問に思いました。

親テーマだけを利用する場合は、子テーマは読み込まれないので、子テーマで行ったカスタマイズは子テーマにあるだけです。なので、デフォルトの状態を見たい場合等は親テーマを有効にして確認できます。

子テーマは必ず親テーマがないと動作しません。つまり、子テーマだけでは有効化すらできないのではなかったかと思います。これらは、それぞれのstyle.cssに

/*
*	Theme Name: Simplicity child
*	Template: Simplicity
*/

こんな感じで書かれています。親テーマの場合は、作成者とかバージョンの情報等も書いてあるはずです。
上記なら、親テーマはSimplicityで、子テーマはSimplicity-childですと登録してるわけです。
子テーマだけの時は、親テーマが見つからないのでwordpressが警告というかメッセージを出すかと思います。親テーマが無いぜみたいな感じで。

なので、style.cssの最初に書かれてるこれらを消すとちょっとややこしいことになるので消さないようにして下さい。

また、functions.phpに書かれているような関数の場合は、親テーマの設計次第で子テーマでオーバーライド(上書きして機能を変更する)と言うのができたりもしますが、これは関数の設計次第です。

function abc(){
　/*何かしらの処理*/
}

こういうのがあった場合、親テーマの処理をいちいち読むのも面倒なので、子テーマで

function abc_ex(){
　/*何かしらの処理*/
}

などとして、新しく関数名を変更して作るほうが重複しなくて良いかも知れません。もちろん使用している箇所でもabc()をabc_ex()に書き変えないとアレですけどね。

どういう時にこういうことをするかと言いますと、例えばjQueryを読み込む場合、デフォルトではWordpress自前のjQueryを読み込みますが、バージョンが古くなったり、あるいは面倒な制限があったり、また外部から読み込むほうが速い場合もあったりするので、Googleのライブラリ等からjQueryを読み込みたいとした場合に、親テーマのjQueryの読み込みを直接編集したりすると、アップデートでそのカスタマイズ無くなってしまいますので不便です。
なので子テーマfunctions.phpにjQueryを読み込む処理を外部スクリプトに変えて、新たに処理させるわけです。

まぁここらは色々とプログラム的にアレな場合もあるので、すぐにはどうのという部分ではないかも知れませんが、スタイルシートについては、同じセレクタのプロパティであれば後から読み込むのが優先されると言うルールを覚えておいて下さい。
それだけである程度は問題に対処できると思われます。

Hidekichiさん

ご返信有難うございます。

＞親テーマだけを利用する場合は、子テーマは読み込まれないので、
＞子テーマで行ったカスタマイズは子テーマにあるだけです。

子テーマで追記したスタイルははどうやったら親テーマに適用出来ますでしょうか。

あと、子テーマにある「header-insert.php」に外部ファイルのJavascriptやcssを読み込ませる記述をしているのですが、こちらも反映されません。
親テーマのヘッダーに直接記述すればもちろん反映されますが…。

文面から察するに、Simplicityの親テーマと子テーマはwordpressに入れてあるとして、おそらくは、テーマで子テーマを有効化されていないのではないのではなかろうかと思います。

子テーマには親テーマが必要ですが、親テーマはそれ単体で動作します。

つまり、現在Simplicityが動作しているとすれば、親テーマが有効になっていて、子テーマはインストールしてあるだけと言う感じではなかろうかと思ったりも。

wordpress→ダッシュボード→テーマ から、Simplicityの子テーマをクリックして、出てきた画面で有効化をすれば子テーマが有効になります。

> 子テーマにある「header-insert.php」に外部ファイルの
> Javascriptやcssを読み込ませる記述をしているのですが、
> こちらも反映されません。

おそらくここらも、子テーマを有効化すれば、カスタマイズした内容に間違いがなければ反映されるのではないでしょうか？

わいひらさん

ttp://www.cl-link.com/?page_id=860
(現在子テーマ有効)

Hidekichiさんに丁寧に説明して頂いたのである程度は理解できました。
わいひらさんが貼ってくれたリンクもよく読みました。
その上で以下の二つが特にわかりません。

・もともと子テーマのスタイルには親テーマのスタイルを読み込む指定がしてあるけど見た目が全然違う
(inportが反映されていない？)

・子テーマのheader-insert.phpにスクリプトを記述しても親テーマには反映されない
(親テーマのheader.phpに直接記述したら反映される)

Hidekichiさん

一応子テーマは有効化されてると思うんですが、上記のURLでご確認頂けたらと思います。

>> 子テーマにある「header-insert.php」に外部ファイルの
>> Javascriptやcssを読み込ませる記述をしているのですが、
>> こちらも反映されません。

>おそらくここらも、子テーマを有効化すれば、カスタマイズした内容に間違いがなければ反映されるのではないでしょうか？

カスタムした内容は間違ってないと思います。
根拠は親テーマのheader.phpに記述すると親テーマでスクリプトが動くからです。

子テーマは間違いなく有効になっています。

> ・もともと子テーマのスタイルには親テーマの
> スタイルを読み込む指定がしてあるけど見た目が全然違う

これはちょっと違います。前のレスで親テーマが全てと書きましたが、現在の例えば記事のタイトル等は親テーマのcssが動作しています。
どういうことかというと、親テーマのcssを拡張するのが子テーマのstyle.cssなのです。なので違うどころか子テーマのstyle.cssは何も書かなければ親テーマのcssが適用されます。

現在、記事のタイトルはcolorが#333で親テーマで設定されていますが、子テーマに、

.entry-title {
    color: red;
}

とすれば、記事のタイトルは赤になるでしょう。これは親テーマの設定を子テーマが上書きしたからです。子テーマはこのようにして利用します。

つまり、子テーマはなくてもデザインされているのは親テーマがあるからで、親テーマのstyle.cssを子テーマの先頭でインポートしているから機能しているわけです。

ただし、何が問題かはわかりませんが、親テーマのスタイルが重複して読み込まれています。これは修正しないといけません。

また他にも問題があります。
おそらくは、header-insert.phpで外部からスクリプト等を読み込むような設定になっているので重複しているのだろうと思うのですが、jQueryもwordpressが自前で持っているものと、jQuery1.5あたりがダブルで読み込まれています。Simplicityの子テーマのcssもそうです。

これらは無駄なリソースなのでどちらか一方にするべきです。またjQuery1.5で歯科動作しないような何かしらのスクリプトが利用されている場合は、最新のjQueryでも動作するような別のスクリプトを探すべきです。

またjQueryとcssは、 linkタグで書かずに、wordpressのwp_enqueue_scriptあるいはstyle等を利用して読み込むようにします。なぜなら、依存関係を作れるからです。
jQueryが必要なスクリプトの場合は、jQueryが読み込まれてから該当のスクリプトを読み込むと言うような動作をしないといけません。それらを行うのがwp_enqueue_scriptです。

親テーマで動作を確認されたようですが、誤動作の原因になりかねませんので正しく動作するように修正しておく必要があります。

ただし、Simplicityとは関係ない範囲でcssを拡張したい場合などはlinkタグも有効です。
header-insert.phpはhead閉じタグ手前で読み込まれますから、子テーマ等で修正できないスタイルがある場合(子テーマstyle.cssよりも後で読み込まれるcssがある時)は、外部のcssをheader-insert.phpで読み込むのは有効です。

しかし、ここにも問題があって、cssはできるだけhtmlの最初の方で読んでおくほうがサイトの高速化につながります。また上書きに次ぐ上書きの場合は体感できるほどではないにしろ速度低下につながると思うので、なるべくなら子テーマstyle.cssあたりで解決したい所です。

jQueryの場合は、自分のサイトですが [続報] fopen,file_get_content等がそのままでは利用できないサーバーでWordPressのjQueryをCDNにする方法で書いてありますので参考までに。

またフォールバック等でちょっとややこしいこと、あるいはちょっと手間がかかる方法を採用していますので、少し記事の内容も読んで頂けたらと思います。

> 子テーマのheader-insert.phpにスクリプトを記述しても親テーマには反映されない

子テーマのheader-insert.phpに何かしら書いて、子テーマが有効になっていれば、もちろんそれが有効になります。スクリプトの内容が正しくても間違っていても、Simplicityは子テーマのheader-insert.phpを読み込みます。

考え方として、親テーマ、子テーマと分けて考えるのでややこしいのではないかと。親だけでもSimplicityですし、親・子あってもそれはSimplicityです。しかし、子テーマだけではSimplicityにはなりません。
では子テーマとはなんぞや、というと親テーマを拡張する(カスタマイズする)ためのものと思っておけばよいのではないかと思います。

親テーマにカスタマイズをして、アップデートのたびに親テーマを全部バックアップし、カスタマイズした内容をアップデート後の新しいSimplicityにコピペ祭りで適用すれば、それはそれで問題ありません。が、面倒臭いだけですよね。カスタマイズした部分を別でもっておけば、親テーマをアップデートしても内容は消えない、それが子テーマであると、その程度に考えておけばよいのではないかと思います。

サイトを拝見しましたが、色々とカスタマイズしすぎておかしくなっているようですね。

致命的なのがナビゲーションバーのメニューをクリックするときちんと?page_id=xxxのURLに飛ぶ場合と各メニューページに移動はするがURLがwww.cl-link.comのままになったり、ナビゲーション自体が全く機能しなかったりといった不具合が出ています。

cssやスクリプトが子テーマに反映されない云々もそうですが、まず正常な動作に戻すことが先決です。

お店のサイトの様ですが、ローカル環境でカスタマイズのテストはされてますか？
ますはローカルでプラグインはMultibyte Patchのみ有効にし、何もカスタマイズしていないSimplicityの子テーマで正常動作を確認し、そこからプラグインを1個づつ追加、動作確認→プラグインすべてを有効にしても問題なければカスタマイズ→動作確認→次のカスタマイズという風に1つのカスタマイズを行ったら正常動作するか毎回確認するようにして下さい。

商売としてサイト運営されているなら、尚更カスタマイズは慎重に行う必要があると思います。