Javascript 如何在不刷新页面的情况下在多个块元素中显示WordPress post内容

我要贴一把小提琴，因为它更容易解释

---

获取链接到帖子，但是我不确定一旦我有了参考，我应该（或者可以！）使用什么wp函数来获取帖子的内容。

你可以使用jQuery ajax，好的，按照我的说明一步一步地做

1。在你的主题文件夹

js

中创建一个文件夹，假设你的主题文件夹是2122，那么它应该是

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

2.在

js文件夹中创建一个文件

并将其命名为

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（函数（$）{…}）中函数（jQuery的就绪事件）。完成了！现在，您可以使用
ajax
获取帖子内容


说明：
当您单击元素（假设为div）内的任何链接（类名为
您的\u post-entry
）时，单击事件将触发（您知道），并向
发送post请求http://yourDomain.com/wp-admin/admin-ajax.php
因为
myAjax.ajaxUrl
包含
url
并且它是（myAjax对象）通过
functions.php
中的
wp\u localize\u script
提供给脚本。
ajax
请求还将向
$\u POST
数组发送一些变量，这些变量是
action
和
POST\u url
，
post\u url
包含post的
permalink
，并且
admin ajax.php
将运行我们的
do\u myAjaxFunction
，它将获取帖子的内容并将其发送回浏览器，因为我们已经使用
add\u action（'wp\u ajax\u myAjaxHandler'，'do\u myAjaxFunction'）添加了操作。
，它告诉
WordPree
每当您收到对
myAjaxHandler
操作的ajax请求时，请运行
do\u myAjaxFunction
函数。第一个
add\u操作
是
wp\uajax\unopriv\umyajaxhandler
，这是使ajax请求工作所必需的，即使用户没有登录到wordpress后端，没有
wp\uajax\unopriv\umyajaxhandler
如果用户没有登录，ajax请求也不会工作。注意行
$（'#ajax_post'）.html（数据）
在
success
回调中，它将使用
ajax\u post
的
id
将返回的数据插入
元素/div
，因此确保在单击事件中使用适当的
id
和
class
名称

如果您不想在每篇文章中都使用
ajax
，那么您可以为那些希望使用ajax的
post链接添加/生成一个
class
，例如，
ajaxPost
，并在单击事件中使用

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

现在你知道怎么做了，所以我想你可以使用
mouseenter
而不是
click
，如果你需要这样做的话（你给出了一个mouseenter的例子）

一些有用的链接：和
太棒了！非常感谢！我最终在一些js中使用
定义了ajaxurl，但一切都很好！也谢谢你提供的资源，我整天都在搜刮杂志上的快速问题。我还注意到.mouseenter（）（或.mouseclick（））函数只运行一次。这似乎是因为它嵌套在.ready（）函数中，但我不知道有任何其他方法可以运行.mouseenter（）函数。这是一个简单的解决方案吗？还是我应该发布一个新问题？提前谢谢！我应该澄清：在头中包含
允许我持续使用函数
$（'#焦点a'）。mouseenter（函数（e）{…}）和
$（'#焦点a'）。单击（函数（e）{…}）
，但在将新内容加载到id为＝#focus的中后，这些方法不再适用于目标的
#focus a
值。@user2407984，您应该使用
$（文档）。on（'click'，'#focus a'，function（）{…}）
事件。@user2407984，您还可以替换
（文档）。on({…}）
带有
（'parent container id/class of focus'）。在（{…}）
上。
$('.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);
        }
    });
});

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