WordPressでローカルエリア型の比較サイトや情報サイトを運用している方に向けて、「エリア別の更新情報を自動でサイドバーに表示する方法」をご紹介します。
本記事では、SWELLテーマを使用しているサイトを前提に、都道府県＞市区町村＞区のようなカテゴリー階層を活かして、ユーザーに最新情報を視覚的に伝えるウィジェットを作る方法を解説します。
都道府県ページ（またはその配下の投稿）を見ているときに、その都道府県内の更新情報が次のように表示されます：
functions.php または Code Snippets にPHPコードを追加以下のコードをfunctions.phpもしくはCode Snippetsに貼り付けてください。
// 再帰的に最上位カテゴリ（都道府県）を取得
function get_top_parent_category($cat_id) {
$category = get_category($cat_id);
while ($category->parent != 0) {
$category = get_category($category->parent);
}
return $category;
}
// 更新情報ショートコード [area_updates]
function area_update_info_shortcode() {
if (is_single()) {
$cats = get_the_category();
if (empty($cats)) return '';
$top_cat = get_top_parent_category($cats[0]->term_id);
} elseif (is_category()) {
$cat = get_queried_object();
$top_cat = get_top_parent_category($cat->term_id);
} else {
return '';
}
if (!$top_cat) return '';
$descendant_cats = get_categories([
'child_of' => $top_cat->term_id,
'hide_empty' => false,
'fields' => 'ids'
]);
if (empty($descendant_cats)) return '';
$recent_posts = get_posts([
'numberposts' => 30,
'orderby' => 'modified',
'order' => 'DESC',
'post_status' => 'publish',
'category__in' => $descendant_cats,
]);
$results = [];
$shown = [];
foreach ($recent_posts as $post) {
$categories = get_the_category($post->ID);
foreach ($categories as $cat) {
if (in_array($cat->term_id, $descendant_cats)) {
if (!isset($shown[$cat->term_id])) {
$results[] = [
'cat_name' => $cat->name,
'cat_link' => get_category_link($cat->term_id),
'date' => get_the_modified_date('Y年n月j日', $post)
];
$shown[$cat->term_id] = true;
}
}
}
if (count($results) >= 10) break;
}
if (empty($results)) return '';
// 出力HTML
$output = '<div class="area-updates-widget">';
$output .= '<div class="area-updates-title"><i class="fas fa-crown"></i> ' . esc_html($top_cat->name) . 'エリアの更新情報</div>';
$output .= '<ul class="area-updates-list">';
foreach ($results as $item) {
$output .= '<li class="area-updates-row">';
$output .= '<div class="area-update-line-top">';
$output .= '<a href="' . esc_url($item['cat_link']) . '" class="area-updates-name">';
$output .= esc_html($item['cat_name']) . 'の一覧を最新化';
$output .= '</a>';
$output .= '</div>';
$output .= '<div class="area-update-line-bottom">';
$output .= '<span class="area-updates-date">' . esc_html($item['date']) . '</span>';
$output .= '</div>';
$output .= '</li>';
}
$output .= '</ul></div>';
return $output;
}
add_shortcode('area_updates', 'area_update_info_shortcode');
// Font Awesome 読み込み
function enqueue_fontawesome_for_area_updates() {
wp_enqueue_style( 'fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_fontawesome_for_area_updates' );
.area-updates-widget {
border-radius: 6px;
overflow: hidden;
font-size: 14px;
background-color: #fff;
}
.area-updates-title {
background-color: #38B6FF;
color: #fff;
font-weight: bold;
padding: 8px 12px;
font-size: 15px;
display: flex;
align-items: center;
}
.area-updates-title .fa-crown {
margin-right: 6px;
font-size: 16px;
color: #FFFF73; /* 黄色い王冠 */
}
.area-updates-list {
list-style: none;
margin: 0;
padding: 0;
}
.area-updates-row {
background-color: #F9F9F9;
border-bottom: 1px solid #fff;
padding: 8px 12px;
}
.area-update-line-top {
text-align: left;
font-size: 14px;
margin-bottom: 2px;
}
.area-update-line-top a {
color: #007acc;
text-decoration: underline;
}
.area-update-line-bottom {
text-align: right;
}
.area-updates-date {
color: #666;
font-size: 12px;
white-space: nowrap;
}
外観 > ウィジェット から、サイドバー内に以下を挿入：
[area_updates]または、SWELLのパターンブロックや固定ページ内にも挿入可能です。
この実装により、エリア情報サイトや地域密着型サービス紹介サイトにおいて、
といった多くの効果が期待できます。
必要に応じて「NEWマーク」「投稿タイトルの表示」「クリック数計測」なども拡張可能です。
複数サイトに展開する場合はショートコード名の変更やスタイル調整も検討してみてください！
ご希望があれば、汎用プラグイン化の提案も可能です。
コメント