【WordPress】編集画面右側の不要な項目を非表示にするCSS

WordPress

「WordPress」のアイコン

この記事では、「WordPress(ワードプレス)」の記事編集画面の右側サイドバーにある「ブログのトップに固定」、「レビュー待ち」、「投稿者」、「ゴミ箱へ移動」の項目を非表示にするCSSを紹介します。

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

WordPressの右側サイドバーにある「ブログのトップに固定」、「レビュー待ち」、「投稿者」、「ゴミ箱へ移動」ボタンを非表示にする前と後の比較画像

本記事で紹介するCSSを使えば、WordPress記事編集画面の右側サイドバー「投稿」ページにある「ブログのトップに固定」、「レビュー待ち」、「投稿者」、「ゴミ箱へ移動」といった項目を削除できます。これらの項目は、通常の設定からは非表示にできません。

パネル単位で非表示にしたい場合は、右上の三点リーダボタン→「設定」をクリックします。

ブロックエディターのWordPressサイドバーに表示するパネルを切り替える手順画像1

左側の「パネル」をクリックします。ここから不要なパネルをオフにすることで、見た目上非表示にできます。

ブロックエディターのWordPressサイドバーに表示するパネルを切り替える手順画像2

今回は、設定から非表示にできない「ブログのトップに固定」、「レビュー待ち」といったボタンを消します。自身の環境上で、誰にも迷惑をかけません。これらのボタンを使っていない方、ついつい押し間違えてしまう方、参考にしてみてください。

本記事は、PCユーザー向けです。Chrome拡張機能が利用できないスマホでは利用できません。また、僕はブロックエディター(Gutenberg)を利用しています。クラシックエディターは知りません。

「Stylebot(スタイルボット)」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

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

使っているテーマで、WordPressの投稿用エディタースタイルシートがある場合は、そちらに書き込むと反映されます。本記事では、シートがない方やキャッシュの影響で反映されない方でもできるように、安定の拡張機能を利用します。

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

Firefox・Edgeをご利用の場合

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

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

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

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

WordPress編集画面のサイドバー内の不要な項目を削除するCSS

WordPressの管理画面にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

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

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。全部を書き込む必要はありません。自分が消したいボタンだけ書き込みます。

/*「ブログのトップに固定」削除*/
div[aria-label="エディター設定"] .edit-post-post-status .components-panel__row:nth-of-type(4) {
  display: none !important;
}

/*「レビュー待ち」削除*/
div[aria-label="エディター設定"] .edit-post-post-status .components-panel__row:nth-of-type(5) {
  display: none !important;
}

/*「投稿者」削除*/
div[aria-label="エディター設定"] .edit-post-post-status .components-panel__row.edit-post-post-author {
  display: none !important;
}

/*「ゴミ箱へ移動」削除*/
div[aria-label="エディター設定"] .edit-post-post-status .components-panel__row:has(button.editor-post-trash) {
  display: none !important;
}

「display: none !important;」が非表示にするという意味です。下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

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

再度拡張機能ボタンを押して、自身のサイトがオンになっていることを確認します。オンになっている間は有効になっているということです。

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

記事編集画面を開きます。右側サイドバーを開いて、「ブロック」ではなく、「投稿」タブに切り替えます。書き込んだ項目が消えています。「ブログのトップに固定」、「レビュー待ち」、「投稿者」、「ゴミ箱へ移動」すべてを消せます。

WordPressの右側サイドバーにある「ブログのトップに固定」、「レビュー待ち」、「投稿者」、「ゴミ箱へ移動」ボタンを非表示にした画像

スッキリして、押し間違える心配もありません。

一時的に無効化したい場合は、「Stylebot」→自身のサイトURLをオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

感想

以上、WordPress編集画面のサイドバーにある「ブログのトップに固定」、「レビュー待ち」、「投稿者」、「ゴミ箱へ移動」を個別に削除する方法でした。

余談ですが、設定→一般→「インターフェースの削減」をオンにすると、いくつかのボタンが非表示になり、マウスホバーで表示するようになります。ヘッダーの「下書き保存」や「リスト表示」ボタンなどです。見た目をスッキリさせたい方におすすめです。

WordPressブロックエディターの設定→一般画像

記事編集画面を好みに改造することで、より効率的に記事執筆できます。

WordPress