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

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

新規登録して質問してみよう
ただいま回答率
85.51%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

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

jQuery

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

Q&A

解決済

2回答

1941閲覧

ページネーションを作成していますが、JQが上手く設定できません。

2232

総合スコア298

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

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

jQuery

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

0グッド

0クリップ

投稿2022/04/26 03:07

編集2022/04/26 23:17

WordPressでサイトを作成しています。初心者です。
アーカイブページで、ページネーションを入れたいです。

その際に、下記のサイトでやっていますがうまくいきません。
この通りにやってます

実際にやってみると表示されるサイトが10で、ページネーションのリンクの数も3とか5とかが、理想ですが、1つしかリンク(他のページに飛べる数字のついたリンク)がないなど、(下記写真)
逆に多くのリンク(他のページに飛べる数字のついたリンク)があるが1つの記事しか表示されないなどの、上手く行かないことがあります。

footer.php

<script> $(function() { $('.items').pagination({ itemElement : '> div',(ここの設定を>divにするかdivにするかによて10表示されたりします。) 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>

写真には10の記事が出ていますが、1つしかページネーションが出ません、
記事の数は合計30ぐらいはあります。

イメージ説明

何卒宜しくお願いします。

*マルチポストにします
https://ja.stackoverflow.com/questions/88502/%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%97%e3%81%a6%e3%81%84%e3%81%be%e3%81%99%e3%81%8c-jq%e3%81%8c%e4%b8%8a%e6%89%8b%e3%81%8f%e8%a8%ad%e5%ae%9a%e3%81%a7%e3%81%8d%e3%81%be%e3%81%9b%e3%82%93

https://qiita.com/keikkkk/questions/3c30295eba3b5ecf02a9

追記
paginationClassName : 'pagination',を2回使っわずに、 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; } );の10という指定をはずすとうまくいくみたいです。
この数を指定しなくてもいい方法を探します。 字数制限でfunction.phpは書けませんでしたすいません。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2022/04/26 06:10

毎回のようにマルチポストしたところで早く解決するわけではないので(むしろ双方に手間ばかり増える。だからルールとして「非推奨」と謳われている)、1つに絞った方が良いのでは。 見たところWordPressの質問が多いようですし、公式フォーラム1本に絞った方が多くのカテゴリを扱う場所より良い結果を得られるでしょう。 https://ja.wordpress.org/support/forums/ もともとWordPressってteratail(に限らないけど)では回答つきにくい印象です。 PHPやっててWordPressやってない人が多いからでしょうね。 特化したものをお望みでしたらなおさら、特化したところに飛び込むのが対応としては適切です。 これだけ低評価がつくということは、「そういう人」という認識をされてteratailでは避けられてると思って良いです。 他の2サービスについても、マルチポストを歓迎する回答者ってほとんどいないと思うので。
2232

2022/04/26 06:56

そうなんですね、ご親切にありがとうございます。
guest

回答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
2232

総合スコア298

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

原因は複合的なものだと思いますので、これを直したから何とかなるというものではないと思いますが、3つほど気になる点を挙げます。


paginationClassName : 'pagination',となっているのに、HTMLに.paginationが存在しない。


paginationClassName : 'pagination',としているページネーションが複数設定されているので、衝突してそう。


'posts_per_page' => 10, // 表示件数としているので、PHPが10件の記事しか吐かないのでは。

投稿2022/04/26 07:20

Lhankor_Mhy

総合スコア35813

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

2232

2022/04/26 07:38

ご回答いただきありがとうございます。 取り掛かります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問