人気のワードプレステーマ「SWELL」を使ったサイトでは、
PCのグローバルナビゲーションとスマホのグローバルナビゲーションが連動しています。
本記事ではPCのグローバルナビゲーションとスマホのグローバルナビゲーションの内容を個別に設定できるようにします。
方法について解説します。
それぞれのメニューを個別に設定できるようにする方法
スマホのデフォルトグローバルナビを非表示にする
まずデフォルトで表示されるスマホのハンバーガーボタン内のグローバルナビを消します。
カスタマイズ→追加CSSで下記コードを追加します。
.p-spMenu__nav{display:none;}これでグローバルナビからデフォルトのPCと連動している部分のメニューが消えます
次にダッシュボードにある「ブログパーツ」でスマホ専用メニューを作成
SWELLでは「ブログパーツ」として登録したコンテンツを、ショートコードで簡単に呼び出すことができます。
ブログパーツで、スマホのハンバーガーメニューの中に表示させたい、スマホ専用のメニューを作成します。
「ブログパーツ」は、通常の投稿と同じように作成・編集可能です。様々な場所でブログパーツが活用できます。
本記事ではスマホメニューの内容を作成したいのでスマホメニューで表示させたい内容をエディターで自由に作成しましょう。
「スマホ開閉メニュー下」へ呼び出しコードをコピペ
作成したブログパーツをスマホメニューをハンバーガーメニューの中に設置します。
まずウィジェットの「スマホ開閉メニュー下」に「カスタムHTML」を作ります。
そして先ほど作成したブログパーツ一覧に記載されている呼び出しコードをそこに貼り付けます。
ハンバーガーメニュー上部の「MENU」の見出しを編集
ハンバーガーメニュー内デフォルトで「MENU」（本記事では「Category」）の見出しがついています。
この部分のテキストは「カスタマイズ」→「サイト全体設定」→「スマホ開閉メニュー」にて簡単に編集可能です。
メニュータイトルのデザインについては「カスタマイズ」→「サイト全体設定」→「タイトルデザイン」にて変更可能です。
ブログパーツ内で作成したタイトルを上記のタイトルデザインと揃えるための記述は以下の通りです。
「Category」を例としています。ブログパーツ内のカスタムHTMLに下記コードを入れればOKです
<div class="c-widget__title -spmenu">Category</div>Category部分を自分の好きなタイトルに変えてください。
こうすることでデフォルトで表示されている上部のタイトルデザインと一致します。
SWELLで用意されている選択肢以外のデザインに変更したい場合は「追加CSS」で、class「 c-widget__title -spmenu 」を編集すれば任意のデザインに変更可能です。
完成
こんな感じになりました。
・デザインを差別化したい
・２カラムにしたい
・PCとスマホで別のメニューを表示させたい
などの目的がある場合、この方法は有効です。
試してみてください。
ワードプレステーマ「SWELL」
本記事でカスタマイズをご紹介したワードプレステーマはこちらです。
コメント