質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

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

2232
2232

総合スコア233

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

-3評価

0クリップ

380閲覧

投稿2022/04/25 05:30

編集2022/04/25 18:59

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

<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>

header.php

<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>

footer.php

<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は機能しています。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

Lhankor_Mhy

2022/04/25 07:17 編集

「ここから」「ここまで」の部分のコードを試してみましたが、ページングができているようでした。 おそらく、ご提示の「ここから」「ここまで」の部分には原因はなさそうに思います。 ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。 問題再現の手順をもう少し詳しく書いていただけますか?
Lhankor_Mhy

2022/04/25 07:19

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

2022/04/25 07:39

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

2022/04/25 07:47 編集

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

2022/04/25 07:50

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

2022/04/25 07:51

問題を把握しました。
Lhankor_Mhy

2022/04/25 07:52

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

2022/04/25 07:53

はい、

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。