【WordPress】編集画面の「パーマリンクの詳細」を非表示にするCSS

2022年4月21日ブログ

WordPressのアイコン

この記事では、WordPressの記事編集画面の右側サイドバーにある「URLの最後の部分。 パーマリンクの詳細」のテキストを非表示にする方法(CSS)について書きます。

間違えてクリックしてしまう方におすすめです。

WordPressの記事編集画面のパーマリンク(URLスラッグ)の下にある「URLの最後の部分。 パーマリンクの詳細」というテキスト

WordPressでブログ記事を書いている時に、うっかりパーマリンク下の「URLの最後の部分。 パーマリンクの詳細」というテキストをクリックしてしまうことがあります。「パーマリンクの詳細」はリンクになっていて、クリックすると、こちらのページに飛びます。

ブログを始めた頃は、参考になりましたが、慣れてくると、こういったリンクは不要になってきました。間違えてクリック→ページが新しいタブで開く→閉じる。の作業が、めんどくさくなってきたので、CSSで非表示にしてみたいと思います。

WordPressの投稿用エディターのスタイルシートにCSSを書き込むことで、非表示にできます。いつでも元に戻せます。

「パーマリンクの編集・コピーする時に、うっかりその下のリンクを押してしまう…」といった方、ぜひ試してみてください。

本記事は、WordPressのブロックエディター(Gutenberg)を使っている方向けです。僕は、クラシックエディターを使っていないので、同じ画面なのかどうか分かりません。

ポイント

本記事の方法で非表示にする場合、頭の片隅に、「本来表示されるコンテンツを非表示にしている」ということを忘れないようにしてください。

いつの間にか、重要なメッセージに変わっていたとしても、CSSで非表示にしていると気づきません。それで被害を被っても、自己責任です。

まぁ、パーマリンク下の説明文に重要な文章が書かれることは、ないと思いたいです。

非表示にする手順

WordPress管理画面を開きます。左側メニューにある使っているテーマ名(僕の場合、Luxeritas)→子テーマの編集をクリックします。

Luxeritas→子テーマの編集

「投稿エディタ用スタイル」をクリックします。

投稿エディタ用スタイル
注意点

調べると、ここの項目、使っているテーマによってはないようです。その場合は、各自で「テーマ名 投稿エディタ用スタイル」といった感じで、適用方法を調べてみてください。

めんどくさい場合は、Chrome拡張機能「Stylebot」などでも適用できます。

CSSを書き込めるスタイルシートが表示されるので、コードを書きます。書き込めたら、「保存」をクリックします。

「WordPress編集画面のURLの最後の部分。 パーマリンクの詳細テキスト非表示」CSSを書き込む

コードは、以下のようになっています。

/*WordPress編集画面の「URLの最後の部分。 パーマリンクの詳細」テキスト非表示*/
.editor-post-link p {
  display: none;
}

保存する時、ブラウザによっては「このサイトを離れますか?」とダイアログが表示されます。「このページを離れる」をクリックします。ページがリロードされて、「変更を反映しました」と表示されればOKです。

このサイトを離れますか? 変更を反映しました

新しく記事編集画面を開きます。既に開いている場合は、一度下書き保存して、再度開きます。(またはリロード)

パーマリンクのURLスラッグの下の文字がごっそり非表示になります。間違えてクリックする心配がなくなります。

パーマリンクのURLスラッグの下にあるテキストを非表示にした画像

リンクだけ非表示にしたい場合

「パーマリンクの詳細」のリンクだけを無効化するコードも紹介します。文字は消さずに、クリックできないようにしたいだけの方は、こちらを使ってみてください。

/*WordPress編集画面の「パーマリンクの詳細」のリンクだけ無効化*/
.editor-post-link .components-external-link {
  pointer-events: none !important;
  color: unset !important;
}

/*「パーマリンクの詳細」の右にある矢印アイコン非表示*/
.editor-post-link .components-external-link svg {
  display: none;
}

適用すると、リンクの証である青の文字色が、元の黒になり、クリックしてもページが開かないようになります。見た目は、以前のままなので、人によってはこちらの方が好みかもしれません。

リンクだけ無効化して、テキストはそのまま表示させた画像

感想

以上、WordPressの編集画面のパーマリンク(URLスラッグ)下に表示される「URLの最後の部分。 パーマリンクの詳細」を非表示にする方法についてでした。

同じく、WordPressの編集画面で、画像を選択した時に表示される右側サイドバーの「画像の目的を説明。画像が単なる装飾の場合、空欄にします。」のテキストを非表示にする方法についても書いています。気になった方は、合わせて参考にしてみてください。

Posted by ナポリタン寿司