質問: WordPressにてHTML,CSS,PHPから自分でオリジナルのテーマを作成しました。 ”カスタマイズ”から確認するとデザインが崩れてしまいます。 (1)ロゴ「MOFULOG」がなぜか小さく表示される。検証ツールを使うと、 <htmlファイルの場合> ``` MOFULOG ``` <”カスタマイズ”から見た場合> ``` MOFULOG ``` となぜか表示が全く違う。どうやら「サイトの基本情報」→「サイトのタイトル」を編集することでロゴを作成できるようですが私が打ち込んだhtmlとcssはどこに行ったのでしょう・・・ (2)またモバイルでのみ表示されるはずのハンバーガーメニューが"カスタマイズ"では常時表示されてしまう。 →cssでモバイル以外の場合はdisplay.noneで隠しているのになぜ? (3)"カスタマイズ"では、謎の「mofulog」の文字と「古い記事へ新しい記事へ」の表示がされている。 (4)"カスタマイズ"では「検索するテキストを入力・・・」が消滅している。 細かい解答でなく、なぜcssが反映されなくなっているかだけでもご教示いただけると大変助かります。なお「wordpress css 崩れる」などでググっていますがいまいち解決策が見当たりません・・・ 前段階では全てのcssが反映されていなかったのですが、ググってphpを追加することで解決し今の状態になっております。 <htmlファイルをChromeで開いた時・正常> <カスタマイズを押した時> HTML,CSS,PHP コードが膨大、またどこを開示するべきかわからないためどの言語のどの部分が見たいとコメント頂ければ別途掲載いたします。 WordPress 4.9.7 MAMP ATOM
回答: 「ダッシュボードで外観を押した時」「テーマの詳細を押した時」に表示されるのは、単にテーマ作成者が用意したそのテーマのスクリーンショットなので、例えば `screenshot.png` 等のファイル名でスクリーンショット( gyazo の 1枚目の画像的なもの)をオリジナルテーマのディレクトリに設置して見てください。 > > テーマのスクリーンショットを作ります。ファイル名は screenshot.png と付け、テーマディレクトリに保存する。スクリーンショットはテーマのデザインを正しく反映し、PNG形式で保存する。推奨する画像サイズは 880x660。実際には 387x290 のサイズで表示されますが、画像サイズを2倍にすることで画面解像度の高い HiDPI ディスプレイにも対応できます。 > > -- https://wpdocs.osdn.jp/テーマの作成 > > > 「カスタマイズを押した時」の挙動について現状の情報だけでは確かなことは言えないのですが、 `header.php` で `style.css` を読み込む時の link タグが気になります。 「カスタマイズを押した時」に表示されるプレビューの iframe 内で、最終的に出力されている HTML の link タグをご確認ください(例えば Google Chrome であれば右クリックメニューの中に「フレームのソースを表示」の様なメニューがあると思うのでそこから最終的な HTML を確認できると思います)。 `get_stylesheet_uri()` や `bloginfo('stylesheet_url')` で `style.css` を特定している場合は、下記のようになっているはずです。 ``` ``` あるいは、直接 `style.css` を参照しているなら下記のようになっていると思います。 ``` ```