投稿2022/04/26 03:07
編集2022/04/26 08:09WordPressでサイトを作成しています。初心者です。
アーカイブページで、ページネーションを入れたいです。
その際に、下記のサイトでやっていますがうまくいきません。
この通りにやってます
実際にやってみると表示されるサイトが１０で、ページネーションのリンクの数も３とか５とかが、理想ですが、１つしかリンク（他のページに飛べる数字のついたリンク）がないなど、（下記写真）
逆に多くのリンク（他のページに飛べる数字のついたリンク）があるが１つの記事しか表示されないなどの、上手く行かないことがあります。
footer.php
<script> $(function() { $('.items').pagination({ itemElement : '> div',(ここの設定を＞divにするかdivにするかによて１０表示されたりします。) paginationClassName : 'pagination', paginationInnerClassName : 'clearfix', }); }); $(function() { var $sample = $('.item').pagination({ itemElement : '> li', paginationClassName : 'pagination', paginationInnerClassName : 'clearfix' }); $('.item').on('click', function() { $sample.movePage(3); return false; }); }); </script>
archive.php
<div class="list-box"> <ul class="items"> <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $the_query = new WP_Query(array( 'post_status' => 'publish', 'post_type' => 'post', // ページの種類（例、page、post、カスタム投稿タイプ） 'paged' => $paged, 'posts_per_page' => 10, // 表示件数 'orderby' => 'date', 'order' => 'DESC' )); if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?> <?php start ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="item"> <article class="blog-list__list-item"> <div class="blog-list-wrapper-second"> <?php start ?> <div class="blog-item-thumbnail-second"> <?php if (has_post_thumbnail()) : ?> <div class="thumbnail-image-second"><?php the_post_thumbnail(array(240, 148)); ?></div> <?php else : ?> <div class="thumbnail-image-second"> <img src="<?php echo get_template_directory_uri(); ?>/images/sample4.png" alt="" width="240" height="148" /> </div> <?php endif; ?> </div> <?php end ?> </div> <div class="blog-item-content"> <p class="blog-item-day-second"><?php the_time('Y-m-d'); ?></p> <?php start ?> <a href="<?php the_permalink(); ?>" class="blog-item"> <h3 class="blog-item-title"> <div class="blog-item-title-container"> <?php if (mb_strlen($post->post_title, 'UTF-8') > 20) { $title = mb_substr($post->post_title, 0, 20, 'UTF-8'); echo $title . '…'; } else { echo $post->post_title; }?> </a> </div> <?php end ?> </article> </div> <?php break; ?> <?php endwhile; ?> <?php while (have_posts()) : the_post(); ?> <div class="item"> <article class="blog-list__list-item"> <div class="blog-list-wrapper-second"> <?php start ?> <div class="blog-item-thumbnail"> <?php if (has_post_thumbnail()) : ?> <div class="thumbnail-image"> <?php the_post_thumbnail(array(240, 179)); ?> </div> <?php else : ?> <div class="thumbnail-image"> <img src="<?php echo get_template_directory_uri(); ?>/images/sample4.png" alt="" width="240" height="179" /> </div> <?php endif; ?> </div> <?php end ?> </div> <div class="blog-item-content"> <p class="blog-item-day-second"><?php the_time('Y-m-d'); ?></p> <?php start ?> <a href="<?php the_permalink(); ?>" class="blog-item"> <h3 class="blog-item-title"> <?php if (mb_strlen($post->post_title, 'UTF-8') > 20) { $title = mb_substr($post->post_title, 0, 20, 'UTF-8'); echo $title . '…'; } else { echo $post->post_title; } ?></h3> </a> <?php end ?> <?php start ?> <?php end ?> </article> </div> <?php endwhile; ?> <?php endif; ?> <?php end ?> <?php break; ?> <?php endwhile; else : echo '<div><p>ありません。</p></div>'; endif; ?> </ul> </div>
写真には１０の記事が出ていますが、１つしかページネーションが出ません、
記事の数は合計３０ぐらいはあります。
何卒宜しくお願いします。
https://qiita.com/keikkkk/questions/3c30295eba3b5ecf02a9
追記
paginationClassName : 'pagination',を２回使っわずに、 itemElement : '.item',このようにクラス名指定にして、さらに、
functions.phpのファイルに設定した。 add_action( 'pre_get_posts', function ( $query ) { if ( !is_admin() && $query->is_main_query()) { // 管理画面ではないメインクエリの場合 if ( is_archive( ) ) { $query->set( 'posts_per_page' ,10 ); // カテゴリーアーカイブで表示したい数 } } return $query; } );の１０という指定をはずすとうまくいくみたいです。
この数を指定しなくてもいい方法を探します。 字数制限でfunction.phpは書けませんでしたすいません。
回答2件
0
自己解決
ご思案くださった方々大変、ありがとうございました！！
add_action( 'pre_get_posts', function ( $query ) {
if ( !is_admin() && $query->is_main_query()) {
// 管理画面ではないメインクエリの場合
if ( is_archive( ) ) {
$query->set( 'posts_per_page' , -1 ); // カテゴリーアーカイブで表示したい数
}
}
return $query;
} );
-1と指定することで全てを表示させることが出来ます。
上記のコードをfunction.phpに入れることで可能になりました。
また、
paginationClassName : 'pagination',となっているのに、HTMLに.paginationが存在しない。
paginationClassName : 'pagination',としているページネーションが複数設定されているので、衝突してそう。
などの解決と、
書きを理解してclass名で指定するなどをすることで、可能になります。
.itemsに対して「> div」または「div」を指定することは、
「.item > div」と「.item div」の違いについて理解する必要があります。
「.item > div」は「.item 直下の子要素」
「.item div」は「.item 以下 の子(孫)要素」
です。
divは直下以外にもいっぱいあるのでどのような挙動になってるかはわかりませんが、
適切なクラスを設定した方が無難。
投稿2022/04/26 14:15
編集2022/04/26 14:17総合スコア299
0
原因は複合的なものだと思いますので、これを直したから何とかなるというものではないと思いますが、3つほど気になる点を挙げます。
paginationClassName : 'pagination',となっているのに、HTMLに.paginationが存在しない。
paginationClassName : 'pagination',としているページネーションが複数設定されているので、衝突してそう。
'posts_per_page' => 10, // 表示件数としているので、PHPが10件の記事しか吐かないのでは。
投稿2022/04/26 07:20
総合スコア37024
あなたの回答
tips
プレビュー
Q&A
