子テーマの仕様について（子テーマのCSS等の設定がうまく反映されない）

最近子テーマを有効にすると表示が崩れるってのをよく聞きますが、どういう状況でそうなるのかがあまりピンときません。
例えばデフォルトの親テーマを入れてカスタマイズや設定をしない内に子テーマを入れて表示してみたら、きっと親テーマと何も変わりなく表示されると思うんです。なぜなら、親テーマの機能を利用して子テーマは表示をするわけで、cssで言えば、同じセレクタのプロパティを子テーマで上書きしているだけですから、そのほとんどは親テーマの機能なわけです。

質問の、親テーマと小テーマだと、ウィジェット･カスタマイズの設定の変更はどちらが優先されますか？は試したことがないのでどちらが優先されるのかわかりませんが、そもそも親テーマに設定をする必要があるのかどうかがまず疑わしいですよね。

Simplicityのデフォルトの機能は親テーマが持っており、それをカスタマイズして使いたい場合は子テーマを使うわけですから、子テーマだけで完結させたら本来は良い話です。

ウィジェットの設定等はおそらくデータベース等(optionsテーブルだったか)に保存されています。おそらく親子テーマそれぞれに保存されているかとは思うんですけれども、子テーマの時は子テーマのものが呼び出されるんじゃなかろうかと思います。
カスタマイズした時にウィジェットを追加したりした場合、それを呼び出す必要があると思うので。

そこで、次の質問ですが、

> 小テーマを有効化すると、モバイル表示の形（幅）には
> なっているのですが、記事の所だけPC表示のように横に
> 広がってしまいます。（ページを横にずらすとでてくる）

これについては、親テーマと子テーマのウィジェットがそれぞれ同じ設定なのかどうかがまず1つと、スマホの時にだけ呼び出している何かしらの要素(プラグインや、アドセンス等)はあるかないかを教えてもらいたい感じです。

横に広がる場合、折り返しができない要素が#mainを押し広げている可能性があるからです。
例えばフッターなどにfacebookやtwitterの何かしらが入っていたりして、そのフッターを表示しているとか。
#main(#body-in)の部分は正しく表示されていても、それ以外で#containerを押し広げれば、スマホの時は#mainの幅が100%なのでつられて記事の幅も大きくなったりします。

要因はいろいろ考えられますが、子テーマでどういうカスタマイズをしたのかと、広がる時にどのような設定がページの中に入っているかがわからないと解決策の提示は難しいのではなかろうかと思います。

なので、ひとまずサイトを見せてもらうのが良いかも知れません。

長文ついでにと、ちょっと思いついたので書いておきますと、親子テーマの関係は、ファイナルファンタジー11などと似ているかと思います。
ファイナルファンタジー11は、MMORPGで、本体と拡張パックがあって、本体だけでも遊べますが新しいシナリオやキャラクターを使おうとすると拡張パックが必要になってきますよね。

あぁそう言えば信長の野望の拡張パックセットも同じようなものでしょうか。

これらは拡張パックだけでは遊べません。

本体がなければ遊べない = 親テーマがないと子テーマは機能しない

何じゃなかろうかと思うわけです。信長の野望の拡張パックは確か、武将のデータをいじれる奴がありましたよね。子テーマはまさにそれです。

親のデータはそこにはありますが、拡張パックでイジった武将データは拡張パックを有効にしておけばゲームの中で使えるようになります。子テーマは正にそれなのです。
ただ、子テーマのfunctions.phpは、親テーマの機能を解除して、再登録することで新たに機能を変えることもできます。ここらはちょっと違いますが、大筋ではまぁ同じと思っても良いのではないでしょうか。

そう考えると、子テーマがどういう機能を果たしているかを少しはわかりやすく感じてもらえるのではないかなぁと思ったりします。

Hidekichi さん回答ありがとうございます。

＞親テーマと子テーマのウィジェットがそれぞれ同じ設定なのかどうか
カスタマイズ・ウィジェットの変更は子テーマで行ったので、親テーマは初期状態のままです。ただし、完全レスポンシブのところは親・子テーマともにチェックを入れています。（よく分からなかったので）

＞スマホの時にだけ呼び出している何かしらの要素
初心者でよくわからないので場合分けのようなものはしていません。PCとモバイル表示の内容は同じものです。

プラグインは「WordPress Popular Posts」だけ後から追加しましたが、今はとりあえずすべて停止しています。

ちなみに、フッターも何も触ってないです。

http://animekoku.com

追記の親子テーマの解説ありがとうございました！とてもよく理解できました。

まず気づいた点から順番にレスしていきます。

子テーマstyle.cssの先頭に、

@charset “UTF-8”;
@import url(“../simplicity/style.css”);

これが入ってますか？

@import urlは、親テーマのstyle.cssを先頭で読み込むということです。これがないと、子テーマでは子テーマのstyle.cssに書いてある内容しか反映されません。先頭に親テーマのstyle.cssを読み込むようにしてあることで、親テーマのスタイルを反映し、子テーマでそれを上書きするわけです。

信長の野望拡張パックって言うのはこれのことです。

まずここから調べてみて下さい。

続きまして、トップ画像下の余白をブラウザの幅によって正しく動作させるためにちょっと手を入れてみました。

サンプル: 縦の比率で背景画像をぴったり拡大縮小 | codepen

#h-topにmin-heightが設定されているようですが、#headerの高さをブラウザの幅に連動するように自動計算させれば、中身はbackground-size: coverで自動的に拡大縮小してくれます。

ちなみにhiroさんの背景画像のサイズで高さを自動計算していますので、背景画像の縦横の比率によってpadding: 0 0 x; のxの値を変える必要があります。

#naviの上下マージンは好きに設定して下さい。

ひとまずサイトのトップ回りあたりについて。

あと、何がどうなっているのかイマイチアレなんですけれども、ブラウザ幅が440pxの時のメディアクエリが無さそうに思うんですが、メディアクエリの740pxが肩代わりしているとしても、

@media screen and (max-width: 740px){
  #main {
    width: 100%;
  }
}

このように、#mainを100%にしないとスマホの画面からはみ出ます。元々、#mainには、width:740pxが入っており、メディアクエリを設定しないと、このwidth: 740pxがずっと続くのでスマホの時にはみ出しっぱなしになります。

なので、子テーマstyle.cssでも良いですし、何ならmobile.cssとかまぁどこでも良いですが、メディアクエリを追加するのが良いかと思います。
現在は、これら記述が無いようなので、どこでもよいわけですが、本来はresponsive.cssあたりのが良いですかね。

それか、mobile.css自体が読み込まれていないのかも知れません。
背景画像の問題などもありますが、再度親テーマのインストールをされて、子テーマも併せてインストールして再度構築し直すのが手っ取り早いとは思いますが、ひとまずcssで何とかなりそうな気もします。

テーマの再インストールをされる場合は、必ず手を入れたファイルのバックアップもとっておいて下さい。元に戻せなくなりますので。

わいひらさん、それはXdomainのバナーかと思います。
スマホの時だけ自動で入ります。無料のサーバーなので、アレなんですよ(笑)
PCの時には表示されない仕様になりました。

Hidekichi さん、わいひらさん、回答ありがとうございます。

＞@import urlこれが入ってますか？
入ってませんでした。読み込んでなかったという事なんですね。

＞トップ画像下の余白をブラウザの幅によって正しく動作させるためにちょっと手を入れてみました。
このことも後から聞こうと思っていました。本当に助かります。ちょっと分からないのですが、リンク先のCSSの方を子テーマのstyle.cssに追記でいいですか？（それだけで空白がなくなったので合ってるのかなと。）

＞padding: 0 0 x; のxの値を変える必要があります。
これから画像を変えることがあると思うので、詳しくお聞きしたいのですがpadding(余白？）のｘの値はどうやって算出すればいいのでしょうか？

どうも親テーマにmobile.cssが見当たらないのですが、あるのは子テーマだけですか？
（とりあえず子テーマのresponsive.cssに書いてくださってたのを追記しました。）

＞Xdomainのバナーかと思います。
その通りです。よくご存じですね（笑）

理解していないことが多いので返信遅くなり、また質問攻めで申し訳ありません。

そういえば、モバイル表示のメニュータイプは「アコーディオンツリー」のはずなので、そこから変？かもしれないです。

> リンク先のCSSの方を子テーマのstyle.cssに追記でいいですか？

サンプルのcss欄のview Compiledボタンを押して表示されるcssの10行目以降が必要な部分です。
上の方に書いてあるものは、まずSimplicityの親テーマのcssを読み込むものと、#headerに背景画像を設定するためのものですので必要ありません。

#header部分の説明からしますと、まずheightを0にします。高さはなくなりますがpaddingの3つ目の値がpadding-bottomの値になるので、ここを設定することで高さが生まれます。
background-sizeをcoverで、これまでの設定を上書きします。

coverの設定は、「縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する」というようなものです。これによって#headerいっぱいに画像が広がる設定になります。
先ほど#headerの高さをpaddingで作りましたので、#headerの縦横比を維持しつつ(padding-bottomが%なのでブラウザの横幅に対する縦の比率で常に表示されます)、その中を背景がいっぱいに広がります。

#h-topはmin-heightが設定されていましたので初期化してます。

#naviについては、マージンがないので上下に10pxスペース(マージン)を作るようにしてあります。

> padding(余白？）のｘの値はどうやって算出すればいいのでしょうか？

背景画像のアドレスから画像の元々のサイズが1070x300pxとわかりました。横が100%の時に縦が何%であるかがわかればよいので、1070:100 = 300:xと言う比率になって、30000/1070 = 28.037383178なんですが、まぁ小数点の良い感じの所で丸めてしまえばよいかと28.037%で設定してます。本来なら、28.037383178%で良いかと思います。

> 親テーマにmobile.cssが見当たらないのですが、あるのは子テーマだけですか？

親テーマにもmobile.cssはあると思います。前にわいひらさんがファイルの整理をしたと言っていたような気がするので、どこかのフォルダに移動しているかも知れませんが、たいていはテーマをダウンロードしたzip解凍のフォルダにすぐわかるように入っているかと思います。

> とりあえず子テーマのresponsive.cssに書いてくださってたのを追記しました。

もしそのcssが有効になっている場合は、FirefoxあるいはChromeでF12からデベロッパーツールのパネルを開き、左側htmlの部分で、#body-inの中の#mainをセレクトして、パネル右側の各セレクタのプロパティが表示されている部分に、ブラウザの幅を狭めていくと、@media screen and (max-width:440px)の時の#mainのwidthが100%となり、元々の#mainのwidth: 740pxとかが取り消し線を引かれるような表示になるはずです。

あと一応、確認用に新しく最新バージョンのテーマをダウンロードして解凍し、その中の、responsive.cssの中身の確認やmobile.cssの有無を現在のそれぞれのcssと比較確認した方が良いかも知れません。ご自身が後で書かれた内容以外はデフォルトと言えると思うので、足りない分は追記するなどしてそれが正しく動作するか確認するのが良いかと思います。

ひとまずこれらを試してみて、正しく動作しているかを確認しつつ、モバイルのアコーディオンメニューの動作やスタイルが正しく動作しているかを確認するのが良いかと思います。
なんなら、親テーマにカスタマイズしてある内容(style.cssで追記したもの)は、子テーマに移植しても良いかと思います。そこで、子テーマを有効化してこれまでと同様の表示か正しく動作しているようであれば親テーマを再インストールしても良いですし。

#mainの中身が、タブレットサイズになってもまたスマホサイズになってもレスポンシブに動作しなかったものをするように、前のサンプルをアップデートしました。

サンプル: 前のサンプルのアップデート | codepen

この方法では、#mainの中にあるリストアイテムをcssのflexで2列にして、画面幅がスマホサイズになると1列になるようになっています。
これらを実装するために、カスタマイザーのリストスタイルからデフォルトのリスト表示にして下さい。
※ 2列のものはjQueryで2列にしてあるため、style.cssでいじっても変更されません。cssよりもjQueryのタグ直打ちのstyleが優先されるため

現在のものでも、メディアクエリで440pxの時に、#body-inと#navi-in、及び#body-inの中にある#mainをwidth: 100%にすれば、デフォルトの動作になるかと思いますが、flexでやったので、まぁものは試しに。
jQuery(リストスタイル2列)を利用せず、cssだけでやる方がもちろん高速に動作するかと思います。

前回のサンプルの説明同様、css欄のview compiledボタンを押してcssに変換されたものの10行目以降が必要になります。

このサンプルのcssでは、デフォルトでhiroさんのサイトのstyle.cssを読み込んでいます。なので子テーマstyle.cssに書くのはview compiledボタンで変換されたcssの10行目以降になり、メディアクエリ等を別のresponsive.cssやmobile.cssに書かなくても動作します。

が、例えばテーマのアップデートや、修正によりresponsive.cssやmobile.cssにメディアクエリが追加された場合は、後から読み込むファイルの方が優先されるため、子テーマのstyle.cssのメディアクエリが効かなくなる可能性はあります。

・子テーマstyle.css(親テーマのcssをインポート)
・responsive-pc.css
・mobile.css
・headタグのインラインスタイル
・jQuery等のタグ直打ちstyle

cssはこのような読み込みの順番かと思うので(responsiveとmobileが逆かも知れない)、これらはサイトのheadタグを見て、どれが一番優先されているかを確認して、優先される所にスタイルを記入すれば動作するはずです。

よって、今回のはスマホサイズやらのメディアクエリ自体が現在サイト内に無いので子テーマで動作しますが、それはこれまでの書き込みのようになっている場合(mobile.css等が無いということ等)に限ってです。
各ファイルを正しく修正した場合は、その修正箇所にないスタイルは反映されますが、paddingなどはデフォルトのものが反映されるかも知れません。

また、サンプルは、hiroさんのサイト全体をコピペしたものではなく、#mainと#sidebarをコピペしただけなので、footer等がある場合の動作は確認してませんのであしからずご了承下さい。

ぶっちゃけて書くと、view compiledボタンを押して10行目以降をコピペしたら良いと言うことになります。
ただし、現在の子テーマstyle.cssの@charsetの部分は記入に間違いがあるようなので、codepenのcss欄にある@charset “UTF-8”;をコピペしなおしたほうが良さそうです。
これは、css内にある日本語を文字化けせずに表示するためのものです(コメント部分等)。

現在、

 @charset gUTF-8h;
 @import url(g../simplicity/style.cssh);

こんな感じになってます。おそらく全角のクォート(shit+7)が使われているのではなかろうかと思います。また最初のサンプルの時の@importのアドレスが利用されていますが、@importのアドレスは、おそらく

../simplicity/style.css

でイケるかと思います。それで動作しない場合のみ、codepenの@importのアドレスを利用して下さい。まぁどっちゃでも結局同じファイルを参照するわけですが。

サンプルのcodepen画面は、各コードと実行結果の画面の境界を移動させてレスポンシブに動作しているかを確かめられます。画面上にコード、下に実行結果の画面の場合はブラウザを、左右に分かれている場合は境界線を動かして、その動作を確認してみて下さい。

× shit+7
◯ shift + 7

@charsetと@importはクォート全角(おそらく)の事もあって動作しなかったように思います。
また、それらはサンプルの提示にコピペされたものと重複しているので、ひとまず元からあったものは行ごと削除して、アドレスを絶対アドレス(フルパス、httpから書いてあるもの)を相対アドレス(../とあるもの)に変えておけばよいのではないかと思います。

Hidekichiさん、わいひらさん、度々ご迷惑をおかけしております。

@charset gUTF-8h;
@import url(g../simplicity/style.cssh);

謎の文字が追加されるのは何故なのでしょうか。

@charset “UTF-8”;
@import url(“../simplicity/style.css”);

これがstyle.cssにある内容です。

頭がごちゃごちゃになったのでバックアップを取ってインストールし直し
再度、まとめて詳細を伝えておきます。
そもそも、子テーマ作成時の自分で書いた二つのファイルが怪しいように感じてきました。

http://animekoku.com/2015/12/16/post-6/

おかしいとこがあればご指摘をお願いします。

あまり関係ないかも知れませんが、もしローカルのPCで利用されているテキストエディターなりのソフトの改行(文字)コードがwindowsのコードになっていたりしておかしくなっているのかも知れません。

wordpressを含め、インターネットで扱うほとんどのファイルは、利用されているサーバーにアップロードして動作するものですから、その環境に合わせておくのがベターです。
たいていはUTF-8(BOM無し)あたりを選択しておけば良いかと思います。

参考リンク: 文字コードと改行コードについて

後は、利用されているエディターの各コードをどのように変えるかをググってもらえれば、現在どうなっていて、どのように設定し直せばよいかがわかるかと思います。

#34676のリンクにある中では、functions.phpに書かれた内容が不必要かと思います。

例えば、Simplicityの親テーマstyle.cssと子テーマstyle.css等以外に、別の外部ファイルがあったとして、それを適用したい場合はwp_enqueue_script(style)で読み込むのは間違っていません。
ただし、それらの依存関係をうまく設定しないと、どのタイミングで読み込むか等の問題が発生します。

cssは基本的にjavascript等よりも前に、できるだけ速いタイミングで読み込ませるのが良いとされていますが、同じセレクタの同じプロパティは後から読み込んだものが有効になります。

親テーマのstyle.cssを読み込んで、子テーマがあるというのは、親テーマの同じセレクタの同じプロパティを上書きするためにあるようなもので、その場合は後から読み込んだ子テーマのstyle.cssが有効になりますから、カスタマイズが成立するわけです。

親テーマstyle.css
別のカスタマイズcss
子テーマstyle.css

と読み込む場合、例えば、#testに対して違うfont-sizeがそれぞれのファイルに設定してあるとします。

#test {
  font-size: 16px; /*親テーマstyle.css*/
  font-size: 24px; /*別のカスタマイズ.css*/
  font-size: 14px; /*子テーマstyle.css*/
}

同じセレクタですから、ファイルの読み込み順で上記のように書くのと同じです。そうすると、この場合は、子テーマのfont-size:14pxがブラウザに出力されるわけです。

そうなると、別のカスタマイズcssは不必要ってことになりますよね？
例えば子テーマで設定してあるfont-sizeをあるページだけ別のカスタマイズcssを読み込んで変更したい場合は、

親テーマstyle.css
子テーマstyle.css
別のカスタマイズcss

このようにファイルを読み込むべきです。そういう時に、wp_enqueque_script(style)を利用して、子テーマのstyle.cssが読み込まれた後に別のカスタマイズcssを読み込むというような依存関係を作るわけです。

functions.phpに書かれた内容から考えると、

親テーマstyle.css
子テーマstyle.css
親テーマstyle.css

と読み込んでしまっていたのかも知れません。そしたら子テーマは読み込まない(親テーマで上書きされてしまってる)と言う設定になっていたかも。ただ、これが機能していたかどうかはわかりませんけども。

子テーマが動作しなかったのは、おそらく文字化け部分が関係しているかと思います。

ご迷惑をおかけしました。
最初の質問の「子テーマにするとモバイル表示の一部が横に広がる」のは、子テーマのstyle.cssの内容の文字コードがUTF-8でなかったことと、何も考えずにコピペしたら@import url(“../simplicity/style.css”);の「”」が大文字になっていたため、そもそも親テーマのレスポンシブやモバイルのファイルが読みこまれてなかったことが原因でした。（おそらく後者ですよね）

続いて質問した、「親テーマ内にmobile.cssが見つからない」というのは消したのではなく、見落としていただけみたいです。

また、別件のヘッダー画像以下のの空白は前のサイトでも悩んでいたのでとても感謝しています。（子テーマを使わずに親テーマ内の「ロゴを画像にする」でごまかしてます）

わいひらさん、解決前にInstant WordPressでローカル環境を作ろうとしたのですがリンク先解説文の「インストールフォルダの中の「InstantWP.exe」を起動すると次のようにソフトが立ち上がります。」の部分でエラーがでてうまくいかなかったので、一回だけしたことがあったXAMPPでしました。（環境の問題というよりは僕のミスでしたが…）

解決まで長らくありがとうございました。
またお世話になるかも知れないのでその時も何卒よろしくお願いします。