0

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

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

<htmlファイルの場合>

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

<”カスタマイズ”から見た場合>

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

となぜか表示が全く違う。どうやら「サイトの基本情報」→「サイトのタイトル」を編集することでロゴを作成できるようですが私が打ち込んだ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

5

1 件の回答 1

1

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

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


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

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

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

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

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

<link rel="stylesheet" href="/wp-content/themes/{オリジナルテーマのディレクトリ名}/style.css">
4
  • なんと、ただのスクリーンショットだったのですね・・・お恥ずかしい、ありがとうございますm(_ _)m「カスタマイズを押した時」については今読ませて頂きながら確認中ですのでまたコメント致します!!!
    – mofu
    Commented 2018年8月2日 9:01
  • <link rel="stylesheet" href="localhost:8888/wordpress/wp-content/themes/ディレクトリ名/style.css"> ←本来は先頭にhttp://が入っています。「フレームソースの表示」から確認したところ仰っていただいたように書けているのかな?と思います・・・実は少々phpを書き加えまして、画像などは表示されるようになりましたがまだ若干の崩れが見られ・・・謎です><とりあえず質問を編集させて頂きます。
    – mofu
    Commented 2018年8月2日 9:07
  • 最終的な HTML が href="localhost:8888/.../style.css" の場合、おそらく想定通りの動作にはならないです。 最終的な HTML は href="http://localhost:8888/.../style.css" href="//localhost:8888/.../style.css" href="/.../style.css" のいずれかになるようにプログラムを修正する必要があります。 一般的な WordPress のチュートリアルに従っている場合、この問題は header.php の修正で解決するはずです。 header.php で問題の link タグを出力している箇所のコードを提示できますか?
    – emus
    Commented 2018年8月4日 7:46
  • すみません前述のコード、書き方が悪かったです。<link rel="stylesheet" href="http://localhost:8888/wordpress/wp-content/themes/ディレクトリ名/style.css"> のようになってます!が、header.phpでは <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">のようになってます・・・ここはよくわからずコピペしただけなのですがここがおかしいでしょうか??
    – mofu
    Commented 2018年8月4日 18:16

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。