前提・実現したいこと
WordPressで生成されるページネーションのリンクを
「example.com/wp-admin/admin-ajax.php?paged=2」から
「example.com/news/page/2」としたい。
発生している問題・エラーメッセージ
お世話になります。この度は宜しくお願い致します。
当方WordPressでCookieの値に応じたajaxの実装に挑戦しており、ページリンクの調整で問題にぶつかりました。
たとえばCookieに「news」という値があるときには
$myargs = array('post_type' => 'news');
if ( $myquery->have_posts() ) :
// 記事のHTML
endif;
というサブループを適用させているのですが、
このときページネーションのリンクを「example.com/news/page/2」としたいのに、「example.com/wp-admin/admin-ajax.php?paged=2」になってしまいます。
生成後にjQeuryで無理矢理調整してもいいのですが、そもそも生成する時点から治す方法があれば教えて下さい。
該当のソースコード
<h2 id="title_news">news</h2> 等のクリックで「news」をCookieに保存し、それを基にループが適用されます。php
1// 必要な変数やnonceを最初から出しておく 2function my_enqueue_scripts() { 3 $handle = 'my-script'; 4 // Ajaxの呼出しが書かれているスクリプトのパス 5 $jsFile = 'path/to/myscript.js'; 6 7 wp_register_script($handle, $jsFile, ['jquery']); 8 9 // アクション名 10 $acrion = 'my-ajax-action'; 11 // 配列をJSのオブジェクトに変換したscriptを出力する 12 wp_localize_script($handle, 'MY_AJAX', [ 13 'api' => admin_url( 'admin-ajax.php' ), 14 'action' => $acrion, 15 'nonce' => wp_create_nonce( $acrion ), 16 ]); 17 /* 18 上によってこれが出てくるからJSで使う 19 <![CDATA[ 20 var MY_AJAX = {"api":"http://example.com/wp-admin/admin-ajax.php","action":"my-ajax-action","nonce":"XXXXXXXXXX"}; 21 ]]> 22 */ 23 24 wp_enqueue_script($handle); 25} 26add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' ); 27 28// JSからデータ受け取ってHTML作る 29function my_ajax_event() { 30 // wp_create_nonce の引数に渡したものと同じアクション名 31 $action = 'my-ajax-action'; 32 33 // nonceのチェック 34 if( check_ajax_referer($action, 'nonce', false) ) { 35 36 // 選択した投稿タイプ 37 $submitType = esc_html( $_POST['submitType'] ); 38 39 // ページネーション 40 $paged = get_query_var('paged') ? get_query_var('paged') : 1; 41 42 // 共通ループ条件 43 $myargs = array( 44 'paged' => $paged, 45 'posts_per_page' => 7, 46 ); 47 48 // cookieによるループ条件 49 if( $submitType == 'news' ){ 50 $myargs['post_type'] = 'news'; 51 } 52 if( $submitType == 'product' ){ 53 $myargs['post_type'] = 'product'; 54 } 55 56 $myquery = new WP_Query( $myargs ); 57 58 // 条件に合わせた記事を出力 59 if ( $myquery->have_posts() ) : 60 61 while ( $myquery->have_posts() ) : $myquery->the_post(); 62 echo '<h2>'.the_title().'</h2>'; 63 endwhile; 64 65 // ページネーション出力 66 if ( function_exists( 'pagination' ) ) : 67 pagination( $myquery->max_num_pages, $paged ); 68 endif; 69 70 wp_reset_postdata(); 71 72 else : 73 esc_html_e( 'Sorry, no posts matched your criteria.' ); 74 endif; 75 76 } else { 77 // エラー 78 } 79 80 die(); 81} 82add_action( 'wp_ajax_my-ajax-action', 'my_ajax_event' ); 83add_action( 'wp_ajax_nopriv_my-ajax-action', 'my_ajax_event' );
jquery
1"use strict"; 2(function($){ 3 $('h2').on('click', function(){ 4 var selectedType = $(this).attr('id').split('_')[1]; 5 $.ajax({ 6 url: MY_AJAX.api, 7 type: 'POST', 8 data: { 9 // 呼び出すアクション名 10 action: MY_AJAX.action, 11 // アクションに対応するnonce 12 nonce: MY_AJAX.nonce, 13 // 渡したいデータ 14 submitType: selectedType 15 } 16 }) 17 // scusess 18 .done(function( response ) { 19 $articleOuter = $('#ajaxdayo'); // 表示箇所 20 $response = response; // 返されたデータを変数に格納 21 $articleOuter.html(''); // #ajaxdayo内のHTMLを一度削除する 22 $articleOuter.html($response); // my_ajax_actionで生成されたデータ(response)を再度挿入する 23 // title変更 24 $('h2').removeClass('current'); 25 $('h2#title_'+selectedType).addClass('current'); 26 // 現在URL変更 27 history.replaceState('','',selectedType); 28 // 履歴追加 29 var page = $(self).attr('href'); 30 history.pushState(null, null, page); 31 }) 32 // error 33 .fail(function( jqXHR, textStatus, errorThrown ) { 34 alert('error'); 35 }); 36 }); 37})(jQuery);
追記
ページネーション出力関数を追記致します。
php
1/** 2* ページネーション出力関数 3* $paged : 現在のページ 4* $pages : 全ページ数 5* $range : 左右に何ページ表示するか 6* $show_only : 1ページしかない時に表示するかどうか 7*/ 8function pagination( $pages, $paged, $range = 2, $show_only = false ) { 9 10 $pages = ( int ) $pages; //float型で渡ってくるので明示的に int型 へ 11 $paged = $paged ?: 1; //get_query_var('paged')をそのまま投げても大丈夫なように 12 13 //表示テキスト 14 $text_first = "« 最初へ"; 15 $text_before = "‹ 前へ"; 16 $text_next = "次へ ›"; 17 $text_last = "最後へ »"; 18 19 // 表示形式 20 $big = 9999999999; 21 $args = array( 22 'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ), 23 'format' => '%#%', 24 ); 25 26 if ( $show_only && $pages === 1 ) { 27 // 1ページのみで表示設定が true の時 28 echo '<div class="pagination"><span class="current pager">1</span></div>'; 29 return; 30 } 31 32 if ( $pages === 1 ) return; // 1ページのみで表示設定もない場合 33 34 if ( 1 !== $pages ) { 35 //2ページ以上の時 36 echo '<div class="pagination"><span class="page_num">Page ', $paged ,' of ', $pages ,'</span>'; 37 if ( $paged > $range + 1 ) { 38 // 「最初へ」 の表示 39 echo '<a href="', get_pagenum_link(1) ,'" class="first">', $text_first ,'</a>'; 40 } 41 if ( $paged > 1 ) { 42 // 「前へ」 の表示 43 echo '<a href="', get_pagenum_link( $paged - 1 ) ,'" class="prev">', $text_before ,'</a>'; 44 } 45 for ( $i = 1; $i <= $pages; $i++ ) { 46 47 if ( $i <= $paged + $range && $i >= $paged - $range ) { 48 // $paged +- $range 以内であればページ番号を出力 49 if ( $paged === $i ) { 50 echo '<span class="current pager">', $i ,'</span>'; 51 } else { 52 echo '<a href="', get_pagenum_link( $i ) ,'" class="pager">', $i ,'</a>'; 53 } 54 } 55 56 } 57 if ( $paged < $pages ) { 58 // 「次へ」 の表示 59 echo '<a href="', get_pagenum_link( $paged + 1 ) ,'" class="next">', $text_next ,'</a>'; 60 } 61 if ( $paged + $range < $pages ) { 62 // 「最後へ」 の表示 63 echo '<a href="', get_pagenum_link( $pages ) ,'" class="last">', $text_last ,'</a>'; 64 } 65 echo '</div>'; 66 } 67}
試したこと
ここまでのソースコード
補足情報(FW/ツールのバージョンなど)
WordPress、PHP、いずれも最新です。
尚Cookie保存には、jQueryプラグイン「jquery.cookie.js」を利用しております。
回答1件
あなたの回答
tips
プレビュー