

初心者です。急ぎですのでこれからマルチポストです。  
<https://teratail.com/questions/exowk0f9j67yso>  
<https://qiita.com/keikkkk/questions/106ae1cdb1284d92041a>

WordPressでサイトを制作しています。  
アーカイブページのページネーションを作成するため、下記サイトを参考にしています。  
<https://shu-sait.com/html-pagination-jisso/>

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

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

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

archive.php

[code]

     <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>
    
[/code]

header.php

[code]

    <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>
    
[/code]

footer.php

[code]

    <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(); ?>
    
[/code]

CSSを書いてあるとおりに打ち込んでから少し調節したところ、  
ボタンは表示されますが、クリックしても移動しません。

マルチポストしたサイトURLから写真を確認できます。  
他のJQは機能しています。


CC BY-SA 4.0
2022-04-25T05:43:23.067
88482
2022-04-25T08:08:17.450
49042
question
php jquery wordpress
ページネーションを作成することができません。

[code]

    <script type="text/javascript">
    jQuery(document).ready(function($){
    $('.list-group').paginathing({
    perPage: 4,
    firstLast: false,
    prevText:'prev' ,
    nextText:'next' ,
    activeClass: 'active',
    })
    });
    </script>
    
[/code]

これを一部消して、

[code]

    <script type="text/javascript">
    $('.list-group').paginathing({
    perPage: 4,
    firstLast: false,
    prevText:'prev' ,
    nextText:'next' ,
    activeClass: 'active',
    });
    </script>
    
[/code]

これにすることでうまくいきました。  
ご協力くださりありがとうございます。


CC BY-SA 4.0
2022-04-25T08:08:17.450
88484
2022-04-25T08:08:17.450
49042
88482
answer