WordPress管理画面で投稿ステータスに合わせて背景色を変更する方法
  • WordPress管理画面で投稿ステータスに合わせて背景色を変更する方法
  • 記事公開:2019/02/28
  • 最終更新:2019/02/22

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

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

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

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

投稿や固定ページには、全部で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つのステータスを頻繁に使う方は、記事一覧が見やすくなると思います。
ぜひカスタマイズを試してみてください。

著者:takaya kondo

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

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

Wordpressサイトのカスタマイズで
お困りではありませんか?

あなたのWordpressサイトを、ご希望に沿ってカスタマイズいたします。
次に該当する方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしたいが、自分でカスタマイズする暇がない。カスタマイズが得意な人に丸投げしたい。
  • Wordpressサイトをカスタマイズしてみたが、上手くカスタマイズできなかった。カスタマイズ経験が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。

一つでも該当する方は、以下のリンクからチェックしてみてください。

詳細を確認する

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

  • 2015/09/17

    カスタム投稿でAll in One SEO Packを使えるようにする方法

    ここでは、任意のカスタム投稿でAll in One SEO Packを使えるようにする方法をご紹介しています。カスタム投稿を設置したとき、All in One SEO Packの設定項目が表示されず困ったので、解決方法を探してみました。同じようにお困りの方、参考にしてください。 記事を読む

  • 2015/11/10

    プラグインは不要!WordPressサイトに人気記事一覧をパパッと設置しよう。

    WordPressサイトに人気記事一覧をパパッと設置する方法をご紹介します。プラグインは使いません。人気記事一覧を簡単に設置したい方には必見の内容です。3分後にはあなたのサイトに人気記事一覧が設置できてしまします。 記事を読む

  • 2019/02/18

    プラグイン更新でメンテナンスモードが解除されない場合の対処法

    Wordpressでプラグインのバージョンアップを行う際は、作業中は自動的にメンテナンスモードに切り替わります。通常であればメンテナンスモードは自動的に解除されるのですが、稀に解除されない不具合が生じる場合があります。こちらの解決方法をまとめてみました。 記事を読む

  • 2015/09/11

    WordPressのテーマフォルダにある画像をテーマファイルで表示させるスマートな方法

    テーマフォルダの画像をテーマファイル内でスマートに表示させよう! WordPressのオリジナルテーマを作成し ... 記事を読む

  • 2015/09/20

    WordPress管理画面にPDF形式のマニュアルを埋め込む方法

    WordPress管理画面にPDF形式のマニュアルを埋め込む方法のご紹介です。クライアントにサイトを納品する時など、管理画面にWordPressの操作マニュアルを設置しておくと喜ばれます。今回はPDF形式のマニュアルを埋め込む方法です。 記事を読む

コメントを残す

(必須)

CAPTCHA