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

2022年12月29日2023年11月9日WordPress

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

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

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

通常、PCブラウザからアクセスした「WordPress」の右側サイドバーから不要なパネルを非表示したい場合、右上の三点リーダボタン→「設定」をクリックします。

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

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

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

しかし、ブログのトップに固定、レビュー待ち、ゴミ箱へ移動といったボタンは、通常の設定からは削除できません。CSSを利用することで、自身の環境上で見えないよう非表示にできます。誰にも迷惑をかけません。いつでもオンオフできます。

これらのボタンを使っていない方、ついつい押し間違えてしまう方、参考にしてみてください。本記事は、PCユーザー向けです。Chrome拡張機能が利用できないスマホでは利用できません。また、僕はブロックエディター（Gutenberg）を利用しています。クラシックエディターは知りません。

1. インストール方法
2. WordPress編集画面のサイドバー内の不要な項目を削除するCSS
3. その他のWordPress×CSS記事の紹介
4. 感想

インストール方法

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

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

Stylebot

Change the appearance of the web instantly

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

使っているテーマによっては、拡張機能を使わなくてもいけるかも？

使っているWordPressテーマによっては、子テーマの編集ページに、「投稿エディタ用スタイル」があるかもしれません。これは記事編集画面だけに適用する専用のスタイルシートです。

拡張機能を使わなくても、ここに直接CSSを書き込めば、反映されるかもしれません。本記事では、エディタ用スタイルシートが用意されていない場合や、キャッシュの影響で反映されない方でもできるように、安定の拡張機能を利用します。

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

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

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

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

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

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。

/*「ブログのトップに固定」削除*/
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 button.editor-post-trash {
    display: none !important;
}

注意事項

本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。

全部を書き込む必要はありません。皆さんが消したい項目を選んで、書き込んでみてください。「display: none !important;」が非表示にするという意味です。下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。