WordPress標準のダッシュボードウィジェットには「アクティビティ」というのがあり、最近公開した投稿の一覧が表示されるようになっています。
今回はこれとは別のダッシュボードウィジェットを追加して、最終更新日順で並び替えた投稿の一覧を表示させる方法を紹介します。
サイトのコンテンツが充実してくると、最近リライトした投稿をパッと表示できるので結構重宝すると思います。
本ページ掲載のコードを使用するときは
本ページで掲載しているコードは、以下に了承した上で使用ください
- コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
- コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
- コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
- コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
- 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
- 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)
更新した投稿の一覧を表示させるダッシュボードウィジェットを追加するコード
以下のコードを有効化しているテーマのfunctions.phpへ追加します。
/***** 最近更新されたコンテンツをダッシュボードウィジェットとして表示 *****/
/*** 更新された投稿を表示するコールバック関数 ***/
function pwcn_ccustom_updated_posts_widget() {
//コンテンツの抽出
$query_args = array(
'post_type' => 'post',
'posts_per_page' => 10, // 表示する投稿数
'orderby' => 'modified', // 最終更新日でソート
'order' => 'DESC' // 降順
);
$recent_posts = new WP_Query($query_args);//クエリを実行
//抽出条件分だけ繰り返してリスト化
if ($recent_posts->have_posts()) {
echo '<ul>';
while ($recent_posts->have_posts()) {
$recent_posts->the_post();
$modified_date = get_the_modified_date();
echo '<li>';
$edit_link = get_edit_post_link(get_the_ID());// 編集リンクを取得
// 更新日と投稿のステータスを表示
$draft_title = __('[下書き]','');
$published_title = __('[公開済み]','');
$other_title = __('[その他]','');
if (get_post_status() == 'draft') {//下書きのとき
echo ' <span style="color: red;font-weight:500;">'.esc_html($modified_date.$draft_title). '</span>';
}else if(get_post_status() == 'publish'){//公開済みのとき
echo ' <span style="color: green;font-weight:500;">'.esc_html($modified_date.$published_title). '</span>';
}else{//その他
echo ' <span style="color: blue;font-weight:500;">'.esc_html($modified_date.$other_title). '</span>';//その他
}
echo '<a href="' . esc_url($edit_link) . '">' . esc_html(get_the_title()) . '</a>';
echo '</li>';
}
echo '</ul>';
}else{
echo '<p>' . __('最近更新された投稿はありません。','') . '</p>';
}
wp_reset_postdata();
}
/*** ウィジェットをダッシュボードに追加 ***/
function pwcn_add_custom_updated_posts_widget() {
$title = __('最近更新された投稿','');
wp_add_dashboard_widget(
'pwcn_custom_updated_posts_widget',
$title,
'pwcn_ccustom_updated_posts_widget'
);
}
add_action('wp_dashboard_setup', 'pwcn_add_custom_updated_posts_widget');
コードを追加したらダッシュボードを表示させて、「最近更新された投稿」というウィジェットが表示されているかを確認ください。
このままでは表示崩れをしているので、以下のコードをさらに追加して体裁を整えます(アクティビティウィジェットと同じスタイルになるようにしています)。
function pwcn_custom_updated_posts_widget_style_init(){
?>
<style>
#pwcn_custom_updated_posts_widget li{
display: grid;
grid-template-columns: clamp(160px, calc(2vw + 140px), 200px) auto;
column-gap: 10px;
color: #646970;
padding: 4px 12px;
}
#pwcn_custom_updated_posts_widget li:nth-child(odd) {
background-color: #f6f7f7;
}
#pwcn_custom_updated_posts_widget ul {
margin: 8px -12px 0 -12px;
}
</style>
<?php
}
add_action('admin_head','pwcn_custom_updated_posts_widget_style_init');
コードは以上です。結構短いコードで実装できます。
各種変更の方法
コード中にある以下の部分を変更することで、投稿タイプを追加したり、表示数を変更したりできます。
//コンテンツの抽出
$query_args = array(
'post_type' => 'post',
'posts_per_page' => 10, // 表示する投稿数
'orderby' => 'modified', // 最終更新日でソート
'order' => 'DESC' // 降順
);
「’post’」となっている部分を「array(‘post’,’page’)」とすると、投稿と固定ページを含めることができます。
「10」となっている数字を変更することで表示数を変えることができます。
コードの簡易解説
以下コードの簡易解説です(本当に簡易に書いています)。
まずはウィジェット内に表示させる内容のコールバック関数(pwcn_ccustom_updated_posts_widget)を作り、その内容を表示させる関数(pwcn_add_custom_updated_posts_widget)を作り、「wp_dashboard_setup」にフックさせてウィジェットを追加しています。
コールバック関数の内容は、クラシックテーマなどで一覧表示させるテンプレートで見たことがあるようなコードで、条件に合致したものをWP_Queryで抽出し、while以下でその数分だけを出力するというものです。
コードでは「post(投稿)」を「modified(最終更新日)」を基準として「DESC(新しい順)」で「10」件抽出し、ulタグ(リストタグ)を使って一覧表示させています。
最終更新日順のリストでは「公開済」だけでなく「下書き保存」したものや「その他(非公開など)」があるので、それぞれが分かるように日付の後にステータスを表示させるようにしています。
コメントを残す