6

single.php のループ内に、カスタム クエリを介して返される現在のカテゴリの投稿をオプションとする select タグがあります。

選択したオプションを変更すると、うまく機能している多くの JavaScript 関数がありますが、それらの最後の関数 ( function f_next-previous) が機能していないようです。

この関数の目的は、ページをリロードせずに前後のリンクを更新することです。

テンプレートのナビゲーション リンク (次と前) のコードは次のとおりです。

<div id="nav-above" class="navigation">

<div class="nav-previous"><?php previous_post_link( '%link', '<img height="34" src="' . get_bloginfo("template_directory") . '/images/previous.png" />' ); ?></div>

<div class="nav-next"><?php next_post_link( '%link', '<img height="34" src="' . get_bloginfo("template_directory") . '/images/next.png" />' ); ?></div>

</div><!-- #nav-above -->

この関数の JavaScript コードは次のとおりです。

function f_next-previous(id)
{
       $.ajax({  
       cache: true,  
       type: "GET",  
       timeout: 5000,   
       url: 'wp-content/themes/twentyten/pages/next-previous.php?p='+id,  
       success: function(msg)  
        {  

    $('#nav-above').html(msg);

        },  
        error: function(msg)  
        {  
           alert("Your browser broke!");
                return false;
        }  
});

}

ファイルのnext-previous.php内容は次のとおりです。

<?php
$p=$_GET['p']; 
require( '../../../wp-load.php' );



$my_query = new WP_Query();
$my_query->query(array( 'post__in' => array($p)));

if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();  ?>


<div class="nav-previous"><?php previous_post_link( '%link', '<img height="34" src="' . get_bloginfo("template_directory") . '/images/previous.png" />' ); ?></div>
<div class="nav-next"><?php next_post_link( '%link', '<img height="34" src="' . get_bloginfo("template_directory") . '/images/next.png" />' ); ?></div>

<?php

endwhile;
endif;

?>

p パラメータに値を指定してこの php ファイルをテストすると、ブラウザに論理的な結果が表示されます。Jquery と関数のスクリプトは十分に含まれており、私の Web サイトのすべての AJAX は問題ありません。この作品に足りないもの????

更新: AJAX 呼び出しのトリガーを担当する私の single.php ファイルの部分は次のとおりです。

   <form method="post" action="">  

    <select class="select2"  name="" id="" >
    <option value="<?php the_ID();?>"><?php the_title();?></option>

    <?php 
global $post;
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$myposts = get_posts("paged=$paged&category=4");

foreach($myposts as $post) :?>

        <option value="<?php the_ID();?>"><?php the_title();?></option>

        <?php endforeach;
        wp_reset_postdata(); ?> 

        </select>
        </form>
4

1 に答える 1

9

まず、ワードプレスでAJAXについて話しているほとんどのチュートリアルによると、私の質問で言及したアプローチは悪いことに注意したいと思います。hakreそこで、彼のアドバイスと彼のリンクに基づいて変更することにしました：http: //codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side。

言い換えれば、私の状況に最適な方法は、wp-admin / admin-ajax.phpを使用して、Wordpressに組み込まれているAJAXを使用することです。AJAXリクエストはこのファイルに送信する必要があります。ファイル名の「admin」の部分が少し誤解を招くことは知っています。ただし、フロントエンド（表示側）と管理パネルのすべてのリクエストはadmin-ajax.phpで処理でき、特にセキュリティに関して多くの利点があります。

手順は次のとおりです。

1.AJAXリクエストを送信するJavaScriptコードは次のようになります。

    $(document).ready(function() {
        $('.select2').change(function(e) {
    e.preventDefault();

    var v = $('.select2 option:selected').val(); 


            $.ajax({
                type: "GET",
                url: "wp-admin/admin-ajax.php", // check the exact URL for your situation
                dataType: 'html',
                data: ({ action: 'nextPrevious', id: v}),
                success: function(data){

                $('#nav-above').html(data);

                },
                error: function(data)  
                {  
                alert("Your browser broke!");
                return false;
                }  

            }); 

    }); 
});

JSスクリプトを配置する際にはWordpressの要件を尊重する必要があることに注意してください（通常、wp-footer（）の前のfooter.phpにあります）。

2-アクションの処理：

テーマの（またはプラグインfunctions.phpファイルに直接）、次を追加します。

add_action('wp_ajax_nextPrevious', 'nextPrevious');
add_action('wp_ajax_nopriv_nextPrevious', 'nextPrevious');

次のように同じファイルnextPreviousコールバック関数で定義します。

function nextPrevious() {

$p= $_GET['id'];
$my_query = new WP_Query();

$my_query->query(array( 'post__in' => array($p)));

if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); ?>



 <div class="nav-previous"><?php previous_post_link( '%link', '<img height="34" src="' . get_bloginfo("template_directory") . '/images/previous.png" />' ); ?></div>

<div class="nav-next"><?php next_post_link( '%link', '<img height="34" src="' . get_bloginfo("template_directory") . '/images/next.png" />' ); ?></div>

<?php endwhile;
endif;                  

wp_reset_query();

die();

}

ダイ機能を忘れないでください、それは必須です。

WordpressのAJAXの詳細については、Googleの最初のページのチュートリアルが適しています。

于 2013-03-09T19:37:05.473 に答える