子テーマを適応するとスマホ表示ができなくなる

[カク]

■ WordPress のバージョン
WordPress 6.7.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.28.2

■ Pro Unit のバージョン
0.28.0

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
このページではカラムブロックの「モバイルでは縦に並べる」をオンにしており、スマホから見た際にイラストと文字が縦一列に並ぶはずですが、実際はPCやタブレットと同じ表示になってしまいます。
このページだけではなく、サイト全般で不具合が発生しています。

■ 自分で試した事
ネット検索、フォーラム検索で似たような症状が見つかりませんでした。
プラグインを1つ1つ停止しましたが、改善せず。
親テーマに切り替えることでレスポンシブが動作したので原因が子テーマにあることは突き止めましたが、影響していそうなコードを子テーマのファイルから削除しても改善しませんでした。(見落としかもしれません)

■ 症状が発生するブラウザ
iPhone環境のSafari、Android環境のGoogle Chrome

■ 実際の症状
サイト全体でスマートフォンから見た際のレスポンシブ対応が動作せず、PCやタブレットと同じ表示になってしまいます。

■ その他特記事項
添付ファイルに現在の子テーマを添付しました。
また、管理画面の追加CSSは以下の通りです。

body {
<code>background-image: url(&quot;https://m-airou.com/amy/airou/wp-</code>content/uploads/2024/11/back2.gif");

}

/* ページヘッダーを非表示 */
.page-header { display:none; }

.breadcrumb {

display:none !important;
}

初めての投稿なのでここで合っているかどうか不安ですが、よろしくお願いします。

Attachments:

You must be logged in to view attached files.

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[対馬 俊彦]

子テーマの header.php の作り方が原因です。

親テーマの _g3 フォルダーの中にある header.php を子テーマのフォルダーにコピーして、
このファイルを書き換えるとうまくいくと思います。

できれば header.php を書き換えるのではなく、
アクションフックを使う方が望ましいです。
以下のページが参考になります。

できる！WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦！

[投稿者]

投稿