WordPress管理画面で投稿ステータスに合わせて背景色を変更する方法
MENU
  1. HOME
  2. WordPress / カスタマイズ
  3. WordPress管理画面で投稿ステータスに合わせて背景色を変更する方法

最近の作業実績

  • 2022年10月18日不要になっていたコンテンツをサイト内から除去いたしました。
  • 2022年10月17日サイト内の画像が表示されない不具合を修正いたしました。
  • 2022年10月16日サイト内で発生した大量の404エラーを修正いたしました。
  • 2022年10月15日既存サイトの各所を簡単に更新できる機能を追加いたしました。
  • 2022年10月14日過去記事を定期的に自動ツイートする機能をテーマに実装いたしました。
  • 2022年10月13日サイト内の広告を一括管理できる機能をテーマに実装いたしました。
  • 2022年10月12日既存サイトのトップページを再構築いたしました。
  • 2022年10月11日クラシックエディターで管理されていたコンテンツをブロックエディターで再構築いたしました。
  • 2022年10月10日複数のサイトの更新情報を一括表示させる機能をテーマに実装いたしました。
  • 2022年10月09日WordPressの管理画面にオリジナルの管理ページを実装いたしました。
  • 2022年10月08日コンタクトフォーム7で構築されたフォームに確認画面とサンクスページを導入いたしました。
  • 2022年10月07日既存サイトのサーバー移管を担当いたしました。
  • 2022年10月06日フッターのレイアウトを再設計いたしました。
  • 2022年10月05日既存サイトのカラーを一括管理できる機能をテーマに実装いたしました。
  • 2022年10月04日新規ページを5ページ作成いたしました(デザイン込み)。
  • 2022年10月03日訪問者に閲覧履歴を表示する機能をテーマに実装いたしました。
  • 2022年10月02日ログインできなくなったWordPressを復旧いたしました。
  • 2022年10月01日オリジナルテーマの制作を担当いたしました。
  • 2022年09月30日破損していたテーマを修正いたしました。
  • 2022年09月29日アフィリエイト審査用のサイト立ち上げを担当いたしました。
  • このエリアには直近の制作実績を一部掲載しております。
  • 制作実績はリアルタイム反映ではありません。

WordPress管理画面で投稿ステータスに合わせて背景色を変更する方法

この投稿は2019/09/15に加筆修正いたしました。

WordPress管理画面で投稿ステータスに合わせて背景色を変更する方法をご紹介します。公開済みの記事は赤、下書きの記事は緑、ステータスによって背景色を変更することで、パッと見ただけで各記事のステータスを確認することができます。

この記事は約 7 分で読めます。

背景色を変更してパッ見で記事のステータスを判断したい。

投稿や固定ページには、全部で6つのステータスがあります。

  • 公開済み
  • 下書き
  • パスワード保護
  • 非公開
  • レビュー待ち
  • 予約済み

これらのステータスをよく使う方には理解していただけるかと思うのですが、6つのステータスが混在する管理画面の投稿一覧とは、非常に見にくいと感じることがあります。

パッと見ただけで、どの記事がどのステータスか分かる様にしたと常々思っていました。

もちろん、各投稿には現在のステータスが文字で表示されているし、特定のステータスの記事だけを一覧で表示することもできます。これでも十分なのですが、個人的はパッと見たとき、各記事がどのステータスなのか認識できるようにしたかったのです。

そこで思いついたのが、背景色をステータスによって切り替えるという方法です。
以下が、通常の記事一覧画面です。

これを以下の様に色分けしてやります。

こうしておけば、パッと見たときに色でステータスを判断することができますね。

今回は、投稿一覧の背景色を記事のステータスで切り替えるカスタマイズをご紹介します。

WordPressの投稿一覧で記事のステータスに合わせて背景色を変更する方法

投稿、固定ページ、カスタム投稿、それぞれで記事のステータスによって背景色を変更する方法をご紹介します。カスタマイズは簡単で、ご紹介するコードをfunctions.phpにコピペするだけ。

個別に見ていきましょう。

投稿の一覧画面でステータスに合わせて背景色を変更する方法

以下のコードを、functions.phpに追記してください。

function post_background_change() {
?>
<style type="text/css">
.posts .status-publish { background: #00BFFF !important;} /* 公開済み */
.posts .status-draft { background: #F8B856 !important;} /* 下書き */
.posts .post-password-required { background: #FFF462 !important;} /* パスワード保護 */
.posts .status-private { background: #B6D56A !important;} /* 非公開 */
.posts .status-pending { background: #2BB7B3 !important;} /* レビュー待ち */
.posts .status-future { background: #FF69B4 !important;} /* 予約済み */
</style>
<?php }
add_action( 'admin_head', 'post_background_change' );

上記のコードを記述すると、記事のステータスによって以下のように背景色が変更されます。

公開済み=#3ABEFF
下書き=F8B856
パスワード保護=#FFF462
非公開=#B6D56A
レビュー待ち=#2BB7B3
予約済み=#FF69B4

背景色を任意の色に変えたい場合は、上記コードの中にあるカラーコードを変更してください。

【!important】を削除すると、設定したに背景色が反映され無い場合があります。
削除しないように注意してください。

固定ページの一覧画面でステータスに合わせて背景色を変更する方

以下のコードを、functions.phpに追記してください。

function page_background_change() {
?>
<style type="text/css">
.pages .status-publish { background: #00BFFF !important;} /* 公開済み */
.pages .status-draft { background: #F8B856 !important;} /* 下書き */
.pages .post-password-required { background: #FFF462 !important;} /* パスワード保護 */
.pages .status-private { background: #B6D56A !important;} /* 非公開 */
.pages .status-pending { background: #2BB7B3 !important;} /* レビュー待ち */
.pages .status-future { background: #FF69B4 !important;} /* 予約済み */
</style>
<?php }
add_action( 'admin_head', 'page_background_change' );

投稿の時のコードと比べると【.posts】の部分が【.pages】に変わっています。
こちらも背景色を任意の色に変更してください。

カスタム投稿の一覧画面でステータスに合わせて背景色を変更する方法

以下のコードを、functions.phpに追記してください。

function custom_post_background_change() {
?>
<style type="text/css">
.post-type-カスタム投稿名 .status-publish { background: #00BFFF !important;} /* 公開済み */
.post-type-カスタム投稿名 .status-draft { background: #F8B856 !important;} /* 下書き */
.post-type-カスタム投稿名 .post-password-required { background: #FFF462 !important;} /* パスワード保護 */
.post-type-カスタム投稿名 .status-private { background: #B6D56A !important;} /* 非公開 */
.post-type-カスタム投稿名 .status-pending { background: #2BB7B3 !important;} /* レビュー待ち */
.post-type-カスタム投稿名 .status-future { background: #FF69B4 !important;} /* 予約済み */
</style>
<?php }
add_action( 'admin_head', 'custom_post_background_change' );

上記の【カスタム投稿名】を背景色を変更したいカスタム投稿のスラッグに置き換えてください。
カスタム投稿のスラッグが【test】の場合は、【test】に置き換えます。

全ての一覧画面でステータスに合わせて背景色を変更する方法

以下のコードをfunctions.phpに追記してください。

function all_background_change() {
?>
<style type="text/css">
.status-publish { background: #00BFFF !important;} /* 公開済 */
.status-draft { background: #F8B856 !important;} /* 下書き */
.post-password-required { background: #FFF462 !important;} /* パスワード保護 */
.status-private { background: #B6D56A !important;} /* 非公開 */
.status-pending { background: #2BB7B3 !important;} /* レビュー待ち */
.status-future { background: #FF69B4 !important;} /* 予約投稿 */
</style>
<?php }
add_action( 'admin_head', 'all_background_change' );

これまでのコードと比べると【.posts】【.pages】【.カスタム投稿名】が記載されていません。
今回のコードを記載すると、投稿、固定ページ、カスタム投稿、全ての背景色が変更されます。

まとめ

WordPress管理画面で投稿ステータスに合わせて背景色を変更する方法をご紹介しました。

管理画面の記事一覧には、ステータスによって独自のクラスが設定されています。そのクラスに対して個々に背景色を設定してやることで、ステータスによって背景色を変える方法です。

6つのステータスを頻繁に使う方は、記事一覧が見やすくなると思います。
ぜひカスタマイズを試してみてください。

Wordpressのカスタマイズや不具合など
何かお困りのことはありませんか?

Wordpressに関連するあなたのお悩み、解決いたします。
次のような方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトに不具合が発生したが、直し方が分からない。不具合の修正経験が豊富な人に任せたい。
  • 既存サイトにWordPressを導入したいが、やり方が複雑で自分ではできそうにもない。経験が豊富な人に任せたい。
  • WordPressがハッキングされたが修正の仕方が分からない。サイトを元通りにできる人を探している。
  • Wordpressで0からサイトを制作したいが、自分ではできそうにもない。プロにサイト制作を委託したい。

一つでも該当する方は、以下のフォームからお気軽にご相談下さい。

WordPressに関して今すぐ相談する

著者:takaya kondo

岡山在住のWordPress専門フリーランサーです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

コメントを残す

(必須)

CAPTCHA