Scroll infinito in Wordpress senza utilizzare plugin

Question

Scroll infinito in Wordpress senza utilizzare plugin

3 feb 2018, 04:52:51

Visualizzazioni: 16K

Voti: 4

Le informazioni di background possono essere saltate.

Volevo utilizzare la funzionalità di scroll infinito nel mio tema Wordpress, ma non essendo molto esperto in JavaScript ho provato questa soluzione:

https://wptheming.com/2012/03/infinite-scroll-to-wordpress-theme/

function custom_infinite_scroll_js() {
    //Codice come fornito nel link sopra
}
add_action( 'wp_footer', 'custom_infinite_scroll_js', 100 );

Ho perso un paio di giorni con l'articolo menzionato sopra per poi rendermi conto che tutto è obsoleto e persino il JS di metafizzy è stato aggiornato.

Le sfide affrontate sono state:

img: Il percorso dell'immagine di caricamento ajax
nextSelector: Selettore per il link "post precedenti"
navSelector: Selettore contenitore per i link di navigazione precedente/successivo
itemSelector: Selettore per i post. Potrebbe essere .hentry, .post, ecc.
contentSelector: Div contenitore per i tuoi post

Non riuscivo a capire come trovare questi selettori nel mio tema
Alcuni bug nella V2

Ho deciso di usare la V3 e passare all'ultima versione dello scroll infinito

La V2 è stata aggiornata alla V3 I dettagli si possono trovare qui.

https://infinite-scroll.com/extras.html#v2-upgrade-example

Ho creato una funzione come questa →

function custom_infinite_scroll_js() {
if ( ! is_singular() ) { ?>
<script>
    var $container = $('.container').infiniteScroll({
    append: '.post',
    path: '.pagination__next',
    status: '.page-load-status',
    });

    // usa l'evento per la callback della V2
    $container.on( 'append.infiniteScroll', function( event, response, path, items ) {
    $( items ).tooltip();
    });
</script>
<?php
}
}
add_action( 'wp_footer', 'custom_infinite_scroll_js', 100 );

Ma in realtà non crea uno scroll infinito. Qualcuno può guidarmi su come procedere?

WordCent

1.88K

php funzioni javascript scorrimento-infinito

Commenti

@David Sword, ho accettato la modifica, puoi suggerire una soluzione funzionante?

WordCent

3 feb 2018 07:10:15

Tutte le risposte alla domanda

Commenti

questo è un codice obsoleto che non funzionerà. Leggi attentamente. È chiaramente menzionato nel mio post che lo script è già stato aggiornato dalla V2 alla V3. prova a incollare questo codice e il browser genererà un errore Javascript anche quando il javascript viene caricato.

WordCent

3 feb 2018 13:11:16

Hai provato questo.. https://www.billerickson.net/infinite-scroll-in-wordpress/

Xaib Aslam

6 feb 2018 16:33:49

Sì, e funziona anche, ma quello script non sembra molto promettente, mentre quello che ho postato nella domanda principale vede anche il coinvolgimento di un ingegnere di Google, quindi mi fido un po' di più di quello.

WordCent

7 feb 2018 03:55:15

Varsha Dhadge 341 · Answer 1 · 2018-09-07T13:01:42Z

Per lo scroll infinito per articoli singoli, di seguito la soluzione

single.php

<div class="blog-article-section"> 
<?php while( have_posts() ): ?>   
<div class="blog-article">
  <?php if( have_posts() ): the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <p><?php the_content(); ?></p>
  <?php endif;  ?>
  <div class="pagination-single" >
    <div class="next_post_link"><?php previous_post_link( '%link','Articolo Precedente' ) ?></div>
    <div class="previous_post_link"><?php next_post_link( '%link','Articolo Successivo' ) ?></div>
  </div>
</div>
<?php endwhile; ?>
</div>
<div class="blog-article1"></div>
<a href="#" class="loadArticle">Carica altro</a>

script.js

(function($) {
$(document).ready(function(){
    var next_count = 1;
    $('.next_post_link a').attr("id", "next"+next_count);
    var prev_count = 1;
    $('.prev_post_link a').attr("id", "prev"+prev_count);
    $(".loadArticle").click(function(e) {
        e.preventDefault();
        loadNextArticle();
    });
    $(window).scroll(function(){
        loadNextArticle();
        console.log('scroll')
    });
    function loadNextArticle(){
        var next_link = $("#next"+next_count).attr("href");
        var prev_link = $("#prev"+prev_count).attr("href");
         if(typeof(next_link) != "undefined"){
            $.ajax({
              type: "GET",
              url: next_link,
              data: {},
              async: false,
              success: function(data){
                next_count = ++next_count;
                var result = $(data);
                $('.next_post_link a', result).attr("id","next"+next_count);
                result.find('.blog-article').appendTo('.blog-article1').fadeIn('slow');
              }
            });
        } 
    }
});
}(jQuery));

Xaib Aslam 11 · Answer 2 · 2018-02-03T12:08:42Z

Per implementare lo scroll infinito in WordPress, puoi utilizzare vari metodi, inclusi JavaScript con la REST API di WordPress o librerie come jQuery. Di seguito trovi una guida passo passo per implementare lo scroll infinito utilizzando JavaScript e la REST API di WordPress.

Passo 1: Includere gli Script

Prima di tutto, includi il tuo file JavaScript nel file functions.php del tuo tema.

function enqueue_infinite_scroll_script() {
    wp_enqueue_script(
        'infinite-scroll',
        get_template_directory_uri() . '/js/infinite-scroll.js',
        array('jquery'),
        null,
        true
    );

    // Localizza lo script per passare dati a JavaScript
    wp_localize_script(
        'infinite-scroll',
        'infinite_scroll_params',
        array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'query_vars' => json_encode($wp_query->query),
        )
    );
}
add_action('wp_enqueue_scripts', 'enqueue_infinite_scroll_script');

Passo 2: Creare il File JavaScript

Crea un file js/infinite-scroll.js nella directory del tuo tema. Questo file gestirà la richiesta AJAX per caricare altri articoli.

jQuery(function($) {
    var canBeLoaded = true, // questo parametro permette di avviare la chiamata AJAX solo se necessario
        bottomOffset = 2000; // la distanza (in px) dal fondo della pagina quando vuoi caricare altri articoli

    $(window).scroll(function() {
        var data = {
            'action': 'loadmore',
            'query': infinite_scroll_params.query_vars, // così otteniamo i parametri dalla funzione wp_localize_script()
            'page': infinite_scroll_params.current_page
        };

        if ($(document).scrollTop() > ($(document).height() - bottomOffset) && canBeLoaded == true) {
            $.ajax({
                url: infinite_scroll_params.ajax_url,
                data: data,
                type: 'POST',
                beforeSend: function(xhr) {
                    canBeLoaded = false; // disabilita la chiamata AJAX mentre è in corso
                },
                success: function(data) {
                    if (data) {
                        $('#content').find('article:last-of-type').after(data); // inserisci i nuovi articoli
                        infinite_scroll_params.current_page++;
                        canBeLoaded = true; // la chiamata AJAX è completata, ora possiamo permetterla di nuovo
                    }
                }
            });
        }
    });
});

Passo 3: Gestire la Richiesta AJAX

Nel file functions.php del tuo tema, aggiungi una funzione per gestire la richiesta AJAX e restituire gli articoli.

function loadmore_ajax_handler() {
    // Prepara gli argomenti per la query
    $args = json_decode(stripslashes($_POST['query']), true);
    $args['paged'] = $_POST['page'] + 1; // dobbiamo caricare la pagina successiva
    $args['post_status'] = 'publish';

    // Esegui la query
    query_posts($args);

    if (have_posts()) :
        // Inizia il loop
        while (have_posts()): the_post();

            // Il tuo contenuto qui
            get_template_part('template-parts/content', get_post_format());

        endwhile;
    endif;
    die; // usciamo dallo script e non è necessario wp_reset_query()
}

add_action('wp_ajax_loadmore', 'loadmore_ajax_handler'); // se chiamato dal pannello admin
add_action('wp_ajax_nopriv_loadmore', 'loadmore_ajax_handler'); // se chiamato da altri contesti

Passo 4: Modificare la Query

Modifica la tua query principale per passare i parametri necessari a JavaScript.

global $wp_query;
wp_localize_script('infinite-scroll', 'infinite_scroll_params', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'query_vars' => json_encode($wp_query->query),
    'current_page' => get_query_var('paged') ? get_query_var('paged') : 1,
));

Passo 5: Aggiungere Stili per lo Scroll Infinito (Opzionale)

Potresti voler aggiungere alcuni stili per l'indicatore di caricamento o altri elementi relativi allo scroll infinito.

/* Esempio di CSS per l'indicatore di caricamento */
.loading {
    text-align: center;
    padding: 20px;
    display: none;
}

.loading img {
    width: 32px;
    height: 32px;
}

Riepilogo

Con questi passaggi, avrai implementato lo scroll infinito sul tuo sito WordPress. Modifica il codice secondo necessità per adattarlo alla struttura e al design del tuo tema.