まさかまさかで詰まりまくった。
やりたかったこととか
固定ページでページャー付きの投稿一覧を作る。
ページャーは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でやってる。
コメント