[wordpress]固定ページで投稿記事一覧(アーカイブ)を作る

まさかまさかで詰まりまくった。

やりたかったこととか

固定ページでページャー付きの投稿一覧を作る。
ページャーはwp-pagenaviを使用。

完成品

いろいろ調べてあっちこっちいってつまみ食いしまくったので、
この場合こうするとしか言いようがない。
なので説明は無し。

<?php
/**
 Template Name: Page_***
**/
?>
<?php get_header(); ?>
<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
	'posts_per_page' => 10, //表示数
'paged' => $paged,
'post_type' => array(
'post',
),
);
$the_query = new WP_Query($args);
?>
<?php if ( $the_query->have_posts() ) : ?><!-- 記事がある場合 -->
<?php 
while($the_query->have_posts()) : $the_query->the_post(); ?><!-- ループ中身 -->

<!-- タイトルとリンク -->
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<!-- 抜粋文 -->

<?php the_excerpt(); ?>

<!-- アイキャッチ -->
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail(); ?>
<?php else: ?>
<img src="http://placehold.jp/3d4070/ffffff/640x400.png?text=なかったら表示" alt="" />
<?php endif; ?>
<!-- カテゴリ -->
IDも出せる。ここらへんは好みとかで。
<?php $cats = get_the_category(); ?>
<a href="/category/<?php echo $cats[0]->category_nicename; ?>"><?php echo $cats[0]->cat_name; ?></a>
<!-- タグ -->
有無の判定抜けてるけど。
<ul>
<?php
	$posttags = get_the_tags();
		if ( $posttags ) {
			foreach ( $posttags as $tag ) {
				echo '<li><a href="/tag/' .$tag->slug. '">' .$tag->name . '</a></li>';
}
}
?>

<!-- 投稿日 -->
<?php the_time('Y.m.d') ?>

<?php endwhile;?><!-- ループ終了 -->
<?php elseif (): ?><!-- なんか条件つけたかったら -->
<?php else: ?><!-- 記事無い場合 -->
<?php endif; ?><!-- 終わり -->
</ul>
<!-- wp-pagenavi -->
<?php if(function_exists("wp_social_bookmarking_light_output_e")){wp_social_bookmarking_light_output_e();}?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

補足というかなんというか

うまくいってなければ
ページャーが出ないとか、
ページ遷移しても中身が変わってないとか、
そういうのが起きる。
見てきた感じ、ページ数の宣言がうまくいってないとそうなるくさい。

20230207追記:装飾について

こんな感じで出るのでこれに合わせてやっていく。

<div class='wp-pagenavi' role='navigation'>
<span class='pages'>2 / 5</span>
<a class="previouspostslink" rel="prev" aria-label="Previous Page" href="https://example.com/custompost/">«</a>
<a class="page smaller" title="Page 1" href="https://example.com/custompost/">1</a>
<span aria-current='page' class='current'>2</span>
<a class="page larger" title="Page 3" href="https://example.com/custompost/page/3/">3</a>
<a class="page larger" title="Page 4" href="https://example.com/custompost/page/4/">4</a>
<a class="page larger" title="Page 5" href="https://example.com/custompost/page/5/">5</a>
<a class="nextpostslink" rel="next" aria-label="Next Page" href="https://example.com/custompost/page/3/">»</a>
</div>

念のために.pagerとかでラッピングして、それを含めて指定。

個人的な好みだけど、ナンバリングでだいたい分かるしページ総数は別に気にならないだろうってことで.pagesは非表示にしてる。表記は設定で行うけど非表示はcssでやってる。

コメント

タイトルとURLをコピーしました