【WordPress】編集画面のパーマリンクURLを無効化するCSS
本記事で紹介するCSSを使えば、「WordPress」の記事編集画面（ブロックエディター）のサイドバーに表示されているパーマリンク（投稿を表示）のURLをクリックできないようにできます。
クリックを無効化することで、簡単にリンクをコピー（範囲選択）できます。編集している記事のURLをコピーして、どこかに貼り付けたい時に便利です。
ニッチな内容だと思いますが、僕の場合、結構重要です。僕はブログで使う動画を、「YouTube」にアップロードして、概要欄に記事のURLを貼り付けています。
その時に、編集画面のサイドバーにあるパーマリンクをコピーするんですが、リンクとして機能していると、うまい具合にコピーできない時があります。範囲選択したつもりが、リンクを押しちゃって、新しいタブで記事のプレビューが開いてしまう…といった感じです。
コピーできたとしても、別の場所（YouTubeなど）に貼り付けると、「https://www.naporitansushi.com/insfo/（新しいタブで開く）」といったように、URLの末尾に余計な文字列が付与されてしまいます。CSSを使うことで、「（新しいタブで開く）」の文字列も非表示にできます。
僕みたいに、現在編集している記事のURLをコピーして、別の場所に貼り付けたい方、ぜひ参考にしてみてください。
通常の状態と、CSS適用後の違いを動画にしてみました。
インストール方法
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...使っているテーマで、WordPressの投稿用エディタースタイルシートがある場合は、そちらに書き込むと反映されるかもしれません。本記事では、シートがない方や、キャッシュの影響で反映されない方でもできるように、安定の拡張機能を利用します。
「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。
拡張機能のオーバーフローメニューに追加されたらOKです。
頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。
詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/編集画面のパーマリンクURLを無効化するCSS
「Stylebot」のスタイルシートを開く
自分のサイトのWordPress管理画面にアクセスします。「Stylebot」のアイコンをクリック→「Stylebotを開く」をクリックします。
CSSコードを書き込む
右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。
/*パーマリンクポップアップ内のURLクリック無効化*/
a.components-external-link.editor-post-url__link {
pointer-events: none; /*クリック無効化*/
color: #111; /*文字色を黒にする*/
}
/*パーマリンクポップアップ内の太字解除*/
.editor-post-url__link>span.editor-post-url__link-slug {
font-weight: unset;
}
/*パーマリンクポップアップ内の「新しいタブで開く」アイコン非表示*/
.editor-post-url__link>svg {
display: none !important;
}上記コードは、「WordPress」のバージョン6.0（2022年5月24日公開）より、後用のCSSです。6.0より前のバージョンをお使いの場合は、恐らく以下のCSSになります。僕が6.0以前に使っていたCSSです。
/*編集画面のパーマリンク「投稿を表示」*/
.edit-post-post-link__preview-link-container .components-external-link.edit-post-post-link__link {
pointer-events: none; /*クリック無効化*/
color: #111; /*文字色を黒にする*/
}
/*パーマリンク末尾のURLスラッグ*/
.edit-post-post-link__link-post-name {
font-weight: unset; /*URLスラッグの太字を解除*/
}
/*パーマリンク末尾にある「新しいタブで開く」アイコン*/
a.components-external-link.edit-post-post-link__link svg {
display: none; /*非表示*/
}本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
CSSが有効になっているかの確認
再度拡張機能ボタンを押して、登録したサイト（僕の場合、www.naporitansushi.com）がオンになっていることを確認します。オンになっている間は、有効になっているということです。
パーマリンクポップアップ内がカスタマイズされたか確認する
有効にした状態で、サイドバーを開いて、URLをクリックします。URLは、リンクのままです。URLのリンクを廃止すると、ポップアップが開けなくなります。
ポップアップ内の「投稿を表示」下にあるURLのリンクが無効化されています。
おまけで、文字色を青から黒に変えています。「color: #111;」の部分を、好きなHTMLカラーコードに置き換えることで、文字色を変更できます。カラーコードは、こちらのサイトで調べられます。
通常、リンクを範囲選択しようと思ったら、Altキーを押す必要があります。（宣伝：Vivaldiは、普通に選択できる）CSSで、リンクを無効化した後は、何も押さなくてもマウスでサクッと範囲選択できます。
適用前は、別の場所に貼り付けると、「(新しいタブで開く)」という文字が末尾につきます。適用後は、アイコンを非表示にしているので、つかなくなります。
<!--適用前-->
https://www.naporitansushi.com/wordpress-permalink-click-disable/(新しいタブで開く)
<!--適用後-->
https://www.naporitansushi.com/wordpress-permalink-click-disable/「やっぱりクリックできるようにしたい！」という場合は、書き込んだコードを丸々削除します。
ポップアップ内の不要な文字を削除するCSS
パーマリンクポップアップ内の「URL」、「パーマリンク」、「投稿を表示」という文字（見出し）を非表示にしたい場合、下記コードを追加で書き込みます。
/*パーマリンクポップアップ内の「URL」文字非表示*/
.editor-post-url>div:first-of-type>div>h2 {
display: none;
}
/*パーマリンクポップアップ内の「パーマリンク」文字非表示*/
.editor-post-url>div:nth-of-type(2) label {
display: none;
}
/*パーマリンクポップアップ内の「投稿を表示」文字非表示*/
.editor-post-url>h3.editor-post-url__link-label {
display: none;
}全部を書く必要はありません。URLの文字は必要という場合、1番目の「URL文字非表示」コードを書かないようにします。全部適用すると、下記画像の右側のようになります。不要な文字が消えて、見栄えがスッキリします。
感想
以上、「WordPress（ワードプレス）」のブロックエディターにあるパーマリンクを、クリックできないようにするCSSでした。
編集画面を自分好みに変えることで、効率的に記事執筆できます。