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

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

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

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

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

1回答

979閲覧

ページネーションでページ選択後、該当部分までスクロールさせたい

yukki-1227

総合スコア52

WordPress

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

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2023/06/06 06:38

編集2023/06/07 06:55

実現したいこと

  • ワードプレスの表示設定でトップページに選んだ固定ページにて、ページネーションのページを選択後、該当部分まで自動scrollさせたい。または横スライドさせたい

わけがあって、front-page.phpなどのテンプレートファイルには書けません
該当サイト

どなたかお助け下さい。

前提

wordpressにてelementorを用いて、固定ページにショートコードを読み込ませて、(pagination.phpというファイルを読み込ませています)
カスタム投稿(スラッグ名bunny)のページネーションを表示させています。

問題1
ページネーションの番号2や3をクリックすると該当ページには遷移するのですがページの一番上までscrollが戻ってしまい、カスタム投稿一覧のところまで自動でスクロールされないので困っています

該当のソースコード

pagination.php

1 2<?php 3// フロントページにページネーションつける場合はget_query_var('paged')ではなくget_query_var('page')にする!!! 4 $paged = (get_query_var('page')) ? get_query_var('page') : 1; 5 $the_query = new WP_Query( array( 6 'post_type' => 'bunny', 7 'post_status' => 'publish', 8 'paged' => $paged, 9 'posts_per_page' => 5, // 表示件数 10 'orderby' => 'date', 11 'order' => 'DESC' 12 ) ); 13 14// コンテンツ 15 if ($the_query->have_posts()) :?><?php 16 while ($the_query->have_posts()) : $the_query->the_post();?> 17<!-- ここまで自動スクロールさせたい --> 18<div class="pagination_top"> 19 <div class="flex"> 20<section class="weekly2"><?php the_title(); ?><!--投稿タイトル--></section> 21</div><!--flex--> 22</div> 23 24<?php endwhile;?><?php endif; ?> 25<!-- pagenation --> 26 27<div class="pagenation"> 28<?php 29if ($the_query->max_num_pages > 1) { 30 echo paginate_links(array( 31 'base' => get_pagenum_link(1) . '%_%', 32 'format' => 'page/%#%/', 33 'current' => max(1, $paged), 34 'mid_size' => 1, 35 'total' => $the_query->max_num_pages 36 )); 37} 38wp_reset_postdata();?> 39</div><!-- /pagenation --> 40 41<!-- <script> 42 43 jQuery(function(){ 44 45 setTimeout(function(){ 46 47 jQuery('.page-numbers').on('click',function(){ 48 const greenTop = jQuery('.pagination_top').offset().top; 49 jQuery("html").animate({scrollTop: greenTop}); 50 }); 51 52 },5000); 53}); 54 55 56 </script> -->

試したこと

setTimeout関数を使い、ページ番号クリックして数秒後にスクロールさせようと思いましたが、クリック→スクロールする→ページ遷移→上まで戻ってしまい意味がありません。
paginate_links関数の中にページネーション後に発動するイベントを指定したりするパラメータがあるかもしれないとも思い探しましたがありませんでした。

補足情報(FW/ツールのバージョンなど)

WordPress 6.2.2

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

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

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

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

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

guest

回答1

0

ベストアンサー

Javascript はページごとに動作するものですから、ページ移動をした場合、setTimeoutも含めてすべての内容がリセットされます。
そのため、移動前ページから移動後ページに対して何かをすることはできません。

一番わかりやすい方法は、ページネーション部分にid属性を設定して、URLのフラグメントでそこに移動することを指定するやり方だと思います。
【HTML】ページ内リンクの作り方:記事の途中に飛ばすには?

投稿2023/06/07 04:59

編集2023/06/07 05:00
Lhankor_Mhy

総合スコア36414

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

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

yukki-1227

2023/06/07 05:37

ご回答ありがとうございます! ページネーションのページ番号を選択した場合のみ、ページ遷移後にidにページ内リンクする方法というものはphpではありますでしょうか?
Lhankor_Mhy

2023/06/07 05:43

ページネーションのページ番号のリンクを、ページ内リンクにするのがいいと思います。
yukki-1227

2023/06/07 06:54

ありがとうございます!!! window.addEventListener('DOMContentLoaded', function(e){ Array.prototype.map.call(document.getElementsByClassName('page-numbers'),function(x){ x.href+="#pagenation" }); }); として、クラス名page-numbersがついた箇所全てに、urlの最後に#pagenationへのページ内リンクを追加させやりたい動作が出来ました!!
Lhankor_Mhy

2023/06/07 07:02

お役に立てたようで何よりです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問