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

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

ただいまの
回答率

90.50%

  • PHP

    24069questions

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

  • JavaScript

    20431questions

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

  • WordPress

    8943questions

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

  • jQuery

    8163questions

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

  • jQueryプラグイン

    618questions

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

ajax時に生成されるページネーションの調整

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 373

yamasen

score 13

前提・実現したいこと

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に保存し、それを基にループが適用されます。

// 必要な変数やnonceを最初から出しておく
function my_enqueue_scripts() {
  $handle = 'my-script';
  // Ajaxの呼出しが書かれているスクリプトのパス
  $jsFile = 'path/to/myscript.js';

  wp_register_script($handle, $jsFile, ['jquery']);

  // アクション名
  $acrion = 'my-ajax-action';
  // 配列をJSのオブジェクトに変換したscriptを出力する
  wp_localize_script($handle, 'MY_AJAX', [
    'api'    => admin_url( 'admin-ajax.php' ),
    'action' => $acrion,
    'nonce'  => wp_create_nonce( $acrion ),
  ]);
  /*
  上によってこれが出てくるからJSで使う
  <![CDATA[
  var MY_AJAX = {"api":"http:\/\/example.com\/wp-admin\/admin-ajax.php","action":"my-ajax-action","nonce":"XXXXXXXXXX"};
  ]]>
  */

  wp_enqueue_script($handle);
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

// JSからデータ受け取ってHTML作る
function my_ajax_event() {
  // wp_create_nonce の引数に渡したものと同じアクション名
  $action = 'my-ajax-action';

  // nonceのチェック
  if( check_ajax_referer($action, 'nonce', false) ) {

        // 選択した投稿タイプ
        $submitType = esc_html( $_POST['submitType'] );    

        // ページネーション
        $paged = get_query_var('paged') ? get_query_var('paged') : 1;

        // 共通ループ条件    
        $myargs = array(
            'paged' => $paged,
            'posts_per_page' => 7,    
        );    

        // cookieによるループ条件
        if( $submitType == 'news' ){
            $myargs['post_type'] = 'news';
        }    
        if( $submitType == 'product' ){
            $myargs['post_type'] = 'product';
        }    

        $myquery = new WP_Query( $myargs );

        // 条件に合わせた記事を出力
        if ( $myquery->have_posts() ) :

            while ( $myquery->have_posts() ) : $myquery->the_post();
                echo '<h2>'.the_title().'</h2>';
            endwhile;

            // ページネーション出力
            if ( function_exists( 'pagination' ) ) :
                pagination( $myquery->max_num_pages, $paged );  
            endif;

            wp_reset_postdata();

        else :
            esc_html_e( 'Sorry, no posts matched your criteria.' );
        endif;

    } else {
        // エラー
    }

  die();
}
add_action( 'wp_ajax_my-ajax-action', 'my_ajax_event' );
add_action( 'wp_ajax_nopriv_my-ajax-action', 'my_ajax_event' );
"use strict";
(function($){
    $('h2').on('click', function(){    
        var selectedType = $(this).attr('id').split('_')[1];
        $.ajax({
            url: MY_AJAX.api,
            type: 'POST',
            data: {
                // 呼び出すアクション名
                action: MY_AJAX.action,
                // アクションに対応するnonce
                nonce: MY_AJAX.nonce,
                // 渡したいデータ
                submitType: selectedType
            }
        })
        // scusess
        .done(function( response ) {
            $articleOuter = $('#ajaxdayo'); // 表示箇所 
            $response = response; // 返されたデータを変数に格納
            $articleOuter.html(''); // #ajaxdayo内のHTMLを一度削除する
            $articleOuter.html($response); // my_ajax_actionで生成されたデータ(response)を再度挿入する    
            // title変更
            $('h2').removeClass('current');
            $('h2#title_'+selectedType).addClass('current');
            // 現在URL変更
            history.replaceState('','',selectedType);        
            // 履歴追加
            var page = $(self).attr('href');
            history.pushState(null, null, page);
        })
        // error
        .fail(function( jqXHR, textStatus, errorThrown ) {
            alert('error');        
        }); 
    }); 
})(jQuery);

追記

ページネーション出力関数を追記致します。

/**
* ページネーション出力関数
* $paged : 現在のページ
* $pages : 全ページ数
* $range : 左右に何ページ表示するか
* $show_only : 1ページしかない時に表示するかどうか
*/
function pagination( $pages, $paged, $range = 2, $show_only = false ) {

    $pages = ( int ) $pages;    //float型で渡ってくるので明示的に int型 へ
    $paged = $paged ?: 1;       //get_query_var('paged')をそのまま投げても大丈夫なように

    //表示テキスト
    $text_first   = "« 最初へ";
    $text_before  = "‹ 前へ";
    $text_next    = "次へ ›";
    $text_last    = "最後へ »";

    // 表示形式
    $big = 9999999999;
    $args = array(
        'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
        'format'    => '%#%',
    );

    if ( $show_only && $pages === 1 ) {
        // 1ページのみで表示設定が true の時
        echo '<div class="pagination"><span class="current pager">1</span></div>';
        return;
    }

    if ( $pages === 1 ) return;    // 1ページのみで表示設定もない場合

    if ( 1 !== $pages ) {
        //2ページ以上の時
        echo '<div class="pagination"><span class="page_num">Page ', $paged ,' of ', $pages ,'</span>';
        if ( $paged > $range + 1 ) {
            // 「最初へ」 の表示
            echo '<a href="', get_pagenum_link(1) ,'" class="first">', $text_first ,'</a>';
        }
        if ( $paged > 1 ) {
            // 「前へ」 の表示
            echo '<a href="', get_pagenum_link( $paged - 1 ) ,'" class="prev">', $text_before ,'</a>';
        }
        for ( $i = 1; $i <= $pages; $i++ ) {

            if ( $i <= $paged + $range && $i >= $paged - $range ) {
                // $paged +- $range 以内であればページ番号を出力
                if ( $paged === $i ) {
                    echo '<span class="current pager">', $i ,'</span>';
                } else {
                    echo '<a href="', get_pagenum_link( $i ) ,'" class="pager">', $i ,'</a>';
                }
            }

        }
        if ( $paged < $pages ) {
            // 「次へ」 の表示
            echo '<a href="', get_pagenum_link( $paged + 1 ) ,'" class="next">', $text_next ,'</a>';
        }
        if ( $paged + $range < $pages ) {
            // 「最後へ」 の表示
            echo '<a href="', get_pagenum_link( $pages ) ,'" class="last">', $text_last ,'</a>';
        }
        echo '</div>';
    }
}

試したこと

ここまでのソースコード

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

WordPress、PHP、いずれも最新です。
尚Cookie保存には、jQueryプラグイン「jquery.cookie.js」を利用しております。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yamasen

    2018/12/14 00:54

    ありがとうございます。追記しておきました。以後気を付けます。

    キャンセル

  • kei344

    2018/12/14 10:49

    まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

    キャンセル

  • yamasen

    2018/12/14 11:54

    失礼致しました。ご指摘感謝致します。ありがとうございました。

    キャンセル

回答 1

checkベストアンサー

+1

get_pagenum_link() の中の、$request = remove_query_arg( 'paged' ); の部分で admin-ajax のURを基準にしてしまうため、そうなるようです。
よさそうなフックも見当たらないので、出力結果を置換してしまうのが早いと思います。

【get_pagenum_link() | Function | WordPress Developer Resources】
https://developer.wordpress.org/reference/functions/get_pagenum_link/

【remove_query_arg – WordPress私的マニュアル】
https://elearn.jp/wpman/function/remove_query_arg.html

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/14 02:04

    厄介ですね。打開策ありがとうございます。

    検索してみると、こう…でしょうか?(これでは変化ありませんでしたけど。)

    function vc_remove_wp_ver_css_js( $src ) {
    if ( strpos( $src, 'ver=' ) )
    $src = remove_query_arg( 'ver', $src );
    return $src;
    }
    add_filter( 'style_loader_src', 'vc_remove_wp_ver_css_js', 9999 );
    add_filter( 'script_loader_src', 'vc_remove_wp_ver_css_js', 9999 );

    キャンセル

  • 2018/12/14 02:06

    何をしているのでしょうか。

    キャンセル

  • 2018/12/14 02:12

    pagination関数の get_pagenum_link を使用している箇所全てで str_replace とかでURLを置換するとか対策が必要です。

    【PHP: str_replace - Manual】
    http://php.net/manual/ja/function.str-replace.php

    キャンセル

  • 2018/12/14 02:24

    失礼致しました。コピペがすべって意図したものと別のソースコードを貼ってしまいました。何をしているのでしょうね。汗

    なるほどreplaceですか。やってみます。ありがとうございます。

    キャンセル

  • 2018/12/14 07:16

    おはようございます。お世話になっております。最後に1つだけ具体的な書き方を教えて頂きたくご返信致しました。もしよろしければお付き合いください。str_replaceについてです。

    たとえば、

    この部分であれば
    echo '<a href="', get_pagenum_link(1) ,'" class="first">', $text_first ,'</a>';

    こうしてstr_replaceするわけですよね。
    echo '<a href="', str_replace("wp-admin/admin-ajax.php?paged=", "", get_pagenum_link(1)) ,'" class="first">', $text_first ,'</a>';

    あと一歩のように思うのですが、上だけですと

    これが
    「example.com/wp-admin/admin-ajax.php?paged=2」

    こうなります。
    「example.com/2」

    間に文字(page)を挟んでこうするためには、
    「example.com/page/2」

    どのように書けばよろしいでしょうか?

    キャンセル

  • 2018/12/14 08:58

    echo '<a href="', str_replace("wp-admin/admin-ajax.php?paged=", "page/", get_pagenum_link(1)) ,'" class="first">', $text_first ,'</a>';

    キャンセル

  • この投稿は削除されました

  • 2018/12/14 09:00

    str_replaceはそういう意味だったのですか…!最後までお付き合いありがとうございました。

    キャンセル

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

  • PHP

    24069questions

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

  • JavaScript

    20431questions

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

  • WordPress

    8943questions

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

  • jQuery

    8163questions

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

  • jQueryプラグイン

    618questions

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