javascript - 如何在不刷新页面的情况下在多个 block 元素中显示WordPress帖子内容

Question

我要发布一个 fiddle ，因为它更容易解释。

http://jsfiddle.net/EhNKM/84/

$("#focus a").mouseenter(
    function(){
        this.style.color = '#cc0000';
        $('<p>content from post that the hovered-over link points to.</p>').replaceAll('#child p');
    }
);

如何访问帖子内容链接引用的帖子信息？我想使用该信息将该帖子内容加载到另一个 div 中，但我不确定从哪里开始(我可以使用什么 WordPress PHP？JS？)。任何事情，即使是因为我愚蠢而尖叫，都会有帮助!

为了澄清 fiddle 中发生的事情，

1. 一旦用户将鼠标悬停在链接(指向另一个帖子)上，子 div 就会加载链接到的帖子内容。
2. 不用担心 .click() 事件。我确信解决上述问题将有助于深入了解这一点。

谢谢!

编辑: 我也相信我应该使用

this.getAttribute('href')

获取链接到的帖子，但我不确定一旦获得引用，我应该(或可以!)使用什么 wp 函数来获取该帖子的内容。

Answer 1

您可以使用jQuery ajax来做到这一点，好吧，按照我的指示一步一步来。

1.在主题文件夹中创建一个文件夹 js ，假设你的主题文件夹是twentytwelve，那么应该是

http://yourDomain.com/wp-content/themes/twentytwelve/js

2. 在 js folder 中创建一个文件并将其命名为myScript.js

3. 在您的 functions.php 中文件添加

add_action('wp_enqueue_scripts','my_theme_scripts_function');
function my_theme_scripts_function() {
    wp_enqueue_script('myScriptHandler', get_stylesheet_directory_uri() . '/js/myScript.js');
    wp_localize_script( 'myScriptHandler', 'myAjax', array( 'ajaxUrl' => admin_url( 'admin-ajax.php' ) ) );
}

4.同时在您的 functions.php 中添加以下代码

function do_myAjaxFunction()
{
    $post_id = url_to_postid($_POST['post_url']);
    $post = get_post( $post_id, OBJECT);
    $response = apply_filters( 'the_content', $post->post_content );
    echo $response;
    die();
}
add_action( 'wp_ajax_nopriv_myAjaxHandler', 'do_myAjaxFunction' );  
add_action( 'wp_ajax_myAjaxHandler', 'do_myAjaxFunction' );

5.现在在 myScript.js文件中添加以下代码

$('.your_post-entry a').click(function(e){
    e.preventDefault();
    var currentUrl = $(this).attr('href');
    $.ajax({
        type : 'post',
        url : myAjax.ajaxUrl,  
        data: {
            action: 'myAjaxHandler',  
            post_url: currentUrl  
        },
        success: function(data){
            $('#ajax_post').html(data);
        }
    });
});

将上面的代码放入 jQuery(function($){...}); 中函数(jQuery 的就绪事件)。完成了!现在您可以使用 ajax 获取您的帖子内容.

---

说明:

当您单击类名称为 your_post-entry 的元素(假设为 div)内的任何链接时，点击事件将会触发(你知道的)并且它会向 http://yourDomain.com/wp-admin/admin-ajax.php 发送一个 post 请求。因为myAjax.ajaxUrl包含url我们的脚本可以通过 wp_localize_script 使用它(myAjax 对象)我们的functions.php中有。 ajax请求还将发送一些变量到 $_POST数组，这些是 action和post_url ，post_url包含permalink帖子和 admin-ajax.php将运行我们的do_myAjaxFunction它将获取帖子的内容并将其发送回浏览器，因为我们已经使用 add_action( 'wp_ajax_myAjaxHandler', 'do_myAjaxFunction' ) 添加了操作，它告诉WordPree每当你收到 myAjaxHandler 的 ajax 请求时操作请运行do_myAjaxFunction功能。第一个add_action是 wp_ajax_nopriv_myAjaxHandler ，即使用户未登录 WordPress 后端，也需要使 ajax 请求正常工作，而无需 wp_ajax_nopriv_myAjaxHandler如果用户未登录，ajax 请求将不起作用。请注意行 $('#ajax_post').html(data);在 success回调，它将返回的数据插入到element/div中与 id的ajax_post ，因此请确保使用适当的 id和class点击事件中的名称。

如果您不想使用ajax对于每个帖子，您可以添加/生成 class对于那些post links您想要使用 ajax，例如 ajaxPost在点击事件中您可以使用

$('.your_post-entry a.ajaxPost').click(function(e){ ... });

现在您知道如何做到这一点，所以我认为您可以使用 mouseenter 来做到这一点而不是click如果您需要这样做(您给出了 mouseenter 的示例)。

一些有用的链接: wp_ajax_和 how-to-use-ajax-in-wordpress