【WordPress】投稿一覧にパーマリンク等を表示する
親の顔よりもよく見た投稿一覧画面。
初期状態だと、タイトルとカテゴリー、投稿者、日時のみが表示されています。
それより細かい投稿の情報を見るには、投稿の編集画面を開くかクイック編集を開くことになります。
だったら最初から投稿一覧に表示させたいなと。
カラムを作って中身を入れるという流れ
投稿一覧の表示は「カラム」で制御されています。
パソコン用語というわけではありませんが、「カラム」とは列のことです。
投稿一覧の「表」の中に新しい列(「カラム」)を用意し、その列で表示する中身を投稿から呼び出す。
という流れが基本となります。
フィルターフック：manage_posts_columns
投稿一覧のカラムの作成にはフィルターフックmanage_posts_columnsを利用します。
固定ページ一覧の場合はmanage_pages_columnsを。
カスタム投稿の場合は、manage_{カスタム投稿名}_posts_columnsを利用します。(カスタム投稿がtest_layerなら、manege_test_layer_posts_columnsとなります。)
このフィルターフックのコールバック関数に投稿一覧で表示する内容が格納されている$columnsを渡し、カラムの作成や並べかえなどの操作が可能に。
アクションフック：manage_posts_custom_column
作成したカラムの中身はアクションフックmanage_posts_custom_columnで入れられます。
こちらも固定ページの場合はmanage_pages_custom_columnを。
カスタム投稿の場合はmanege_{カスタム投稿名}_posts_custom_columnです。
こちらがカラムで表示する内容を決める、ある意味ではメインのフックと言えるかもしれません。
パーマリンクを表示する
自分が投稿一覧に一番表示したいものは、パーマリンクです。
ブログカードや文字リンクを設置する時に、投稿記事一覧からコピーできるのが一番楽なんですよねー。
ブロックエディタになってから検索機能もいまいち使いづらいくて、アナログに慣れてしまいましたｗ
ではパーマリンクを表示するコードです。
//記事一覧にパーマリンク表示
//カラムの用意
function add_posts_columns_name( $columns ){
$columns[ 'permalink' ] = "パーマリンク";
return $columns;
}
add_filter( 'manage_posts_columns', 'add_posts_columns_name' );
//用意したカラムに記事のパーマリンクを表示する
function add_posts_column( $column_name, $id ){
if( $column_name == 'permalink' ){
echo get_permalink();
}
}
add_action( 'manage_posts_custom_column', 'add_posts_column' );カラムを用意するというよりは、追加するという方がニュアンスは近いですかね。
まずは’permalink’というカラムを追加し、表示名を”パーマリンク”にしてreturnします。
ここの’permalink’は内容を設定するときの判別に使うものなので、分かりやすいものにしましょう。
パーマリンクはpermalinkなのでこうしてます。
それをフィルターフックmanage_posts_columunsで有効化。
そして、$column_nameが追加した’permalink’のカラムであれば、パーマリンクを返す。
という流れです。
サムネイルを表示する
投稿のアイキャッチを表示させたい事もあります。
過去に画像投稿がメインのブログサイトを作成した時に、投稿タイトルではよくわからないのでサムネイルも表示させたことがあります。
このブログのように、テンプレで適当なアイキャッチを使用している場合はあれですが。
画像をたくさん使用して、アイキャッチで投稿を見分けてるようなブログには良いかもです。
あとは殺風景な投稿一覧に華やかさを添えることもできます。
//投稿一覧にサムネイル(アイキャッチ)表示
//カラムの追加
function custom_posts_columns( $columns ){
$columns['thumbnail'] = "アイキャッチ";
}
return $columns;
}
add_filter( 'manage_posts_columns', 'custom_posts_columns' );
//アイキャッチの表示
function add_column( $column_name, $post_id ){
if( $column_name == 'thumbnail' ){
$thum = get_the_post_thumbnail( $post_id, array( 150,150 ), 'thumbnail' );
if( isset( $thum ) && $thum ){
echo $thum;
} else {
echo __( 'None' );
}
}
}
add_action( 'manage_posts_custom_column', 'add_column', 10, 2 );カラムの追加はパーマリンクの時と変わりません。
アイキャッチを表示するために投稿に設定した画像を取得するのにget_the_post_thumbnail()を利用します。
第一引数はid、第ニ引数で表示サイズ、第三引数はHTMLに含める属性値なので一応’thumbnail’を。
で、アイキャッチを設定していれば表示、設定されていなければアイキャッチが無いときの画像を表示する。
という流れです。
記事一覧の縦幅がアイキャッチの表示分広くなるので最初は違和感がありますが、慣れてくると見やすくなる空白マジックも体験できますｗ
カラムの並べかえも
追加するだけだと、一覧の右側に表示されます。
タイトルの横など位置を変えたい場合もmanage_posts_columnsで可能です。
初期表示のものも一緒に指定できます。
function sort_posts_column( $columns ){
$columns = array(
'cb' => '<input type="checkbox" />',
'thumbnail' => 'アイキャッチ',
'title' => 'タイトル',
'date' => '日付',
'permalink' => 'パーマリンク',
);
return $columns;
}
add_filter( 'manage_posts_columns', 'sort_posts_column' );'cb'(チェックボックス)、’title’、’date’は初期表示されているものです。
その間に今回作成したアイキャッチとパーマリンクを表示するように並べ替えています。
実際、最初にカラムを追加したコードは新しい連想配列を1つ作っているだけなので、並び順まで決まっていればこれ一発で終わらせた方が良いかもしれません。
一つにするとわかりにくいのもあって、自分はあえてコードを分けて使うことも多いですが。
・・・無計画なだけかもしれませんｗ
投稿管理を快適に
ブログを運営していると、ここらへんの内容を使うことが多いかもしれません。
特にGoogle Adsenceを使っていると、誤クリックで罰則の対象にされてしまうこともあるので、(自分のサイトなのに)フロントを操作するのが怖くなることも・・・ありますｗ
なので、管理画面や投稿一覧で済ませられるなら、その方がいろんな意味で安全かと。
参考にさせて頂いた記事は、コードの書き方は違いますがここらへんの説明がスッと入ってきたものだったので。