Q&A
「ここから」「ここまで」の部分のコードを試してみましたが、ページングができているようでした。
おそらく、ご提示の「ここから」「ここまで」の部分には原因はなさそうに思います。
ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。
問題再現の手順をもう少し詳しく書いていただけますか？
初心者です。急ぎですのでこれからマルチポストです。
https://shu-sait.com/html-pagination-jisso/
https://ja.stackoverflow.com/questions/88482/%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e6%88%90%e3%81%99%e3%82%8b%e3%81%93%e3%81%a8%e3%81%8c%e3%81%a7%e3%81%8d%e3%81%be%e3%81%9b%e3%82%93
WordPressでサイトを制作しています。
アーカイブページのページネーションを作成するため、下記サイトを参考にしています。
https://qiita.com/keikkkk/questions/106ae1cdb1284d92041a
ただ、上記のサイト道理にやっても、ページネーションができません。
このような形で、書いてある頃は一通りやったつもりなのですが、できません
下記がコードになります。
ご存じの方いましたら教えていただけると幸いです。
archive.php
1 <div class="pagination-second"> 2 <div class="list-box"> 3 <ul> 4 <?php 5 $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 6 $the_query = new WP_Query( array( 7 'post_status' => 'publish', 8 'post_type' => 'post', // ページの種類（例、page、post、カスタム投稿タイプ） 9 'paged' => $paged, 10 'posts_per_page' => 10, // 表示件数 11 'orderby' => 'date', 12 'order' => 'DESC' 13 ) ); 14 if ($the_query->have_posts()) : 15 while ($the_query->have_posts()) : $the_query->the_post(); 16 ?> 17 <?php // ブログの一覧を表示する start ?> 18 <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 19 <article class="blog-list__list-item"> 20 <div class="blog-list-category"> 21<?php 22$undef_category = (count(get_the_category()) == 0) || in_category('1'); 23if($undef_category == true){ 24 $category = get_the_category(); 25 echo $category[0]->cat_name; 26}else{ 27 $category = get_the_category(); 28 echo $category[0]->cat_name."一覧"; 29} 30?> 31 </div> 32 <div class="blog-list-wrapper-second"> 33 <?php // アイキャッチを表示させる start ?> 34 <div class="blog-item-thumbnail-second"> 35 <?php if(has_post_thumbnail()): ?> 36 <div class="thumbnail-image-second"><?php the_post_thumbnail(array(240, 148)); ?></div> 37 <?php else: ?> 38 <div class="thumbnail-image-second"> 39 <img src="<?php echo get_template_directory_uri(); ?>/images/sample4.png" alt="デフォルトのアイキャッチ画像" width="240" height="148" /> 40 </div> 41 <?php endif; ?> 42 </div> 43 <?php // アイキャッチを表示させる end ?> 44 </div> 45 46 <div class="blog-item-content"> 47 <p class="blog-item-day-second"><?php the_time('Y-m-d'); ?></p> 48 <?php // タイトルを表示させる start ?> 49 <a href="<?php the_permalink(); ?>" class="blog-item"> 50 <h3 class="blog-item-title"> 51 <div class="blog-item-title-container"> 52 <?php 53if ( mb_strlen( $post->post_title, 'UTF-8' ) > 20 ) { 54 $title = mb_substr( $post->post_title, 0, 20, 'UTF-8' ); 55 echo $title . '…'; 56} else { 57 echo $post->post_title; 58} 59?> 60</a> 61</div> 62 <?php // タイトルを表示させる end ?> 63 <div class="blog-item-txt"> 64 <?php // 抜粋を表示させる start ?> 65 <?php the_excerpt(); ?> 66 <?php // 抜粋を表示させる end ?> 67 </div> 68 </article> 69 <?php break; ?> 70 <?php endwhile; ?> 71 <?php while (have_posts()) : the_post(); ?> 72 <article class="blog-list__list-item"> 73 <div class="blog-list-category"> 74 <?php 75$undef_category = (count(get_the_category()) == 0) || in_category('1'); 76if($undef_category == true){ 77 $category = get_the_category(); 78 echo $category[0]->cat_name; 79}else{ 80 $category = get_the_category(); 81 echo $category[0]->cat_name."一覧"; 82} 83?> 84 </div> 85<div class="blog-list-wrapper-second"> 86 <?php // アイキャッチを表示させる start ?> 87 88 <div class="blog-item-thumbnail"> 89 <?php if(has_post_thumbnail()): ?> 90 <div class="thumbnail-image"> 91 <?php the_post_thumbnail(array(240, 179)); ?> 92 </div> 93 <?php else: ?> 94 <div class="thumbnail-image"> 95 <img src="<?php echo get_template_directory_uri(); ?>/images/sample4.png" alt="デフォルトのアイキャッチ画像" width="240" height="179" /> 96 </div> 97 <?php endif; ?> 98 99 100 </div> 101 <?php // アイキャッチを表示させる end ?> 102 </div> 103 104 <div class="blog-item-content"> 105 <p class="blog-item-day-second"><?php the_time('Y-m-d'); ?></p> 106 <?php // タイトルを表示させる start ?> 107 108 <a href="<?php the_permalink(); ?>" class="blog-item"> 109 <h3 class="blog-item-title"> 110 <?php 111if ( mb_strlen( $post->post_title, 'UTF-8' ) > 20 ) { 112 $title = mb_substr( $post->post_title, 0, 20, 'UTF-8' ); 113 echo $title . '…'; 114} else { 115 echo $post->post_title; 116} 117?></h3> 118</a> 119 <?php // タイトルを表示させる end ?> 120 <?php // 抜粋を表示させる start ?> 121 <div class="blog-item-excerpt"> 122 <?php echo mb_substr( get_the_excerpt(), 0, 50 ) . '[...]'; ?> 123 </div> 124 <?php // 抜粋を表示させる end ?> 125 126 127 </article> 128 <?php endwhile; ?> 129<?php endif; ?> 130 131 <?php // ブログの一覧を表示する end ?> 132 <?php break; ?> 133 <?php 134 endwhile; 135 else: 136 echo '<div><p>ありません。</p></div>'; 137 endif; 138 ?> 139 </ul> 140 </div> 141</div> 142 143 /*ここから*/ 144<div class="list-group"> 145 <a><div class="list-group-item">1</div></a> 146 <a><div class="list-group-item">2</div></a> 147 <a><div class="list-group-item">3</div></a> 148 <a><div class="list-group-item">4</div></a> 149 <a><div class="list-group-item">5</div></a> 150 <a><div class="list-group-item">6</div></a> 151 <a><div class="list-group-item">7</div></a> 152 <a><div class="list-group-item">8</div></a> 153 <a><div class="list-group-item">9</div></a> 154 <a><div class="list-group-item">10</div></a> 155</div> 156 /*ここまで*/ 157 </div> 158 </div> 159 </div>
header.php
1<head> 2 <meta charset="utf-8" /> 3 <meta name="viewport" content="width=device-width,initial-scale=1" /> 4 <meta name="keywords" content="ポートフォリオ制作" /> 5 <meta name="description" content="共通ディスクリプション" /> 6 <title>Engress</title> 7 <link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css"> 8 <script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script> 9 /*ここから*/ 10 <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> 11<script type="text/javascript" src="/wp-content/themes/test/js/paginathing.min.js"></script> 12 /*ここまで*/ 13 <link rel="stylesheet" type="text/css" href="/wp-content/uploads/css/style.css" /> 14 <?php wp_head(); ?> 15</head>
footer.php
1 2<script> 3 $(function(){ 4 $(".question-outer dt").on("click",function(){ 5 $(this).next().slideToggle(); 6 $(this).toggleClass("open"); 7 }) 8 }) 9//sticky header 10 $('.header-burger-btn').on('click',function(){ 11 $('.header-nav').fadeToggle(300); 12 $('.header-burger-btn').toggleClass('cross'); 13 $('body').toggleClass('noscroll'); 14 });; 15</script> 16 17<script> 18 // クラス名を追加することによって画面幅が小さいときにのみスクロールが発生するようにしたい。が、常に追加された状態になる。 19if (window.matchMedia( "(max-width: 1280px)" ).matches) { 20var p1_element = document.getElementById("p1"); 21} 22 23new ScrollHint('.js-scrollable', { 24 scrollHintIconAppendClass: 'scroll-hint-icon-white', // white-icon will appear 25 applyToParents: true, 26 i18n: { 27 scrollable: 'スクロールできます' 28 } 29 }); 30 new ScrollHint('.js-scrollable', { 31 suggestiveShadow: true 32 }); 33</script> 34 35 36<script> 37 38if(typeof jQuery != "undefined"){ //jQueryの読み込み確認 39 $(function(){ 40 alert('jQuery is ready.') 41 }); 42} 43</script> 44 /*ここから*/ 45<script type="text/javascript"> 46 jQuery(document).ready(function($){ 47 $('.list-group').paginathing({ 48 perPage: 4, 49 firstLast: false, 50 prevText:'prev' , 51 nextText:'next' , 52 activeClass: 'active', 53 }) 54 }); 55</script> 56 /*ここまで*/ 57<?PHP wp_footer(); ?>
エラーメッセージ、
jquery.min.js?ver=3.6.0:2 Uncaught TypeError: $(...).paginathing is not a function
at HTMLDocument.<anonymous> (（インデックス）:562:26)
at e (jquery.min.js?ver=3.6.0:2:30038)
at t (jquery.min.js?ver=3.6.0:2:30340)です。
CSSを書いてあるとおりに打ち込んでから少し調節したところ、
ボタンは表示されますが、クリックしても移動しません。
他のJQは機能しています。
なんとなくですが、エラーメッセージなどが出ているんじゃないかな、という気がしています。
急いでいるなら返信も急いでほしいな。
すいません、お返事ありがとうございます。
エラーメッセージをカクニンします。
jquery.min.js?ver=3.6.0:2 Uncaught TypeError: $(...).paginathing is not a function
at HTMLDocument.<anonymous> (（インデックス）:562:26)
at e (jquery.min.js?ver=3.6.0:2:30038)
at t (jquery.min.js?ver=3.6.0:2:30340)
このようなものがありました。
問題を把握しました。
言うまでもないと思いますが、エラーメッセージはSOとQiitaにも追記してきてください。
はい、
回答1件
0
ベストアンサー
jQuery を複数読み込んでいると思います。
たぶん、wp_head()で出力されているのではないかと。
投稿2022/04/25 07:53
総合スコア37481
```
<script type="text/javascript">
jQuery(document).ready(function($){
$('.list-group').paginathing({
perPage: 4,
firstLast: false,
prevText:'prev' ,
nextText:'next' ,
activeClass: 'active',
})
});
</script>
```
これを一部消して、
```
<script type="text/javascript">
$('.list-group').paginathing({
perPage: 4,
firstLast: false,
prevText:'prev' ,
nextText:'next' ,
activeClass: 'active',
});
</script>
```
これにすることでうまくいきました。
ご協力くださりありがとうございます。
他の質問もクローズしてください
あなたの回答
tips
プレビュー
