Laden Sie mehr Beiträge Ajax Button in WordPress

Ich habe einen Blick durch die alten Fragen und versucht, viele der verschiedenen Methoden, dass es zu sein scheint, dies zu tun. Der nächste, den ich bekommen habe, zu arbeiten, ist dieser hier: Wie die Umsetzung der Paginierung auf ein benutzerdefiniertes WP_Query Ajax

Ich habe alles versucht und es wird einfach nicht funktionieren. Absolut ändert sich nichts auf der Seite. Wenn Sie überprüfen die Laden-Schaltfläche, und klicken Sie auf es, das jquery ist, dass die Last Mehr Taste Aktion, wie es die änderungen aus <a id="more_posts">Load More</a> zu <a id="more_posts" disables="disabled">Load More</a> die selbst das scheint nicht die richtige für mich sowieso. Es ist nicht das hinzufügen von posts, ich glaube, ich bin etwas fehlt einfach, aber für das Leben von mir ich kann nicht arbeiten, es out.

Den Code in Mein template-Datei ist:

<div id="ajax-posts" class="row">
    <?php 
    $postsPerPage = 3;
    $args = [
        'post_type' => 'post',
        'posts_per_page' => $postsPerPage,
        'cat' => 1
    ];

    $loop = new WP_Query($args);

    while ($loop->have_posts()) : $loop->the_post(); ?>
        <div class="small-12 large-4 columns">
            <h1><?php the_title(); ?></h1>
            <p><?php the_content(); ?></p>
        </div>
        <?php
    endwhile; 

    echo '<a id="more_posts">Load More</a>';

    wp_reset_postdata(); 
    ?>
</div>

Den Code in meine functions Datei ist:

function more_post_ajax(){
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];

    header("Content-Type: text/html");
    $args = [
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'cat' => 1,
        'offset' => $offset,
    ];

    $loop = new WP_Query($args);

    while ($loop->have_posts()) { $loop->the_post(); 
        the_content();
    }
    exit; 
}

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

Und Meine JQuery im footer:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready( function($) {
        var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";

        //What page we are on.
        var page = 5; 
        //Post per page
        var ppp = 3; 

        $("#more_posts").on("click", function() {
            //When btn is pressed.
            $("#more_posts").attr("disabled",true);

            //Disable the button, temp.
            $.post(ajaxUrl, {
                action: "more_post_ajax",
                offset: (page * ppp) + 1,
                ppp: ppp
            })
            .success(function(posts) {
                page++;
                $("#ajax-posts").append(posts);
                //CHANGE THIS!
                $("#more_posts").attr("disabled", false);
            });
        });
    });
</script>

Kann jemand sehen, was ich bin fehlt oder nicht in der Lage zu helfen?

Kommentar zu dem Problem

Vielen Dank für die Mühe, die du hinein gesteckt hast, um mir zu helfen, aber ich kann immer noch nicht bekommen, um zu arbeiten. Mein laden-button ist nicht anklickbar? weißt du, warum das sein könnte? Kommentarautor: Addzy

Weiß nicht, ob du gesehen hast, mein Kommentar, aber Wenn du deinen ajax-code in custom.js dann sollte der code so Aussehen: wp_enqueue_script( 'custom_js', get_template_directory_uri(). '/assets/js/custom.js', array( 'jquery'), ", true ); wp_localize_script( 'custom_js', 'ajax_posts', array( 'ajaxurl' = > admin_url( 'admin-ajax.php' ), 'noposts' => __('Keine älteren Beiträge gefunden', 'fireproduct'), )); Kommentarautor: dingo_d

InformationsquelleAutor der Frage Addzy | 2015-07-23

UPDATE 24.04.2016.

Habe ich erstellt-tutorial auf meiner Seite https://madebydenis.com/ajax-load-posts-on-wordpress/ über die Umsetzung dieses auf Zwanzig Sechzehn Thema, so fühlen sich frei, check it out 🙂

BEARBEITEN

Ich habe getestet dieses auf Zwanzig Fünfzehn und schon funktioniert es, so sollte es sein, für Sie zu arbeiten.

In index.php (vorausgesetzt, dass Sie wollen, zeigen die Beiträge auf der Hauptseite, aber dies sollte funktionieren, auch wenn Sie es in einem page template) ich habe:

    <div id="ajax-posts" class="row">
        <?php
            $postsPerPage = 3;
            $args = array(
                    'post_type' => 'post',
                    'posts_per_page' => $postsPerPage,
                    'cat' => 8
            );

            $loop = new WP_Query($args);

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

         <div class="small-12 large-4 columns">
                <h1><?php the_title(); ?></h1>
                <p><?php the_content(); ?></p>
         </div>

         <?php
                endwhile;
        wp_reset_postdata();
         ?>
    </div>
    <div id="more_posts">Load More</div>

Dieser Ausgabe 3 Beiträge aus Kategorie 8 (ich hatte die posts in dieser Kategorie, so dass ich es benutzt habe, können Sie verwenden, was Sie wollen). Sie können auch die Abfrage der Rubrik, die Sie mit

$cat_id = get_query_var('cat');

Dadurch erhältst du die Kategorie-id in der Abfrage verwendet werden. Sie könnte diese in Ihrem Ladeprogramm (laden div), und ziehen Sie mit jQuery wie

<div id="more_posts" data-category="<?php echo $cat_id; ?>">>Load More</div>

Und ziehen die Kategorie mit

var cat = $('#more_posts').data('category');

Aber für jetzt, lassen Sie diese aus.

Weiter in functions.php ich Hinzugefügt

wp_localize_script( 'twentyfifteen-script', 'ajax_posts', array(
    'ajaxurl' => admin_url( 'admin-ajax.php' ),
    'noposts' => __('No older posts found', 'twentyfifteen'),
));

Recht nach den vorhandenen wp_localize_script. Dieser lädt wordpress-eigenen admin-ajax.php so, dass wir es benutzen können, wenn wir nennen es in unserer ajax-call.

Am Ende der functions.php die Datei habe ich noch die Funktion, die Last deines posts:

function more_post_ajax(){

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

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

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

    $loop = new WP_Query($args);

    $out = '';

    if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
        $out .= '<div class="small-12 large-4 columns">
                <h1>'.get_the_title().'</h1>
                <p>'.get_the_content().'</p>
         </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');

Habe ich hier Hinzugefügt ausgelagerten key im array, so dass die Schleife nachverfolgen können, auf welche Seite Sie sind, wenn Sie laden Ihre Beiträge.

Wenn Sie Hinzugefügt haben, Ihre Kategorie, in der loader, Sie würde hinzufügen:

$cat = (isset($_POST['cat'])) ? $_POST['cat'] : '';

Und statt 8, Sie würde $cat. Dies wird in der $_POST array, und Sie werden in der Lage sein, um es in ajax.

Letzte Teil ist der ajax selbst. In functions.js ich in der $(document).ready(); Umgebung

var ppp = 3; //Post per page
var cat = 8;
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();
});

Gespeichert, getestet, und es funktioniert 🙂

Bilder als Nachweis (nicht dagegen die schlampige styling, es war schnell gemacht). Auch Inhalte posten, ist Kauderwelsch xD

Laden Sie mehr Beiträge Ajax Button in WordPress

UPDATE

Für 'unendlich' Belastung statt auf click-Ereignis der Schaltfläche (nur machen Sie es unsichtbar, mit visibility: hidden;) können Sie versuchen, mit

$(window).on('scroll', function () {
    if ($(window).scrollTop() + $(window).height()  >= $(document).height() - 100) {
        load_posts();
    }
});

Diese ausgeführt werden sollten, die load_posts() Funktion, wenn Sie 100 Pixel vom unteren Rand der Seite. Bei dem tutorial auf meiner Website, die Sie hinzufügen können, eine Prüfung, um zu sehen, wenn die Beiträge geladen werden, (um zu verhindern, dass das brennen des ajax zweimal), und Sie können es Feuer, wenn die Rollen an der Spitze der Fußzeile

$(window).on('scroll', function(){
    if($('body').scrollTop()+$(window).height() > $('footer').offset().top){
        if(!($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts'))){
                load_posts();
        }
    }
});

Nun der einzige Nachteil in diesen Fällen ist, dass man nie scrollen Sie zu dem Wert der $(document).height() - 100 oder $('footer').offset().top aus irgendeinem Grund. Wenn das passieren sollte, erhöhen Sie einfach die Zahl, wo das scrollen geht.

Können Sie leicht überprüfen, indem Sie console.logs in deinem code und sehen Sie im Bereich "Informationen" was werfen Sie

$(window).on('scroll', function () {
    console.log($(window).scrollTop() + $(window).height());
    console.log($(document).height() - 100);
    if ($(window).scrollTop() + $(window).height()  >= $(document).height() - 100) {
        load_posts();
    }
});