在wordpress中使用ajax动态加载帖子

Question

您好，我已经阅读了很多教程以及关于这里的问题，但主题似乎真的不清楚。

这是我能找到的最好的教程5-tips-for-using-ajax

我的自定义帖子缩略图显示在我的索引页面的网格中。 我正在尝试创建一个单击事件以通过 ajax 将链接的帖子加载到同一页面上的 div 中，而不是被带到帖子中。我在很多网站上都看到过这种方法，但就是找不到正确的教程/方法。

这里有一些例子： Reveal,aware,garnish,ying+yang

希望有人能在 2 周后澄清这一点，我对这个问题不太清楚:(

目前我正在使用的脚本：

<ul id="og-grid" class="og-grid">
            <?php query_posts( array( 'post_type' => array('portfolio') ));?><?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <li><a class="ajax-click" href="#" ><?php the_post_thumbnail('thumbnail', array('class' => 'thumb', 'alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?></a></li><?php endwhile; ?><?php endif; ?>
        </ul>
    </div>

index.php

.

wp_register_script( 'loadajax', get_stylesheet_directory_uri() . '/library/js/loadajax.js', array( 'grid-js' ), false , true );
wp_localize_script( 'loadgrid', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

注册我的脚本和 admin-ajax

add_action ( 'wp_ajax_nopriv_cmdv_load', 'cmdv_load_ajax' );
add_action('wp_ajax_cmdv_load_ajax', 'cmdv_load_ajax' );

function cmdv_load_ajax () {

$the_slug = $_POST['slug'];
$args=array(
  'name' => $the_slug,
  'post_type' => 'projects',
  'post_status' => 'publish',
  'showposts' => 1,
);
$my_posts = get_posts($args);
if( $my_posts ) :

    global $post;
    $post = $my_posts[0];       

    // generate the response
    $response = json_encode( "Success" );

    // response output
    header( "Content-Type: application/json" );     
    ?>

    <div id="ajax-project-<?php the_ID(); ?>" <?php post_class('project main ajax clearfix'); ?> >

        <div class="projectHeader">
            <h1><?php the_title(); ?></h1>

            <div class="projectNav clearfix">                   
                <?php

                $prev_post = get_previous_post();
                if($prev_post) $prev_slug = $prev_post->post_name;
                $next_post = get_next_post();
                if($next_post) $next_slug = $next_post->post_name;
                ?>                  
                <div class="next <?php if(!$next_slug) echo 'inactive';?>"> 
                    <?php if(isset($next_slug)) : ?>
                        <a href="#<?php echo $next_slug;?>" onClick="nextPrevProject('<?php echo $next_slug;?>');">Next</a>
                    <?php endif; ?>
                </div>
                <div class="previous <?php if(!$prev_slug) echo 'inactive';?>"> 
                    <?php if(isset($prev_slug)) : ?>
                        <a href="#<?php echo $prev_slug;?>" onClick="nextPrevProject('<?php echo $prev_slug;?>');">Previous</a>
                    <?php endif; ?>
                </div>  
                <div class="closeBtn">  
                    <a href="#index">Close Project</a>
                </div>              
            </div> 
        </div>
    <div class="entry">
        <?php the_content(); ?>
    </div>
</div>
<?php endif; ?>
<?php die();?>
<?php } ?>

函数.php

jquery 是我真正苦苦挣扎的地方，所以这是我需要指导的地方！我正在使用thumbnail grid with expanding preview 来对齐缩略图，但添加了点击功能和响应我无法解决:(

谢谢

Answer 1

最好的方法是使用内置的 AJAX。换句话说，将您的 AJAX 请求发送到wp-admin/admin-ajax.php。您的 PHP 函数应该包含在 functions.php 中。

对于初学者，我承认这不是一个简单的问题，但是网上有很多关于这个的教程。

这是我已经在 SO 上写过的关于 Wordpress AJAX 的教程：

Dynamically changing navigation links (next and previous) in Wordpress via AJAX

注意：不要阅读问题，因为它包含我使用的旧方法，请阅读包含正确方法的答案。