[ 解決済 ] 「トップページ」と「それ以外のページ」とでヘッダーナビを切り替えたい
[ 解決済 ] 「トップページ」と「それ以外のページ」とでヘッダーナビを切り替えたい
- このトピックには6件の返信、4人の参加者があり、最後に
により11ヶ月、 4週前に更新されました。
-
投稿
-
■ WordPress のバージョン
6.4.1■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
15.15.1■ Pro Unit のバージョン
0.26.2■ スキンの種類
プレーン■ 期待する動作
ヘッダーナビゲーションを2種類（A・B）用意して、「トップページではA」と「それ以外のページではB」といったように切り替えて表示させたいです。■ 自分で試した事
WP管理画面の「外観 ＞ メニュー」にて「新しいメニューを作成」して、実現できないかと模索しましたが、そもそもそのような機能は無いとお見受けしました。しかし、私が見落としているのかもしれません。■ 症状が発生するブラウザ
Chrome■ 実際の症状
例えば、本投稿用に作成したデモサイトでは、【業務内容】【弁護士紹介】にアンカーリンク（ページ内リンク）を、【お知らせ】【お問い合わせ】にハイパーリンクを設定していますが、【お知らせ】【お問い合わせ】ページに遷移してから【業務内容】【弁護士紹介】をクリックすると、当然ですが遷移することができません。そこで、ページによって表示させるナビゲーションを切り替えられれば・・・と考えた次第です。
アンカーリンクの前にスラッシュを入れれば（例：「#service」⇒「/#service」）半分解決なのですが、スムーススクロールが効かずパッと切り替わるため、ユーザーがどう移動したのか分かりにくくなり、できれば避けたいです。
もし、ページによってヘッダーナビを切り替える方法があれば、教えていただきたいです。ナビ切り替え以外のアイデアもあれば、教えて頂ければ幸いです。宜しくお願い致します。
該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
Lightningのご利用ありがとうございます。株式会社ベクトルの石川と申します。
かなり飛躍した対応策ですが、まず Lightning G3 Pro Unit 0.26 からヘッダーやフッターをブロックエディタで作成したパーツを使用できる機能を追加しています。
解説動画は明日の夜に公開予定ですが、外観 > カスタマイズ > Lightning ヘッダー設定 を見れば概ね使い方はわかると思います。
その上で、ナビゲーションブロックでトップページ用とそれ以外用を VK Dynamic If Block を使って出し分ければ可能です。
ブロックエディタの操作に結構慣れてないと難しいかもしれませんが、慣れるとかなり自由なカスタマイズができますので試してみてください。
ご提案くださった「Lightning ヘッダー設定」と『VK Dynamic If Block』の合わせ技で、スッキリ解決することができました。
失礼ながら『VK Dynamic If Block』の存在を知らず、先ほど初めてインストールしましたが、これはいろいろな場面で活躍しますね。クライアントへの提案の幅がさらに広がりそうです。
この度は誠にありがとうございました！
無事解決したようで何よりです。
今後ともLightningをよろしくお願いいたします！石川さんが最新機能を使った対応策を回答して [ 解決済 ] となった後で恐縮ですが、Lightning Pro や Katawara などでも使えるクラシックなやり方を書かせてください。
メニュー項目をトップページ用とそれ以外のページ用の2つ持たせるやり方です。
メニュー編集画面で CSS クラス を表示して、添付画像のようにクラス only-home / not-home を入力します。
以下の CSS で出し分けできます。
li.only-home, li.not-home { display: none; } body.home .global-nav li.only-home { display: list-item; } body:not(.home) .global-nav li.not-home { display: list-item; }> 対馬さん
そ…そんな方法が…。
さすがです（・ｗ・；
- このトピックに返信するにはログインが必要です。
