Question

嗨我在这里也经历过很多教程和问题但主题似乎还不清楚。

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

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

希望有人能够澄清这一点，因为我对这个主题不太清楚：（

目前我正在使用的脚本：

<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 } ?>

function.php

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

由于

Answer 1

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

中

对于一个初学者，我承认这不是一个容易的问题，但网上有很多关于此的tutos。

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

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

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

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

1 个答案: