【Simplicity】スマホ用ヘッダー苦肉のカスタマイズ

おはようございます、こんにちは、こんばんは。
ふらっふぃ(@fluffy_mybag)です。

モバイル版のヘッダー部分のカスタマイズに四苦八苦したので覚書です。
設定完了までに4~5時間を要しました。

スポンサーリンク

カスタマイズ後のスマホ用ヘッダー

これから記載する設定をすべて行った後のモバイル画面です。

メニュー部分はスタイルシートでボタンっぽく表示させたかったのですが、何度やってもうまくいかなかったため苦肉の策で記号「|」で挟みました。

なぜか分かりませんが余白の調整がうまくいかないんですよ。ほんとに😭
どこも悪くないとは言いません。どこの設定が悪いのか見つからなんです。そういう時ってないですか?
苦肉の策でこうしたんですけど、今となってはシンプルで見やすいので良かったかなと思っています。

以下のファイル修正は子スタイルで行っています。
子スタイルのフォルダにファイルがない場合は、「/wp-content/themes/simplicity2」フォルダから、元ファイルを「/wp-content/themes/simplicity2-child」フォルダにコピーしました。

モバイルヘッダー用のメニュー作成

「before-main.php」を編集します。
1~4行目まではデフォルトで入力されています。

iPad用の設定追加

「function.php」に以下を記述します。
これをやらないと iPad で見た時に、PC用のメニューとスマホ用のメニューが同時に表示されてしまいました。

ヘッダー用CSSの設定

「mobile.css」に以下の記述を行います。

参考にさせていただいたサイト

上記設定は以下のサイトを参考にさせていただきました🍀

スマホ表示のときにも、簡易的なグローバルナビを表示するカスタマイズです。とっても便利ですよ。 スマホ表示用のグローバルナビを設置しよう! Simplicityでは、3つのスマホ用のメニューが用意されていますが、メニューを ...
ワードプレスでテーマを自作しているような時に、PC版とスマホ版でテンプレートの表示を切り替えるのに、wp_is_mobile()という関数がよく使われます。この関数では、ipadでページを見たときに、スマホと判定してスマホのテンプレートが表
スポンサーリンク
スポンサーリンク