Web Materia BLOG

ウェブマテリアブログ

Jul

30

2014

0

COMMENTS

WordPressの管理画面の投稿記事一覧をカスタマイズ。

Category:Wordpress

WordPressの管理画面の投稿記事一覧をカスタマイズ。

WordPressの投稿のステータス各種

Wordpressの投稿一覧においてWordpressの記事は必ず以下の6種のステータスのどれかに該当致します。  
  • 公開済み
  • 下書き
  • 非公開
  • レビュー待ち
  • パスワード保護
  • 予約投稿
  今回はこのステータス毎に背景色を変更させる事により、記事一覧でどの記事がどのステータスなのかをすぐ分かるようにします。  

function.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' );
上記のコードは各ステータスを持つtrにclassを付与するというコードになります。 ですのでそのクラスにCSSを記載する事により様々な表示が可能になります。例題では背景色を変更するCSSが記述されていますが文字サイズを変更したり高さを変更するなども可能です。  

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

先ほどの記述の注意点として固定ページやカスタム投稿がある場合は、先ほどとは別でクラスを指定する必要があります。なぜなら先ほどの記述だけでは投稿だけでなく固定ページやカスタム投稿の一覧にも適用されてしまうからです。

通常投稿の種類によって下記のようにそれぞれクラスが付くので、これを利用することで特定の投稿タイプにだけ適用できます。

 
  • 投稿【type-post】
  • 固定ページ【type-page】
  • カスタム投稿の投稿タイプがblogの場合【type-blog】
 

以下は固定ページのみ背景色の変更を実装したいという場合です。先の記述のようにクラスを記載するだけで特定の投稿タイプにCSSを当てる事ができます。

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

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

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

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

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

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

Comments

comments



Archive

Category


PageTOPへ