Infinite Scroll Pagination è ispirato da Facebook e Twitter. Questo è solo un cercapersone in cui l’utente dovrà scorrere alla fine della pagina per leggere più articoli. Questo è un modo per migliorare l’esperienza dell’utente su un sito Web, ma se lo fai male, può anche dare una brutta esperienza. Se si sta per implementare questo tipo di pagina, assicurati di non includere collegamenti importanti nella parte inferiore della pagina. Il motivo per questo è che quando un utente tenta di fare clic su quel particolare collegamento, la pagina caricherà automaticamente nuove voci e spingerà automaticamente il collegamento dallo schermo ogni volta. È possibile impostare un’area del piede di pagina di posizione fissa o rendere la barra laterale visibile tutto il tempo.
Alla ricerca di una soluzione rapida?
Se stai cercando una soluzione rapida, c’è un rapido soluzione, c’è un Grande collezione di script e accessori di spostamento infiniti nel mercato invidere. Da pochi dollari, è un modo eccellente per implementare qualcosa in pochi minuti che ci vorrebbe molto di più da costruire da zero.!
Sia che tu stia cercando una soluzione per WordPress, Magento, Woocommerce o la tua configurazione, c’è qualcosa per te.!
Step 1 Pianifica la tua pagina
È importante pianificare Il tuo paging in anticipo, dove vuoi includerlo e come lo elaborerà. Una forma comune di pagatura è elencata i numeri di pagina nella parte inferiore della pagina. Tuttavia, quando si utilizza questo metodo, non verrà visualizzato più numeri di pagina alla fine del tuo elenco di elementi, dal momento che non sono più necessari. Questa pagina può essere utilizzata su tutti gli argomenti finché non includi molte informazioni nella sezione del tuo piè di pagina, poiché potrebbe non dare l’effetto desiderato ..
La nostra paging di scorrimento infinito utilizzerà Le funzioni JQuery e Ajax per effettuare la richiesta e recuperare più oggetti per mostrare loro l’utente. In questo tutorial, utilizzerò il tema venti dieci come esempio, puoi vedere la dimostrazione del lavoro di infinito per scorrere qui.
Step 2 Building The Ajax Function
Utilizzeremo WordPress Ajax Funzionalità per effettuare la chiamata per questa pagina. Innanzitutto, prepariamo la funzione di base per la nostra paginazione, inseriamo il seguente codice nelle funzioni dell’argomento. PHP
función wp_infinitepaginate () $ loopFile = $ _POST ; $ paged = $ _POST ; $ posts_per_page = get_option ('posts_per_page'); # Cargue los posts query_posts (array ('paged' => $ paged)); get_template_part ($ loopFile); salida;
Questa funzione verrà utilizzata per effettuare la chiamata Della nostra paginazione, inviare fondamentalmente due variabili a questa funzione tramite Ajax, uno è il numero di pagina e un altro è il modello di file che useremo per la nostra paginazione. Per consentire che questa funzione venga utilizzata con WordPress Ajax, abbiamo bisogno del seguente codice.
add_action ('wp_ajax_infinite_scroll', 'wp_infinitepaginate'); // para el usuario registrado en add_action ('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // si el usuario no ha iniciado sesión
L’azione predefinita per WordPress Ajax sarebbe wp_ajax_ (nuestro nombre de acción), quindi il motivo per cui il nome INFINITE_SCROLL viene utilizzato nell’esempio di codice. Dobbiamo aggiungere due azioni, una per utenti registrati e un altro per gli utenti che non hanno effettuato l’accesso.
Avanti, dovremo costruire la funzione Ajax che invierà le due variabili di cui abbiamo bisogno per la nostra paginazione. È possibile utilizzare i ganci WordPress per inserire questa funzione JQuery Ajax o inserirlo immediatamente sull’argomento dell’header.php
Questa sarà la chiamata di base Ajax sta per fare e usare “infinite_scroll” come il nostro nome di azione. WordPress chiamerà automaticamente la nostra funzione. wp_infinitepaginate (); perché lo definiamo sul nostro soggetto. functs.php in precedenza.
Passaggio 3 Determina quando l’utente si sposta sulla parte inferiore della pagina
Per abilitare il paging di scorrimento infinito, dobbiamo determinare quando l’utente raggiunge alla fine di la pagina. Questo può essere facilmente raggiunto tramite JQuery utilizzando il seguente codice.
Ora possiamo sapere quando l’utente raggiunge la fine della pagina. Di seguito dobbiamo chiamare il cargaArtículo Funzione all’interno della funzione di scorrimento. Sto aggiungendo un misuratore da utilizzare come il numero di pagina della nostra chiamata.
Ogni volta che l’utente si sposta nella parte inferiore della pagina, il contatore lo farà Aumentare e questo ci permetterà di passare il nostro numero di pagina per andare al nostro wp_infinitepage () funziona all’interno delle nostre funzioni argomenti. PHP. Con le funzioni di scorrimento e caricatarticle, ora possiamo fare la cosiddetta funzione Ajax all’interno del nostro tema WordPress, ma è possibile che il risultato non appaia se non abbiamo definito il file Loop all’interno della nostra cartella Argomenti.
STEP 4 Configurazione del nostro argomento
La cosa più importante è che dobbiamo configurare il div che conterrà il nuovo contenuto richiesto con la nostra funzione Ajax. In tema di venti dieci, c’è già un div che possiamo usare, che è il div con id = "contenido" quindi includeremo l’ID div sulla nostra funzione Ajax. Se si utilizza altri argomenti che non circondano il tuo ciclo in un div, è possibile semplicemente avvolgere la funzione del loop come il codice di esempio qui sotto per ottenere lo stesso risultato.
contenido de bucle
P> Avrò quindi bisogno di un file loop per questo. Tema Venti Ten ha già un file loop incluso, questo è il motivo principale per cui ho scelto venti dieci per questo esempio, perché è più facile per chiunque voglia fare riferimento a questo successivo. Se non si dispone di alcun loop.php, è sufficiente creare un nuovo file loop e copiare la funzione Loop all’interno del tuo index.php nel nuovo file e caricarlo nella cartella sul tuo argomento. Per chi usa il tema vento dieci, vorrai commentare la pagina inclusa nel file perché non ne avremo più bisogno (consultare il file sorgente tutorial per imparare come farlo).
Step 5 Aggiunta del caricatore AJAX
Questo è facoltativo, solo per dargli un bel tocco alla nostra infinita pagina di scorrimento. Aggiungeremo un’immagine del caricabatterie AJAX quando raggiungiamo la fine della pagina. È possibile aggiungere il seguente codice al footer.php
Cargando…
e quindi aggiungere il seguente CSS al foglio degli stili.
una posición # inifiniteLoader corregida; índice z: 2; inferior: 15px; derecha: 10px; pantalla: ninguna;
Avanti, aggiungeremo alcune linee di codice alla nostra funzione jQuery per visualizzare e nascondere questo elemento del caricabatterie Ajax.
Il caricabatterie Ajax verrà visualizzato una volta che l’utente raggiunge la fine della pagina e sarà nascosta una volta che la richiesta Ajax è finita ..
STEP 6 Limitazione aggiuntiva per migliorare lo spostamento infinito
Fino a Ora, abbiamo già uno spostamento infinito in funzione, ma una cosa manca. La funzione continuerà a essere attivata ogni volta che un utente raggiunge la pagina inferiore, anche se non ci sono più pubblicazioni da mostrare. Questo è qualcosa che non vogliamo avere. Aggiungeremo un controllo nella nostra funzione di scorrimento in modo che quando non verranno visualizzate più pagine, STOP ..
Aggiungi una nuova varietà totale alla funzione che lo farà Restituisce il numero totale di pagine disponibili sul nostro sito. Questo sarà utilizzato per garantire che le chiamate aggiuntive non vengano apportate alla pagina se è stata raggiunta la pagina massima. Un’altra cosa che vorremmo aggiungere è una restrizione in cui verrà addebitata questa funzione. Vogliamo solo questo sulla nostra home page, file o forse cerca, ma non nella nostra unica pubblicazione e pagina. Quindi avviluviamo un semplice PHP si mas funziona nel nostro codice jQuery.
if (! is_single () ||! is_page ()): // nuestra función jQuery aquí endif;
Praticamente tutto ciò di cui hai bisogno per Paginazione; Consultare i file di origine, ad esempio, il codice utilizzato in questo tutorial. I file sono basati su temi venti dieci ..