サイト運営ITお問い合わせはコチラからBootstrap4のグローバルナビで親メニューをリンク化するサイト運営Twitter0Facebook0はてブ1Pocket0Pinterestコピー2020.01.09スポンサーリンクBootstrapが組み込まれたUnderstrapテーマを使用した時に、グローバルナビのメニューを階層化した際、親メニューのリンクが無効になる動きに困った時がありました。リンクが有効にならないのか小一時間悩みましたこの記事では、その原因と対策についてまとめています。この記事を読むことで、Bootstrapを使用したテーマで親メニューのリンクを有効化する方法を知ることができます。目次なぜBootstrapを使ったテーマでは親メニューのリンクが無効になるのか?wp-bootstrap-navwalkerが犯人wp-bootstrap-navwalkerはどこで使われている?wp-bootstrap-navwalker内部の処理なぜ親メニューのリンクを無効化する処理が必要なのか?1Bootstrapで親メニューをリンクを有効化するカスタマイズ2PCとモバイルでメニューを切り替えるカスタマイズモバイル用メニューの定義を追加PC用メニューをコピーモバイルメニューの配置先をモバイルメニューに指定ハンバーガーメニューにモバイルメニューを割り当てるまとめなぜBootstrapを使ったテーマでは親メニューのリンクが無効になるのか?Bootstrapを使った全てのテーマに当てはまるわけではありませんが、Bootstrapを使ったテーマでは親メニューのリンクが無効になる実装になっていることが多いです。親メニューのリンクが無効になる現象が発生します。wp-bootstrap-navwalkerが使われることが多いので、この現象はBootstrapテーマでは頻繁に確認されると思います。manager.wp-bootstrap.github.iowp-bootstrap-navwalkerはどこで使われている?wp-bootstrap-navwalkerが使われているのは、wp_nav_menuを定義するところです。テーマのheader.phpなどで見つけることができます。この記述があると親メニューのリンクが無効になる現象が発生すると思います。);wp-bootstrap-navwalker内部の処理wp-bootstrap-navwalker内部の処理を見てみると、class-wp-bootstrap-navwalker.phpの187行目付近に$atts[href]=’#’という記述があります。ここでリンクを無効化しています。'nav-link';}}なぜ親メニューのリンクを無効化する処理が必要なのか?これは推測ですが、階層メニューのトップ(親メニュー)に意味のあるリンクが入っていると、モバイルメニュー時に階層メニューを開くときに、トップに飛んでしまうからだと思います。そのような使い方だとモバイル時に問題が出るので、テーマ側で処置していると考えるのが普通かとおもいます。PCページだけを考えて、なんて使いにくいテーマだと思ったものです。1Bootstrapで親メニューをリンクを有効化するカスタマイズ親メニューのリンクが無効になる理由がわかると、ゴリ押ししてカスタマイズする気も失せるのですが、せっかくなのでカスタマイズ方法をご紹介します。検索すると、phpファイルを直接書き換える例しか見つかりませんが、ご紹介する方法はfunction.phpに追記するだけの方法です。このカスタマイズでは、モバイル時は親メニューのリンク無効化して、PC時のみ有効化します。場合分けが不要な場合は、wp_is_mobileでの判定をやめればよいです。wp_is_mobileを使うとキャッシュ系プラグインで問題が起きやすいですこのカスタマイズと合わせて、PCとモバイルで別のメニューを用意して、モバイルは親メニューのリンクが無くても良い構成、PCは親メニューがあっても良い構成にだし分けることが可能です。メニューを共通化してPCの時だけ不要な子メニューをメディアクエリでdisplay:noneするなどの対処が必要だと思います。);2PCとモバイルでメニューを切り替えるカスタマイズ今までのカスタマイズ(1Bootstrapで親メニューをリンクを有効化するカスタマイズ)に加えて、PCは親メニューでリンクあり、モバイルは親メニューリンク無しにするカスタマイズを行います。カスタマイズ例はUnderstrapテーマをベースにしていますが、考え方はどのテーマでも同じです。カスタマイズのポイントUnderstrap_WP_Bootstrap_Navwalkerの挙動をレスポンシブにPCは親メニューのリンクありモバイルは親メニューのリンク無しPCとモバイルを別メニューに分けるモバイルの親メニューはリンク無しでメニューオープンに特化したメニュー構成PCの親メニューはリンクあり+メニューオープン機能併用を前提としたメニュー構成モバイル用メニューの定義を追加Understrapはグローバルメニューは一つだけでPCとモバイルのメニューは分かれていません。モバイルメニューを追加するために、function.phpに以下の記述を追記します。これで、ダッシュボードのメニューに配置先(モバイルメニュー)が追加されます。既存のメニューを複製して、PC用とモバイル用にメニューを分けます。duplicate-menuというプラグインを使うと既存のメニューを複製できます。このプラグインはメニュー定義が沢山あるテーマではとても便利ですプラグインをインストールして、メニューを複製してモバイルメニューとします。click.ja.wordpress.orgモバイルメニューの配置先をモバイルメニューに指定メニュー⇒位置の管理と進んで、作成したもモバイルメニューの配置先をモバイルメニューとします。ハンバーガーメニューにモバイルメニューを割り当てるハンバーガーメニュー用のbuttonの参照先をnavbarNavDropdown_spに変更し、モバイル用にnav_menuを追加します。?>このままだとPC用のメニューが2つ表示されますので、CSSでハンバーガーメニュー非表示時にモバイル用メニューはdisplay:noneしてください。まとめ最近真面目にBootstrapをいじり始めて、細かいところまで作り込まれていて使いやすい反面、変な癖があって、今回ご紹介したようになぜ??と思う現象もありました。これだけ大勢の人が使っているフレームワークですから、理由があってそうなっていることがほとんどで、使い方の問題で回避できるはずです。今回の親メニューが無効になる現象が発生しなければ、モバイルで親メニューのリンクがあると使えないことに気が付いたはずです。その時点で、PC用メニューの構成を見直したはずでしたが、バカ除けが邪魔してそこまで行きませんでした。今回紹介したカスタマイズも本来は不要で、メニューの使い方で回避できる話ですが、理由を想像できずに勝手にリンクが無効になる理由とその対処方法を探すのに時間をかけてしまいました。最新情報をお届けします。この記事を書いた人ブーンはるばる日本よりオランダ王国へやってまいりました。自分の経験が少しでも参考になれば嬉しいです。お問い合わせは、『こちら』からお願い致します。国内シェアNo1の安定性と実績が魅力。SSDで死角なしの万能サーバー。JavaScript2020.01.162020.01.23ブーンオランダで生きていく関連記事サイト運営Gutenbergで管理画面のタグをチェックボックス化する方法Wordpressの編集画面でタグをつける時に、カテゴリのようにタグをチェックボックスで選択したいと思う人は多いと思います。Wordpressのタグをチェックボックス化する方法は検索すると簡単に見つかりますが、Gutenbergに...2019.12.29サイト運営WordPressから大量のメールを送信してもスパムにならない方法Wordpressサイトの登録ユーザー宛てにメールを送信したいとします。登録ユーザー数が1000人を超えるあたりから、登録ユーザーそれぞれに一斉にメールを送るとかなりの確率でサーバー側の制限に引っ掛かると思います。おススメ記事の進んだカスタマイズSANGOの初期状態から、TOPページのTOPに人気記事を表示するカスタマイズとサイドバーにプロフィールを表示するカスタマイズを行いました。その時に、公式や他のサイトに書かれている内容だと、設置した後の設定が面倒すぎるだろうと思っ...2020.02.15サイト運営Lightningの子テーマが反映されない時のstyle.cssの読み込み方法この記事は、WrodpressのLightningのテーマを導入したけど、子テーマのCSSの変更が反映されなくて困っている人に役に立つ記事となっています。日本製のWordpressテーマはいろいろありま...2019.09.28サイト運営Elementorでページ複製してデザインが崩れた時の対処法は?Elementorは便利です。Elementorにはテンプレート保存する機能がありますが、セクション単位でしか保存できません。Elementorで作ったページを丸ごとコピーして他のページに使いまわしたい!と思うことも多いです。既存のカスタム投稿タイプに投稿タグやカテゴリを追加する方法この記事では、投稿のタグやカテゴリをカスタム投稿タイプに追加する方法についてまとめておきます。実際にカスタム投稿タイプに投稿タグを追加しようとして、自分がやってドハマりしたので、備忘録として残します。カスタム投稿タイプに投稿タグ...2019.10.03WordPressテーマのGutenbergブロックエディタ対応状況WordPressユーザ一覧にソート機能をつけるカスタマイズホームサイト運営スポンサーリンクブーンはるばる日本よりオランダ王国へやってまいりました。自分の経験が少しでも参考になれば嬉しいです。お問い合わせは、『こちら』からお願い致します。目次TOPへ情報スポンサーリンクブーンはるばる日本よりオランダ王国へやってまいりました。自分の経験が少しでも参考になれば嬉しいです。お問い合わせは、『こちら』からお願い致します。目次なぜBootstrapを使ったテーマでは親メニューのリンクが無効になるのか?wp-bootstrap-navwalkerが犯人wp-bootstrap-navwalkerはどこで使われている?wp-bootstrap-navwalker内部の処理なぜ親メニューのリンクを無効化する処理が必要なのか?1Bootstrapで親メニューをリンクを有効化するカスタマイズ2PCとモバイルでメニューを切り替えるカスタマイズモバイル用メニューの定義を追加PC用メニューをコピーモバイルメニューの配置先をモバイルメニューに指定ハンバーガーメニューにモバイルメニューを割り当てるまとめタイトルとURLをコピーしました。