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を設定してあげるとスマートな作りにできます。

選択テキストをHTMLタグですぐ囲めるようになるVisual Studio Code拡張機能「htmltagwrap」
Font Awesome 5の基本的な使い方と、Font Awesome 4との違い
ウェブサイト上で簡単にWYSIWYGエディタを実装する「TinyMCE」
CSSのz-indexの確認や管理を便利にする方法
アクセス解析ツールの定番!!Googleアナリティクスの登録方法
Visual Studio Codeのマルチカーソル機能で文字操作を一括で行う
WebPに対応して画像サイズを最適化する方法
WordPressで「予約投稿の失敗」となってしまう場合の対処方法
全角スペースを可視化してくれるVisual Studio Codeの拡張機能「zenkaku」
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Googleの「.new」ドメインを徹底的に活用する
JavaScriptのforEach内で「continue」や「break」のような動作をさせる方法
Nuxt.jsでページを作成・追加する方法|Nuxt.jsの基本
AlfredでURLをBit.lyで短縮URLにするWorkflow「Bit.ly URL Shorten」
WordPressのプラグインはどれを入れたら良い?とりあえず最初に導入をオススメするプラグイン一覧
Figmaで細かいアニメーションを作成できるプラグイン「Motion」
手軽にコーディングの勉強ができるCodePenをもっと便利に使うための設定
間違えて学習してしまったATOKの不要な変換候補を削除する方法
ボディスキャン瞑想の入門に使える音声ガイドまとめ
「EWWW Image Optimizer」を使ってWordPressをWebPに対応する方法