WordPress：投稿一覧で記事ステータス毎に背景色を変更する方法

ステータス毎に見たいなら普通にページ上部にあるソート機能とか検索機能使えばいい話なんですけど、せっかく試したので備忘録です。
WordPressの投稿一覧で記事ステータス毎に任意の背景色を指定する方法で、それぞれの記事が現在「公開済み」や「下書き」など、どのステータスなのかをパッと見でわかるようにするものです。

きっかけはかちびとさんの「管理画面の記事一覧で予約投稿とか下書きで色分け出来るWordPressプラグイン・Color Admin Posts」という記事で、「わざわざプラグインでしなくても...」みたいなことが記事内に書かれていて自分もそう思ったのでfunctions.phpを使って実装してみました。

上のイメージはデフォルトの投稿一覧をキャプチャしたもので、以下6種類の投稿ステータスを持った記事があります。

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

冒頭にも書いたようにページ上部にあるソート機能を使えば「公開済みのみ」とか「下書きのみ」というように絞り込みは可能ですが、下記のようにfunctions.phpに記述することで各ステータス毎に背景色を設定することができ、パッと見でどのステータスの投稿なのかを色で判断することができます。

function change_post_status_background_color() {
?>
<style type="text/css">
  /* 公開済 */
  .status-publish { background-color: #3498db;}

  /* 下書き */
  .status-draft { background-color: #1abc9c;}

  /* 非公開 */
  .status-private { background-color: #9b59b6;}

  /* レビュー待ち */
  .status-pending { background-color: #f1c40f;}

  /* パスワード保護 */
  .post-password-required { background-color: #f39c12;}

  /* 予約投稿 */
  .status-future { background-color: #e74c3c;}
</style>
<?php }
add_action( 'admin_head', 'change_post_status_background_color' );

上記コードのコメントにあるように、ステータス毎にそれぞれclassが付加されているので、CSSでそのclassを持つtrに対して背景色を指定するというものになります。
記述後に投稿一覧を確認すると、下のイメージのように各ステータス毎に背景色が変更されていることを確認できます。

このイメージでは文字カラーも同時に変更しているものをキャプチャしたもので、このように背景色を変更した際に文字が読み辛いと感じた場合は、先ほどの記述に文字色等も追記してやれば任意の色に変更できます。

固定ページやカスタム投稿などもある場合

先ほどのように記述することで投稿ステータス毎に背景色を変更することができるのですが、このまま使用すると投稿だけでなく固定ページやカスタム投稿の一覧にも適用されます。
固定ページやカスタム投稿には適用させたくないとかカスタム投稿のみに適用させたいというように、適用させる一覧を任意で指定したいという場合は、先ほど紹介したclassに追記でそれぞれの投稿タイプのclassを記述してあげることで実装することができます。

具体的には投稿の場合は.type-post、固定ページの場合は.type-page、カスタム投稿の場合は例えば投稿タイプを「news」であれば.type-newsというような感じでそれぞれclassが付くので、これを利用することで特定の投稿タイプにだけ適用できます。

下記は「news」というカスタム投稿の一覧画面にのみ背景色の変更を実装したいという場合の記述例になり、先ほどのコードにハイライト部分のようにclassを追記するだけで特定の投稿タイプの一覧にだけ適用させることができます。

function change_post_status_background_color() {
?>
<style type="text/css">
  /* 公開済 */
  .type-news.status-publish { background-color: #3498db;}

  /* 下書き */
  .type-news.status-draft { background-color: #1abc9c;}

  /* 非公開 */
  .type-news.status-private { background-color: #9b59b6;}

  /* レビュー待ち */
  .type-news.status-pending { background-color: #f1c40f;}

  /* パスワード保護 */
  .type-news.post-password-required { background-color: #f39c12;}

  /* 予約投稿 */
  .type-news.status-future { background-color: #e74c3c;}
</style>
<?php }
add_action( 'admin_head', 'change_post_status_background_color' );