Wordpress 自定义帖子类型弹出窗口——jquery 和 ajax？答案

【问题标题】：Wordpress Custom Post Type Popup—jquery and ajax?Wordpress 自定义帖子类型弹出窗口——jquery 和 ajax？
【发布时间】：2013-10-11 20:41:43
【问题描述】：

我正在尝试使用 jquery (bpopup) 将自定义帖子类型的帖子加载到弹出窗口中。我正在尝试做的一个例子是http://outpost.la——只需单击任何图像即可查看弹出窗口。

我认为我最终需要编写一个函数来执行此操作，但我不确定如何执行此操作。到目前为止，我的页面模板中只有两个 sn-ps 代码——“触发弹出的按钮”和“弹出的元素”。第一个 sn-p 正在做我想做的事：将一系列自定义帖子类型标题显示为按钮。但是应该在弹出窗口中显示自定义帖子类型内容的第二个 sn-p 显示自定义帖子类型的 all 的标题+内容。

背景中带有按钮的弹出窗口的屏幕截图： http://cl.ly/image/1f0G0c2s2J3U

代码： `

<!-- Button that triggers the popup -->

<?php
$args = array( 
    'post_type' => 'portfolio_project',
    'posts_per_page' => -1 );
$loop = new WP_Query( $args );
$i = 0;

echo'<button class="my-button">';

while ( $loop->have_posts() ) : $loop->the_post();

    if ($i % 0 == 0 && $i > 0) {
        echo '</button>' . "\n" . '<button class="my-button">';
    };
?>
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php

$i++;

endwhile;

echo '</button>';
?>


<!-- Element to pop up -->
<div id="element_to_pop_up">

<?php 
    // the query
    $the_query = new WP_Query( $args ); ?>

    <?php if ( $the_query->have_posts() ) : ?>

      <!-- pagination here -->

      <!-- the loop -->
      <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <h2><?php the_title(); ?></h2>
      <?php endwhile; ?>
      <!-- end of the loop -->

      <!-- pagination here -->

      <?php wp_reset_postdata(); ?>

    <?php else:  ?>
      <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
    <?php endif; ?>
                                            <!-- end custom post type loop -->  

    </div>
     <!-- END Element to pop up -->

<script>
// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;(function($) {

     // DOM Ready
    $(function() {

        // Binding a click event
        // From jQuery v.1.7.0 use .on() instead of .bind()
        $('.my-button').bind('click', function(e) {

            // Prevents the default action to be triggered. 
            e.preventDefault();

            // Triggering bPopup when click event is fired
        $('#element_to_pop_up').bPopup({
            appendTo: 'body'
            , position: ['auto','0']
            , positionStyle: 'fixed'
            , scrollBar: 'false'

        });

        });

    });

})(jQuery);
</script>

【问题讨论】：

标签： javascript ajax wordpress popup custom-post-type

【解决方案1】：

实际上Wordpress 对ajax 请求使用了不同的方法。你必须先明白这一点。所以，简单的原型是这样的

// In your functions.php file
add_action( 'wp_ajax_nopriv_ MyAjaxAction', 'MyAjaxFunction' );  
add_action( 'wp_ajax_ MyAjaxAction', 'MyAjaxFunction' ); 
function MyAjaxFunction() {
    // do query for your posts
    // process it
    // echo it
    die();
}

在您的客户端/jQuery 代码中

$(function(){
    $('.myButton').on('click', function(e){
        e.preventDefault();
        // other code
        $.ajax({
            'url':'/wp-admin/admin-ajax.php', // admin-ajax.php will handle the request
            'type':'post',
            'data': {
                // this is the action hook to call the handler "MyAjaxFunction"
                'action': 'MyAjaxAction',
                // pass some data to post variblr to use in php/wordpress (optional)
                'id':'someId' // you can retrieve this using $_POST['id'];
            },
            'success':function(data){
                // returned data by wordpress
            }
        });
    });
});

这是处理WordPress 中的ajax 请求的正确方法，请阅读this article 以获得更多帮助并作为奖励下载this book。

【讨论】：