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

2022年5月8日Stylebot&Stylus,ブログ

Stylebotのアイコン

この記事では、WordPressの記事編集画面のサイドバーに表示されているパーマリンクURLを、クリックできなくするCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。

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

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

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

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

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

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

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

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

前提

この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能です。

まだインストールしていない方は、以下の記事を参考にしてみてください。

Firefox・Edgeをご利用の場合

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

CSS

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

拡張機能ボタン Stylebotを開く

コードを書き込む画面が表示されるので、書き込んでいきます。

/*編集画面のパーマリンク「投稿を表示」*/
.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に「パーマリンクのクリック無効化」コードを書き込む

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

Stylebot 「www.naporitansushi.com」がオンになっていることを確認する

パーマリンクに表示されているURLがクリックできなくなります。おまけで、文字色を青から黒にしています。

ブロックエディターのパーマリンクのURLがクリックできないようになる

通常、リンクを範囲選択しようと思ったら、Altキーを押す必要があります。(宣伝:Vivaldiは、普通に選択できる)

CSSで、リンクを無効化した後は、何も押さなくてもマウスでサクッと範囲選択できます。

範囲選択も楽ちんにできる

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

<!--適用前-->
https://www.naporitansushi.com/wordpress-permalink-click-disable/(新しいタブで開く)

<!--適用後-->
https://www.naporitansushi.com/wordpress-permalink-click-disable/

そもそも非表示にしたい場合

リンクの無効化ではなく、そもそもパーマリンクを非表示にしたい場合、以下のCSSになります。

/*「投稿を表示」の文字を非表示*/
h3.edit-post-post-link__preview-label,
/*パーマリンク非表示*/
.edit-post-post-link__preview-link-container {
  display: none;
}

URLスラッグのみで、その下の「投稿を表示」、URLの2項目がごっそり消えます。

パーマリンクの「投稿を表示」とURLを非表示にした画像

感想

以上、WordPressのブロックエディターのパーマリンクを、クリックできないようにするCSSについてでした。

「やっぱりクリックできるようにしたい!」という場合は、書き込んだコードを丸々削除するだけです。

Posted by ナポリタン寿司