ページネーションを作成することができません。

Question

初心者です。急ぎですのでこれからマルチポストです。
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

ただ、上記のサイト道理にやっても、ページネーションができません。

このような形で、書いてある頃は一通りやったつもりなのですが、できません
下記がコードになります。

ご存じの方いましたら教えていただけると幸いです。

 <div class="pagination-second">
    <div class="list-box">
        <ul>
        <?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(); ?>
                    <article class="blog-list__list-item">
                    <div class="blog-list-category">
<?php
$undef_category = (count(get_the_category()) == 0) || in_category('1');
if($undef_category == true){
   $category = get_the_category(); 
   echo $category[0]->cat_name;
}else{             
  $category = get_the_category(); 
    echo $category[0]->cat_name."一覧";
}
?>
                    </div>
                        <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 ?>
  <div class="blog-item-txt">
              <?php // 抜粋を表示させる start ?>  
                    <?php the_excerpt(); ?> 
                <?php // 抜粋を表示させる end ?> 
            </div>    
                    </article>
                    <?php break; ?>
                    <?php endwhile; ?>
                    <?php while (have_posts()) : the_post(); ?>
                    <article class="blog-list__list-item">                  
                        <div class="blog-list-category">    
                        <?php
$undef_category = (count(get_the_category()) == 0) || in_category('1');
if($undef_category == true){
   $category = get_the_category(); 
   echo $category[0]->cat_name;
}else{             
  $category = get_the_category(); 
    echo $category[0]->cat_name."一覧";
}
?>
    </div> 
<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 ?>
        <div class="blog-item-excerpt">
                    <?php echo mb_substr( get_the_excerpt(), 0, 50 ) . '[...]'; ?>
        </div>
                <?php // 抜粋を表示させる end ?>     

                       
                    </article>
                    <?php endwhile; ?>
<?php endif; ?>

                <?php // ブログの一覧を表示する end ?>
                <?php break; ?>
            <?php
            endwhile;
        else:
            echo '<div><p>ありません。</p></div>';
        endif;
        ?>
        </ul>
    </div>
</div>

　　/*ここから*/
<div class="list-group">
    <a><div class="list-group-item">1</div></a>
    <a><div class="list-group-item">2</div></a>
    <a><div class="list-group-item">3</div></a>
    <a><div class="list-group-item">4</div></a>
    <a><div class="list-group-item">5</div></a>
    <a><div class="list-group-item">6</div></a>
    <a><div class="list-group-item">7</div></a>
    <a><div class="list-group-item">8</div></a>
    <a><div class="list-group-item">9</div></a>
    <a><div class="list-group-item">10</div></a>
</div>
　　/*ここまで*/
   </div>
        </div>
    </div>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="keywords" content="ポートフォリオ制作" />
    <meta name="description" content="共通ディスクリプション" />
    <title>Engress</title>
    <link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
    <script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>
　　/*ここから*/
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/wp-content/themes/test/js/paginathing.min.js"></script> 
　　/*ここまで*/
    <link rel="stylesheet" type="text/css" href="/wp-content/uploads/css/style.css" />    
    <?php wp_head(); ?>
</head>

<script>
    $(function(){
        $(".question-outer dt").on("click",function(){
            $(this).next().slideToggle();
            $(this).toggleClass("open");
        })
    })
//sticky header
  $('.header-burger-btn').on('click',function(){
          $('.header-nav').fadeToggle(300);
          $('.header-burger-btn').toggleClass('cross');
          $('body').toggleClass('noscroll');
        });; 
</script>  

<script>
 // クラス名を追加することによって画面幅が小さいときにのみスクロールが発生するようにしたい。が、常に追加された状態になる。
if (window.matchMedia( "(max-width: 1280px)" ).matches) {
var p1_element = document.getElementById("p1");
}

new ScrollHint('.js-scrollable', {
    scrollHintIconAppendClass: 'scroll-hint-icon-white', // white-icon will appear
    applyToParents: true,
    i18n: {
      scrollable: 'スクロールできます'
    }
  });
  new ScrollHint('.js-scrollable', {
    suggestiveShadow: true
  });
</script>  


<script>  

if(typeof jQuery != "undefined"){ //jQueryの読み込み確認
    $(function(){
        alert('jQuery is ready.')
    });
}
</script>   
　　/*ここから*/
<script type="text/javascript">
    jQuery(document).ready(function($){
        $('.list-group').paginathing({
            perPage: 4,
            firstLast: false,
            prevText:'prev' ,
            nextText:'next' ,
            activeClass: 'active',
        })
    });
</script>
　　/*ここまで*/
<?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は機能しています。

Comments

[Lhankor_Mhy]

「ここから」「ここまで」の部分のコードを試してみましたが、ページングができているようでした。

おそらく、ご提示の「ここから」「ここまで」の部分には原因はなさそうに思います。
ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。

問題再現の手順をもう少し詳しく書いていただけますか？

[Lhankor_Mhy]

なんとなくですが、エラーメッセージなどが出ているんじゃないかな、という気がしています。

[Lhankor_Mhy]

急いでいるなら返信も急いでほしいな。

[2232]

すいません、お返事ありがとうございます。
エラーメッセージをカクニンします。

[2232]

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)
このようなものがありました。

[Lhankor_Mhy]

問題を把握しました。

[Lhankor_Mhy]

言うまでもないと思いますが、エラーメッセージはSOとQiitaにも追記してきてください。

[2232]

はい、

Answer 1

jQuery を複数読み込んでいると思います。
たぶん、wp_head()で出力されているのではないかと。

Comments

[2232]

```
<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>
```
これにすることでうまくいきました。
ご協力くださりありがとうございます。

[Lhankor_Mhy]

他の質問もクローズしてください