arhive.php カスタム投稿タイプのアーカイブテンプレートを作ろう

WordPressでカスタム投稿タイプの記事一覧を表示するアーカイブテンプレートの作り方です。

設定例

• カスタム投稿名 news

テンプレートファイル名

• archive-news.php

コード

functions.php

アーカイブの記事表示件数を設定します。
初期値：6

function my_change_posts_per_page( $query ) {
    if ( is_admin() || ! $query -> is_main_query() ) return;

    if( $query->is_post_type_archive('news') ){
        $query->set('posts_per_page', 6);
    }
}
add_action( 'pre_get_posts', 'my_change_posts_per_page' );

archive-news.php

アーカイブの表示部分を作成します。

<?php if( have_posts() ): ?>
<div class="item-list">
    <?php while( have_posts() ) : the_post(); ?>
    <div class="item">
        <a href="<?php echo get_the_permalink(); ?>">
            <figure><?php if(has_post_thumbnail()): the_post_thumbnail('large', array('class' => 'responsive', 'alt' => get_the_title())); else: echo '<img class="responsive" src="'.get_theme_file_uri('/images/noimages.jpg').'">'; endif; ?></figure>
            <div class="txtarea">
                <time class="date"><?php the_time('Y.n.j') ?></time>
                <h2 class="ttl"><?php the_title() ?></h2>
                <p class="txt">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
            </div>
        </a>
    </div>
    <?php endwhile; ?>
</div>
<?php endif; ?>

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選