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

Vue CLIのプロジェクト管理用のGUI機能から環境を構築する
WordPressのヘッダーにツールバーが表示されないときは、wp_headやwp_footerが入っているか確認
gulpfile.jsにAutoprefixerのブラウザオプションを書くとエラーがでる場合の修正方法
Gitで1行しか変更していないはずのに全行変更した判定になってしまう
HTMLが書ければすぐ習得できるテンプレートエンジン「EJS」の基本的な書き方
SourceTreeを開くと「’git status’ failed with code 69:’」というポップアップが出てくる場合の解決方法
Webデザイナーを目指す専門学生が技術ブログを書くメリット
Visual Studio Codeでできる最低限のGit操作方法
WordPressのメディアライブラリで画像を追加するときに表示される「HTTP エラー」の解消方法
スマホやPCにプッシュ通知をしてくれる「Push7」をブログに追加する方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
iPad Pro + iPad Pro用Magic Keyboardの文字入力
作業効率化に大きく貢献してくれているMacのアプリ達
Android実機で表示しているサイトを、Chrome開発者ツールで開いて検証する方法
ウェブサイトをダークモードに対応するときに気をつけること
機能の差が分かりにくいDropboxの「選択型同期」と「同期の無視」の違い
効率的なマークアップが出来るようになるEmmetでCSSを書く時の基本
ATOKの変換領域(文節区切り)を選択しやすくするカスタマイズ
Visual Studio CodeでMovable TypeのMTMLファイルを開く拡張機能「Movable Type Markup Language Syntax」
Alfred 4のスニペットで使えるリッチテキスト機能の使い方