【WordPress】編集画面のパーマリンクURLを無効化するCSS

​2022年5月8日​​WordPress

「WordPress」のアイコン

この記事では、WordPress記事編集画面のサイドバーにあるパーマリンクポップアップをクリックできないようにする方法を書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を利用します。

【WordPress】編集画面のパーマリンクURLを無効化するCSS

本記事で紹介するCSSを使えば、WordPressの記事編集画面（ブロックエディター）のサイドバーに表示されているパーマリンク（投稿を表示）のURLをクリックできないようにできます。

クリックを無効化することで、簡単にリンクをコピー（範囲選択）できます。編集している記事のURLをコピーして、どこかに貼り付けたい時に便利です。

ニッチな内容だと思いますが、僕の場合、結構重要です。僕はブログで使う動画を、YouTubeにアップロードして、概要欄に記事のURLを貼り付けています。

その時に、編集画面のサイドバーにあるパーマリンクをコピーするんですが、リンクとして機能していると、うまい具合にコピーできない時があります。範囲選択したつもりが、リンクを押しちゃって、新しいタブで記事のプレビューが開いてしまう…といった感じです。

コピーできたとしても、別の場所（YouTubeなど）に貼り付けると、「https://www.naporitansushi.com/insfo/（新しいタブで開く）」といったように、URLの末尾に余計な文字列が付与されてしまいます。CSSを使うことで、「（新しいタブで開く）」の文字列も非表示にできます。

僕みたいに、現在編集している記事のURLをコピーして、別の場所に貼り付けたい方、ぜひ参考にしてみてください。

通常の状態と、CSS適用後の違いを動画にしてみました。

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を利用します。

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。

「Chromeに追加」をクリックしてインストールします。

「Stylebot」のインストール手順画像

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

編集画面のパーマリンクURLを無効化するCSS

自分のサイトのWordPress管理画面にアクセスします。「Stylebot」のアイコンをクリック→「Stylebotを開く」をクリックします。

Stylebotのスクリーンショット1

コードを書き込む画面が表示されます。書き込むコードは以下になっています。

/*パーマリンクポップアップ内の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;
}

上記コードは、WordPress6.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; /*非表示*/
}

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト（僕の場合、www.naporitansushi.com）がオンになっていることを確認します。オンになっている間は、有効になっているということです。

Stylebotのスクリーンショット3

有効にした状態で、サイドバーを開いて、URLをクリックします。ここの部分は、リンクのままです。ここを廃止すると、ポップアップが開けなくなります。

記事編集画面のパーマリンクポップアップを開く手順画像

ポップアップ内の「投稿を表示」下にあるURLのリンクが無効化されています。

URLポップアップのリンクを無効化した画像

おまけで文字色を青から黒に変えています。「color: #111;」の部分を、好きなHTMLカラーコードに置き換えることで、文字色を変更できます。カラーコードは、こちらのサイトで調べられます。

通常、リンクを範囲選択しようと思ったら、Altキーを押す必要があります。（宣伝：Vivaldiは、普通に選択できる）CSSで、リンクを無効化した後は、何も押さなくてもマウスでサクッと範囲選択できます。

URLポップアップのリンクを範囲選択した画像

適用前は、別の場所に貼り付けると、「(新しいタブで開く)」という文字が末尾につきます。適用後は、アイコンを非表示にしているので、つかなくなります。

<!--適用前-->
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でした。

編集画面を自分好みに変えることで、効率的に記事執筆できます。

​2022年5月8日​​WordPress