投稿一覧ページに「更新日時」カラムを追加してみた

説明

サイトの特性によるが、「投稿」には繰り返し更新するものがある。そんなサイトでは投稿一覧ページに「更新日時」があった方が便利。というわけで、今回は投稿一覧にソートに対応した「更新日時」カラムを追加する方法を紹介する。

ステップ1「更新日時」列の追加

まずは投稿一覧に「更新日時」列を追加する。ここで使用するのは、WP_Posts_List_Tableクラスの'manage_posts_columns'フィルターである。

add_filter( 'manage_posts_columns', 'add_modified_column' ), 10, 2 );

function add_modified_column( $posts_columns, $post_type ) {
	if ( 'post' === $post_type ) {
//		$posts_columns['modified'] = __( 'Last updated' );
		$posts_columns['modified'] = '更新日時';
	}
	return $posts_columns;
}

パラメータ$posts_columnsは連想配列であり、ここでは投稿タイプが'post'の場合のみ「更新日時」列を追加している。連想配列に指定するキーの'modified'は'column-modified'となり、この列のクラスとなる。

見出しに「更新日時」が追加された

見出しの値には__( 'Last updated' )を指定することで、日本語環境の場合は'最終更新日時'が適用されるようになる。国際化を意識するプラグインであればこちらの方がよいのだが、画面幅が狭い時の折り返しが気になったので、ここではあえて'更新日時'を指定した。

ステップ2「更新日時」カラムの内容を表示

各投稿情報の「更新日時」カラムは'display_modified_custom'アクションを使用して表示する。

add_action( 'manage_posts_custom_column', 'display_modified_column', 10, 2 );

function display_modified_column( $column_name, $post_ID ) {
	if ( 'modified' === $column_name ) {
		$post = get_post( $post_ID );
		echo nl2br( esc_html( date( "H時i分\nY年n月j日", strtotime( $post->post_modified ) ) ) );
	}
}

このアクションは標準にないカラムを表示する際に実行されるもので、パラメータ$column_nameにはそのカラム名が、$post_IDには投稿IDが格納されている。ここでは1行目に「更新時間」を、2行目に「更新日」を表示し、「日付」カラムの「投稿日」と比較しやすいようにしてみた。

「更新日時」の各カラムに更新日時が表示された

【追記】投稿一覧ページには、リストビューと抜粋表示の表示モードがある。グローバル変数$modeを参照することで、表示モードによってカラムの内容を切り替えできる($modeはWP_Posts_List_Tableクラスのprepare_itemsメソッドで更新される)。

global $mode;

if ( 'excerpt' === $mode ) {
	// 「抜粋表示」時の表示
} else {	// 'list'
	// 「リストビュー」時の表示
}

ステップ3「更新日時」カラムをソート可能に

先に追加した「更新日時」カラムは昇順または降順でソート可能にできる。

add_filter( 'manage_edit-post_sortable_columns', 'make_modified_column_sortable', 10, 1 );

function make_modified_column_sortable( $sortable_columns ) {
//	$sortable_columns['modified'] = 'modified';
	$sortable_columns['modified'] = array( 'modified', true );
	return $sortable_columns;
}

ここで使用する'manage_edit-post_sortable_columns'フィルターは、WP_Posts_List_Tableクラスではなく、その親のWP_List_Tableクラスで定義されているフィルターである。

$_sortable = apply_filters( "manage_{$this->screen->id}_sortable_columns", $sortable_columns );

変数の$this->screen->idは、使用されているページによって決まるもので、投稿一覧ページの場合は'edit-'に投稿タイプ名を付けたものになる。'edit'の後はアンダースコア('_')ではなく、ハイフン('-')なので注意すること。

フィルターが受け取るパラメータには連想配列であり、標準では次のようになっている。

array(
	'title'    => 'title',
	'parent'   => 'parent',
	'comments' => 'comment_count',
	'date'     => array( 'date', true ),
);

この連想配列に対して'modified'キーに格納する値は'modified'array( 'modified', true )のどちらか。単に'modified'を指定した場合は初期状態が「昇順」になり、配列で指定した場合は初期状態が「降順」になる。

見出しの「更新日時」がクリック可能になり、マウスカーソルを移動すると▼が表示された

「更新日時」カラムをソート可能にするための対応はこれだけ。これはソート対象に'modified'を指定した場合、投稿情報を検索する際に'post_modified'として解釈されるためである。

ステップ4「更新日時」カラムの幅を調整

機能面の対応はこんな感じで、あとは'admin_print_styles'アクションで表示を微調整。「更新日時」カラムの幅は標準では何も指定されていないので、「日付」カラムなどに比べて広くなってしまう。これを解決するため、'list-tables'スタイルにインラインデータとして「更新日時」カラムの幅を追加する。

add_action( 'admin_print_styles', 'adjust_width_modified_column' );

function adjust_width_modified_column() {
	$data = <<<EOT
.fixed .column-modified { width: 10%; }
@media screen and (max-width: 1320px) {
	.fixed .column-date, .fixed .column-modified { width: 12.5%; }
}
EOT;
	wp_add_inline_style( 'list-tables', $data );
}

「更新日時」カラムの幅指定は標準のスタイルに合わせて10%とし、画面幅が狭い場合は12.5%とした。日本語環境に限定するなら、最大文字数を考慮した8remのような指定でもよいだろう。

「更新日時」列が隣接する「日付」と同じ幅になった

サイトの特性に合わせたカスタマイズを

投稿一覧ページは'manage_posts_columns'フィルターを使用することで、'タイトル'を'品名'に変えるような見出しの変更したり、'タイトル'列の次に'日付'列を表示するような列の入れ替えも可能である。今回は投稿情報( WP_Postオブジェクト)のプロパティの1つである更新日時を追加したが、そののほかのプロパティ値はもちろん、カスタムフィールドやメディアといった投稿情報に紐づけされた付加情報も追加できる。


最終更新 : 2019年08月27日 10:36


お勧め

get_template(2011年9月8日 更新)

string get_template( )
現在のテーマ名を取得する。

paginate_links(2017年11月17日 更新)

mixed paginate_links( [ mixed $args = '' ] )
(アーカイブページ向けの)ページネートリンクを取得する。

wp_normalize_path(2018年7月6日 更新)

string wp_normalize_path( string $path )
パス名を標準化する。

load_textdomain(2018年5月27日 更新)

bool load_textdomain( string $domain, string $mofile )
国際化用ファイル(MOファイル)をロードする。

wp_upload_dir(2018年5月27日 更新)

array wp_upload_dir( [ string $time = null [ , bool $create_dir = true [ , bool $refresh_cache = false ] ] ] )
アップロードディレクトリ(パス名)を取得する。