テキストリスト形式の記事一覧をつくる

2025年2月5日

こういうやつ。

フッターメニューが寂しかったので導入してみた。

function.phpに追記

たぶん子テーマのやつに書くほうがいい。

<?php
function simple_post_list($atts) {
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

    $args = array(
        'post_type'      => 'post',
        'posts_per_page' => 100, //表示件数
        'paged'          => $paged,
        'orderby'        => 'date',
        'order'          => 'ASC' //表示順序
    );

    $query = new WP_Query($args);
    $output = '<ul class="article-list">';

    if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post();
            $output .= '<li><span class="post-date">' . get_the_date() . '</span> <a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        endwhile;
        $output .= '</ul>';

        $output .= '<div class="pagination">';
        $output .= paginate_links(array(
            'total'        => $query->max_num_pages,
            'current'      => max(1, get_query_var('paged')),
            'format'       => '?paged=%#%',
            'prev_text'    => '« 前へ',
            'next_text'    => '次へ »'
        ));
        $output .= '</div>';

        wp_reset_postdata();
    else :
        $output .= '<li>記事がありません。</li></ul>';
    endif;

    return $output;
}
add_shortcode('post_list', 'simple_post_list');
?>

このままだと「1ページに100件」かつ「古い順」に表示される。
50件にしたい場合は100を50に、古い順を新しい順にしたい場合は ASC を DESC に変える。
お好みでどうぞ。

CSSに追記

見た目を整える。

/* 記事一覧 */
.article-list {
    list-style-type: none;
    padding: 0;
}

.article-list li {
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
}

.article-list li .post-date {
    color: #666;
    margin-right: 10px;
}
.pagination {
    text-align: center;
    margin: 20px 0;
}


.pagination a, .pagination span {
    display: inline-block;
    padding: 8px 12px;
    margin: 2px;
    text-decoration: none;
    border-radius: 5px;
}

.pagination a:hover {
    background-color: #0073aa;
    color: #fff;
}

.pagination .current {
    background-color: #0073aa;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
}

これもお好みで変更どうぞ。