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

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

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

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

デフォルトの投稿一覧

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

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

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

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を追記するだけで特定の投稿タイプの一覧にだけ適用させることができます。

functions.php

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' );

Close the search window,
please press close button or esc key.