【WordPress自作テーマ開発⑥」アーカイブページを作ろう編

<?php
/**
 * The template for displaying archive pages
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package BlogCreateChallenge
 */

get_header();//header.phpを呼び出しその内容を表示しヘッダーを出力
?>

	<main id="primary" class="site-main">

		<?php if ( have_posts() ) : ?><!--if文開始、記事があれば以下の内容を実行-->

			<header class="page-header">
				<?php
				the_archive_title( '<h1 class="page-title">', '</h1>' );//アーカイブのタイトルをH1タグで出力
				the_archive_description( '<div class="archive-description">', '</div>' );//アーカイブの説明をdivタグ内に表示する
				?>
			</header><!-- .page-header -->

			<?php
			/* Start the Loop */
			while ( have_posts() ) ://while文で以下の内容を繰り返す
				the_post();
        
				get_template_part( 'template-parts/content', get_post_type() );//get_template_part関数でtemplate-partsディレクトリ内のcontent.phpを呼び出しその内容を表示

			endwhile;//while文終了

			the_posts_navigation();//ページャーを表示

		else ://記事がない場合は以下を実行

			get_template_part( 'template-parts/content', 'none' );//get_template_part関数でtemplate-partsディレクトリ内のcontent-none.phpを呼び出しその内容を表示

		endif;//if文終了
		?>

	</main>

<?php
get_sidebar();//サイドバー出力（sideber.phpを呼び出しその内容を出力）
get_footer();//フッター出力(footer.phpを呼び出しその内容を出力)

<?php get_header(); ?><!--ヘッダー出力-->

<div class="ly_cont ly_cont__col"><!--コンテンツ部分開始-->
    <main class="ly_cont_main">
        <div class="post-breadcrumb">
            <?php output_breadcrumb(); ?><!--パンくずリスト表示-->
        </div>
        <?php	if ( have_posts() ) : ?><!--if文（記事があれば以下の内容を実行）-->
        <?php the_archive_title( '<h1>', '</h1>' ); ?><!--アーカイブのタイトルをh1タグで表示-->
        <div class="ly_cont_card bl_cardUnit bl_cardUnit__col4">
            <?php while ( have_posts() ) : the_post();//while文で以下の内容を記事がある分だけ繰り返し実行
						get_template_part( 'template-parts/content-archive');//get_template_part関数でtemplate-partsディレクトリ内のcontent-archive.phpを呼び出しその内容を出力
					endwhile;//while終了
				endif;//if文終了
			?>
            
         <?php the_posts_pagination(//ページャーを出力
                array(
                    'mid_size'      => 2, // 現在ページの左右に表示するページ番号の数
                    'prev_next'     => true, // 「前へ」「次へ」のリンクを表示する場合はtrue
                    'prev_text'     => __( '前へ'), // 「前へ」リンクのテキスト
                    'next_text'     => __( '次へ'), // 「次へ」リンクのテキスト
                    'type'          => 'list', // 戻り値の指定 (plain/list)
                )
        ); ?>
    </main>
</div><!--コンテンツ部分終了-->
    
<?php get_footer();?><!--フッター出力-->

 <?php output_breadcrumb(); ?>

get_template_part( 'template-parts/content-archive');

<article class="bl_card">
    <a href="<?php the_permalink(); ?>" class="bl_card_link"><!--カード全体をaタグで囲みリンクをつける-->
        <figure class="bl_card_imgWrapper">
            <img src="<?php the_post_thumbnail_url(); ?>" alt=""><!--記事のアイキャッチを表示-->
        </figure>
        <div class="bl_card_body">
            <?php the_title( '<h3 class="bl_card_ttl">', '</h3>' );?><!--記事のタイトルを出力-->
            <span class="entry-date"><?php echo get_the_date(); ?></span><!--記事の投稿日を出力-->
            <p class="bl_card_txt"><?php echo get_the_excerpt(); ?></p><!--記事の抜粋を出力-->
            <a href="<?php the_permalink(); ?>">続きを読む</a><!--抜粋の後に続きを読むのリンクを設置-->
        </div>
    </a>
</article>