

WordPressにてHTML,CSS,PHPから自分でオリジナルのテーマを作成しました。  
”カスタマイズ”から確認するとデザインが崩れてしまいます。

(1)ロゴ「MOFULOG」がなぜか小さく表示される。検証ツールを使うと、

＜htmlファイルの場合＞

[code]

    <a href="file:///Users/kuranishifumi/Desktop/mofulog/index.html">MOFULOG</a>
[/code]

＜”カスタマイズ”から見た場合＞

[code]

    <a href="http://localhost:8888/wordpress" class="blog_title">MOFULOG</a>
[/code]

となぜか表示が全く違う。どうやら「サイトの基本情報」→「サイトのタイトル」を編集することでロゴを作成できるようですが私が打ち込んだhtmlとcssはどこに行ったのでしょう・・・

(2)またモバイルでのみ表示されるはずのハンバーガーメニューが"カスタマイズ"では常時表示されてしまう。  
→cssでモバイル以外の場合はdisplay.noneで隠しているのになぜ？

(3)"カスタマイズ"では、謎の「mofulog」の文字と「古い記事へ新しい記事へ」の表示がされている。

(4)"カスタマイズ"では「検索するテキストを入力・・・」が消滅している。

細かい解答でなく、なぜcssが反映されなくなっているかだけでもご教示いただけると大変助かります。なお「wordpress css
崩れる」などでググっていますがいまいち解決策が見当たりません・・・  
前段階では全てのcssが反映されていなかったのですが、ググってphpを追加することで解決し今の状態になっております。

＜htmlファイルをChromeで開いた時・正常＞  
<https://gyazo.com/23249e43edafe41ba6609386cc4272f3>

＜カスタマイズを押した時＞  
<https://gyazo.com/eaa3bb8fb8146cf2e029fc5c11346963>

HTML,CSS,PHP  
コードが膨大、またどこを開示するべきかわからないためどの言語のどの部分が見たいとコメント頂ければ別途掲載いたします。

WordPress 4.9.7  
MAMP  
ATOM


CC BY-SA 4.0
2018-07-27T07:17:25.977
47026
2019-06-09T06:02:45.303
2018-08-02T09:35:59.593
29490
29490
question
php html css wordpress
WordPressダッシュボードでテーマが表示されない。CSSの問題？


「ダッシュボードで外観を押した時」「テーマの詳細を押した時」に表示されるのは、単にテーマ作成者が用意したそのテーマのスクリーンショットなので、例えば
`screenshot.png` 等のファイル名でスクリーンショット（ gyazo の
1枚目の画像的なもの）をオリジナルテーマのディレクトリに設置して見てください。

> テーマのスクリーンショットを作ります。ファイル名は screenshot.png
> と付け、テーマディレクトリに保存する。スクリーンショットはテーマのデザインを正しく反映し、PNG形式で保存する。推奨する画像サイズは
> 880x660。実際には 387x290 のサイズで表示されますが、画像サイズを2倍にすることで画面解像度の高い HiDPI
> ディスプレイにも対応できます。  
>  --
> [https://wpdocs.osdn.jp/テーマの作成](https://wpdocs.osdn.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E4%BD%9C%E6%88%90)

* * *

「カスタマイズを押した時」の挙動について現状の情報だけでは確かなことは言えないのですが、 `header.php` で `style.css`
を読み込む時の link タグが気になります。

「カスタマイズを押した時」に表示されるプレビューの iframe 内で、最終的に出力されている HTML の link タグをご確認ください（例えば
Google Chrome であれば右クリックメニューの中に「フレームのソースを表示」の様なメニューがあると思うのでそこから最終的な HTML
を確認できると思います）。

`get_stylesheet_uri()` や `bloginfo('stylesheet_url')` で `style.css`
を特定している場合は、下記のようになっているはずです。

[code]

    <link rel="stylesheet" href="https://{ドメイン名}/wp-content/themes/{オリジナルテーマのディレクトリ名}/style.css">
    
[/code]

あるいは、直接 `style.css` を参照しているなら下記のようになっていると思います。

[code]

    <link rel="stylesheet" href="/wp-content/themes/{オリジナルテーマのディレクトリ名}/style.css">
    
[/code]


CC BY-SA 4.0
2018-08-01T06:16:36.780
47153
2018-08-01T06:55:06.723
2018-08-01T06:55:06.723
28832
28832
47026
answer