背景色を変更してパッ見で記事のステータスを判断したい。
投稿や固定ページには、全部で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管理画面で投稿ステータスに合わせて背景色を変更する方法をご紹介しました。
管理画面の記事一覧には、ステータスによって独自のクラスが設定されています。そのクラスに対して個々に背景色を設定してやることで、ステータスによって背景色を変える方法です。
６つのステータスを頻繁に使う方は、記事一覧が見やすくなると思います。
ぜひカスタマイズを試してみてください。
【WordPress】Search Regexの検索対象にカスタム投稿を含める方法
カスタム投稿名とカスタムタクソノミー名の調べ方
コメントを残す