メディアサイト様より、スマホ表示時のみのハンバーガーメニュー内容を大きく変更(カスタマイズ)されたいとのご依頼をワードプレスドクターで代行させていただきました。

スマートホン表示時のみ、リッチなコンテンツを含むスマホメニューをワードプレスサイトで表示したい

お客様のご要望は下記の物でございました。

1 スマホ時のみ指定コンテンツを含むメニューをハンバーガーメニューとして表示されたい
2 検索を含めたい
3 任意の順位でカテゴリーを表示されたい
4 子カテゴリーのあるメニューは+をクリックするとスライドして子カテゴリーが表示される
5 バナーを含み、SNSへのリンクを最下部に配置されたい

スマホ判定、JSによるスライド

ワードプレスには、スマホ判定用の関数wp_is_mobile() があり、ユーザーが現在表示しているデバイスがスマホかどうかを判定することができます。

またCSSでは、メディアクエリと言ってデバイスの横幅によって表示を変える方法がございます。

メニュー表示や、スライドアニメーション等はJS(JAVASCRIPT)のプログラムで制御します。

WordPressワードプレスのスマホメニューのカスタマイズ、修正のご相談・ご依頼はワードプレスドクターまでお気軽にお送りください