从模板文件创建多个Ajax函数实例和控制变量

时间:2015-08-12 09:17:00

标签: javascript php jquery ajax wordpress

我之前收到了一些帮助,以便构建一个Wordpress Ajax加载更多功能,但我正在构建的网站在不同的页面页面上使用不同的差异。

我遇到的问题是从模板文件中控制'post-type' 'postsPerPage'等变量,帮助我的人给了我一个为{{1}创建变量的方法并且在模板,functions.php和JS文件之间传递它完美地工作,我想要做的就是复制'category''postsPerPage',这很容易吗?

显然不是,

我认为我没错,但是functions.php似乎根本没有收到'post-type'变量:

我会将原始代码的原始代码放在其中,然后执行我尝试使其完成的每项更改:

初始模板文件

'postsPerPage'

已编辑的模板文件

<!-- ************************************************************************** -->
<!-- This controls the Load More AJax Function and Loadout for dropdow sections -->
<!-- ************************************************************************** -->
<div id="ajax-posts" class="row">
    <?php
        $cat_id = 2;
        $postsPerPage = 4;
        $args = array(
                'post_type' => 'post',
                'posts_per_page' => $postsPerPage,
                'cat' => $cat_id
        );
        $loop = new WP_Query($args);


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

    <div class="small-6 large-3 columns end thumb">
         <div class="grid">
            <figure class="effect-zoe">
                <?php the_post_thumbnail( $size, $attr ); ?>
                <a href="<?php the_permalink(); ?> "><figcaption>
                    <h2><?php the_title(); ?></h2>
                    <hr class="light">
                    <p class="description"><?php the_content(); ?></p>
                </figcaption></a>           
            </figure>
        </div>
    </div>

    <?php
        endwhile;
        wp_reset_postdata();
    ?>
</div>

<a id="more_posts" data-category="<?php echo $cat_id; ?>">Load More</a>
<!-- **************************************************************** -->
<!-- End of Load More AJax Function and Loadout for dropdown sections -->
<!-- **************************************************************** -->

初始functions.php

<!-- ************************************************************************** -->
<!-- This controls the Load More AJax Function and Loadout for dropdow sections -->
<!-- ************************************************************************** -->
<div id="ajax-posts" class="row">
    <?php
        $ppp_id = 6;
        $cat_id = 2;
        $postit_id = 'post';

        $postsPerPage = 6;
        $args = array(
                'post_type' => $postit_id,
                'posts_per_page' => $postsPerPage,
                'cat' => $cat_id
        );
        $loop = new WP_Query($args);


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

    <div class="small-6 large-3 columns end thumb">
         <div class="grid">
            <figure class="effect-zoe">
                <?php the_post_thumbnail( $size, $attr ); ?>
                <a href="<?php the_permalink(); ?> "><figcaption>
                    <h2><?php the_title(); ?></h2>
                    <hr class="light">
                    <p class="description"><?php the_content(); ?></p>
                </figcaption></a>           
            </figure>
        </div>
    </div>

    <?php
        endwhile;
        wp_reset_postdata();
    ?>
</div>

<a id="more_posts" 

data-category="<?php echo $cat_id; ?>"  
data-ppp="<?php echo $postsPerPage; ?>"  

>Load More</a>
<!-- **************************************************************** -->
<!-- End of Load More AJax Function and Loadout for dropdown sections -->
<!-- **************************************************************** -->

已编辑的functions.php

function more_product_ajax(){

    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 4;
    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
    $cat = (isset($_POST['cat_id'])) ? $_POST['cat_id'] : '';

    header("Content-Type: text/html");

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'cat' => $cat,
        'paged'    => $page,
    );

    $loop = new WP_Query($args);

    $out = '';

    if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
        $out .= '<div class="small-6 large-3 columns end thumb">
                     <div class="grid">
                        <figure class="effect-zoe light">
                            <?php the_post_thumbnail( $size, $attr ); ?>
                            <a href="<?php the_permalink(); ?> "></a>           
                        </figure>
                        <h2 class="product-load"><?php the_title() ?></h2>
                    </div>
                </div>';

    endwhile;
    endif;
    wp_reset_postdata();
    die($out);
}

add_action('wp_ajax_nopriv_more_product_ajax', 'more_product_ajax');
add_action('wp_ajax_more_product_ajax', 'more_product_ajax');

初始Custom.js

/***********************************************
    This controls initial load more function 
***********************************************/

function more_post_ajax(){

    $ppp = (isset($_POST['postsPerPage'])) ? $_POST['postsPerPage'] : '';
    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
    $cat = (isset($_POST['cat_id'])) ? $_POST['cat_id'] : '';

    header("Content-Type: text/html");

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'cat' => $cat,
        'paged'    => $page,
    );

    $loop = new WP_Query($args);

    $out = '';

    if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
        $out .= '<div class="small-6 large-3 columns end thumb">
                    <div class="grid">
                        <figure class="effect-zoe">
                            '.get_the_post_thumbnail( get_the_ID(), $size, $attr ).'
                            <figcaption>    
                                <h2>'.get_the_title().'</h2>
                                <hr class="light">
                                <p class="description">'.get_the_content().'</p>
                            </figcaption>           
                        </figure>
                    </div>
                </div>';

    endwhile;
    endif;
    wp_reset_postdata();
    die($out);
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

已编辑custom.js

var ppp = 4; // Post per page
var cat = $('#more_posts').data('category');
var pageNumber = 1;


function load_posts(){
    pageNumber++;
    var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp' + ppp + '&action=more_post_ajax';
    $.ajax({
        type: "POST",
        dataType: "html",
        url: ajax_posts.ajaxurl,
        data: str,
        success: function(data){
            var $data = $(data);
            if($data.length){
                $("#ajax-posts").append($data);
                $("#more_posts").attr("disabled",false);
            } else{
                $("#more_posts").attr("disabled",true);
            }
        },
        error : function(jqXHR, textStatus, errorThrown) {
            $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
        }

    });
    return false;
}

$("#more_posts").on("click",function(){ // When btn is pressed.
    $("#more_posts").attr("disabled",true); // Disable the button, temp.
    load_posts();
});

对于所有代码感到抱歉,只想给你全部图片,有人能看到我哪里错了吗?

0 个答案:

没有答案