WordPressのカスタムメニューでは、内部リンクに対してカスタムリンクは使わない!

WordPressにはカスタムメニューという機能があり、管理画面で設定したリンクをテーマに表示させられます。
このリンクの設定で、サイト内リンクにも関わらず、「カスタムリンク」という固定のURLでリンクが設定されていることがよくあります。
カスタムリンクは外部サイトへのリンクのみで、内部リンクには貼らないようにしましょう。
なぜカスタムリンクを使ってはいけないのか?
「カスタムリンク」には「http」「https」から始まる固定のURLを設定することになるので、ドメインが変わってもそのまま変更されることなく、設定したURLが残ってしまいます。

開発環境と本番環境とでわざわざ設定し直さないといけなくなったり、ローカル開発環境のページを見ているつもりが、リンクをクリックして気づかないうちに本番環境のページを見ていたなんてことにもなりかねないので、URLを固定で書くことはやめましょう。
リンクの設定方法
固定ページなどは普通に設定されていることが多いのですが、カスタムリンクで設定されているのが多いのが下記のような、「よく使うもの」の選択肢に出てこない項目です。
- 「ホーム」や「プライバシーポリシー」などの普通の固定ページと扱いが違うページ
- 「カテゴリー」の親要素
- 「カスタム投稿タイプ」の「一覧画面」
これらのページは、メニュー項目の「すべて表示」をクリックすると、表示されるのでそこから選択すればOKです。

意外と知らない人が多く、これらの項目をカスタムリンクで直接URL指定しているのをよく見かけるので、WordPressの機能で解決できる部分はうまく利用するようにしましょう。
カスタムリンクを使うパターン
というわけで、カスタムリンクを使うパターンは下記2つに絞られます。
- 外部サイトへのリンク(本番環境と開発環境でリンク先が変わらない)
- ページ遷移ではなく、モーダルを表示させるためのボタンなど
外部サイトのリンクは直接書く必要があります。
ページ遷移ではない、モーダルを表示させるためのボタンをメニューに追加したい場合は、カスタムリンクで「#」を指定してあげます。
ちなみに、管理画面右上の[表示オプション]で「CSS クラス」にチェックを入れると、メニュー項目にclassを設定できるようになります。
![[表示オプション]から「CSS クラス」の表示](https://webrandum.net/mskz/wp-content/uploads/2020/11/image_3-1-1024x274.png)
これでモーダル用のボタンにclassを設定してあげるとスマートな作りにできます。



WordPressのwp_is_mobile()で条件分岐をするときは、キャッシュの設定に注意
Nuxt.jsの「layouts」を使用してレイアウトの共通化を行う方法|Nuxt.jsの基本
gitignoreで特定ファイルをGitで無視する方法
Visual Studio Codeで読み込んだCSSで設定されているclass名の入力補完をしてくれる拡張機能「HTML CSS Support」
SafariのURLメニュー部分も考慮できるCSSの単位「dvh」
Visual Studio CodeでMovable TypeのMTMLファイルを開く拡張機能「Movable Type Markup Language Syntax」
Mac向けのミニマルでお洒落なデザインのGitクライアント「Gitfox」
Vue.jsを使う人が最低限導入しておきたいVisual Studio Codeの拡張機能
HTML・CSSでWebサイト制作を行う際に必要なツール
Visual Studio Codeで開始タグを修正すると自動で閉じタグも修正してくれる拡張機能「Auto Rename Tag」
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
macOSの効率化に関するDiscordコミュニティ「CMD-F」を立ち上げました
1Passwordの開発者向け機能(SSH Agent / Environments / 1Password CLI / Developer Watchtower)
Default Folder Xで保存ダイアログ内のファイルリストにフォーカスする方法
Obsidianで整理した知識をAnkiで定着させる方法
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理