[WordPress] 新着情報の一覧をプラグインなしで設置したい

公開日:2018/08/26 更新日:2019/10/07

やりたいこと

サイトTOPページなどに、日付とタイトルとリンクで構成したシンプルな新着情報を表示したい

サンプルコード

html

<?php
    $args = array(
        'category_name' => 'news',
        'posts_per_page' => '5'
    );
    $the_query = new WP_Query($args);
    if( $the_query->have_posts() ) {
        echo '<dl class="list_news">';
        while( $the_query->have_posts() ) {
            $the_query->the_post();
            $time = get_the_time( 'Y/m/d' );
            $link = get_the_permalink();
            $title = get_the_title();
            echo '<dt>'. $time .'</dt>';
            echo '<dd><a href="'. $link .'">'. $title .'</a></dd>';
        }
        echo '</dl>';
    }
    wp_reset_postdata();
?>

CSS

.list_news {
    display: flex;
    flex-wrap: wrap;
}

.list_news > dt,
.list_news > dd {
    display: flex;
    align-items: center;
    margin: 0px;
    border-bottom: 1px solid #c9c9c9;
}

.list_news > dt {
    width: 6em;
    padding: 1em 0px;
}

.list_news > dd {
    width: calc(100% - 6em);
    padding: 1em 1em 1em 3em;
}

仕組み、解説、補足など

「news」というカテゴリーに属する投稿記事を5件表示するコードです
お使いの環境に合わせて適宜WP_Queryに渡す引数を書き換えてください

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。