Tutorial su WordPress: come creare un sito WP a scorrimento infinito

Articolo scritto da:
  • WordPress
  • Aggiornato: Lug 29, 2014

Lavorerai sodo per migliorare l'usabilità del tuo sito in modo che i tuoi utenti siano più felici e più propensi a tornare spesso, giusto? Bene, uno dei miglioramenti che potresti implementare è la tecnica di scorrimento infinito. È fondamentalmente lo stesso di quello che abbiamo su Twitter o Facebook, dove all'inizio viene mostrato solo il contenuto di base e più contenuti vengono aggiunti mentre scorri verso il basso. Questo è abbastanza buono per migliorare le prestazioni del tuo sito (riducendo i tempi di caricamento) e migliorare l'esperienza dell'utente (poiché non è necessaria alcuna azione per caricare più elementi, come fare clic su un pulsante).

Qui vedremo perché e come usarlo nel tuo sito

Esempi: sito di scorrimento infinito

È sempre bene controllare cosa stanno facendo i grandi ragazzi là fuori, e questo tipo di effetto (difficile molte volte impercettibile) viene utilizzato da molti grandi siti e app, come Facebook (che trasmette dal vivo), Twitter, Pinterest, Feedly.

feedly

Twitter

Infinite Scroll - Cose da fare e da non fare

Questa tecnica rimuoverà il normale collegamento di paginazione del tuo sito ("post precedenti" o le pagine numerate che hai dopo i tuoi post). Il grande "pro" di questa tecnica è il tempo di caricamento, dal momento che meno elementi vengono caricati in un primo momento è possibile avere un sito molto più veloce, e dal momento che più elementi vengono aggiunti senza ricaricare la pagina l'utente può scorrere verso il basso per 10 "pagine" di post senza nemmeno notando, rimanendo molto più a lungo nel tuo sito.

Può essere applicato nella maggior parte dei siti, ma è più adatto per blog o siti di tipo portfolio, dove hai molti contenuti e immagini e non vuoi sovraccaricare l'utente con molti contenuti.

Questa guida non richiede competenze di programmazione e, ad essere sinceri, imparerai sicuramente un po 'su come modificare un po' il tuo tema WordPress.

I beni

Useremo Plugin JS di Paul Irish. Scaricalo e installalo nella cartella js del tuo tema. Utilizzeremo i Twenty Twelve per l'apprendimento, ma sentitevi liberi di usarlo in qualsiasi tema (e posta domande se non funziona per voi).

Inoltre avrai bisogno di una bella immagine gif per il tuo messaggio di "caricamento". Potresti trovarne molti là fuori, ma il AjaxLoad sito ha uno strumento davvero fantastico per aiutarti con molti stili preimpostati e puoi scegliere il colore che meglio si adatta alla tua combinazione di colori.

Una volta che hai scritto la sceneggiatura e la tua bella immagine GIF in Wp-content / themes / twentytwelve / js possiamo iniziare!

Il codice PHP

Ok, non aver paura, ti daremo un frammento di copia e incolla, ma ecco cosa dobbiamo fare per farlo funzionare:

  • Crea una funzione che carica e registra internamente il plugin scroll infinito: questo impedirà a WordPress di caricarlo due volte e di rompere le funzionalità del tema
  • Carica lo script solo quando hai una pagina che non è una singola pagina solo post in cui hai più di 1 post da mostrare, dovrai caricare più elementi.

Il file functions.php è il cuore del tuo tema. In genere, tutte le funzionalità sono lì o vengono richiamate da altri file. Quindi possiamo aggiungere questo codice nel tuo file di funzioni per aggiungere il supporto di scorrimento infinito (aggiungilo alla fine del file):

<? php / ************************* ENTRATE WEB SCORRIMENTO INFINITO ***************** ******** / / * Funzione che registrerà e accoderà lo script di Scolling infinito da utilizzare nel tema. * / function twentytwelve_script_infinite_scrolling () {wp_register_script ('infinite_scrolling', // nome dello script get_template_directory_uri (). '/ js / jquery.infinitescroll.min.js', // dove il file è array ('jquery'), // questo script richiede uno script jquery null, // non ha un numero di versione script true // script verrà inserito nel footer); if (! is_singular ()) {// solo quando abbiamo più di 1 post // caricheremo questo script wp_enqueue_script ('infinite_scrolling'); }} // Registra i nostri script personalizzati! add_action ('wp_enqueue_scripts', 'twentytwelve_script_infinite_scrolling'); / * Funzione che imposterà lo scrolling infinito per essere visualizzato nella pagina. * / function set_infinite_scrolling () {if (! is_singular ()) {// di nuovo, solo quando abbiamo più di 1 post // aggiungi script js sotto?> <script type = "text / javascript"> / * Questo è il impostazioni di scorrimento inifinite, puoi modificarlo a tuo piacimento * / var inf_scrolling = {/ * img: è il percorso dell'immagine di caricamento, aggiungi una bella icona di caricamento gif lì msgText: il messaggio di caricamento finishedMsg: il messaggio di caricamento finito * / caricamento: { img: "<? echo get_template_directory_uri ();?> / images / ajax-loading.gif", msgText: "Caricamento dei prossimi post ....", finitoMsg: "Post caricati !!",}, / * L'elemento successivo è imposta nextSelector. NextSelector è la classe css di navigazione della pagina. Nel nostro caso è # nav-below .nav-previous a * / "nextSelector": "# nav-below .nav-previous a", // navSelector è un id css di navigazione della pagina "navSelector": "# nav-below ", // itemSelector è il div in cui viene visualizzato il post" itemSelector ":" article ", // contentSelector è il div in cui il contenuto della pagina (post) viene visualizzato" contentSelector ":" # content "}; / * L'ultima cosa da fare è configurare contentSelector su scroll infinito, con una funzione jquery da infinite-scroll.min.js * / jQuery (inf_scrolling.contentSelector) .infinitescroll (inf_scrolling); </ script> <? }} / * dobbiamo aggiungere questa azione sul piè di pagina. 100 è un numero di priorità che corrisponde ad un'esecuzione successiva. * / add_action ('wp_footer', 'set_infinite_scrolling', 100); ?>

Approccio alternativo: caricamento di pagine e tipi di post personalizzati

Il codice precedente caricherà tutti i tuoi post, ma se volessi mostrare pagine o tipi di post personalizzati (come gli elementi del portfolio, se il tema lo supporta)? Bene, possiamo modificare un po 'il codice e farlo funzionare anche.

L'unica modifica necessaria è nel tuo indice, categoria o qualsiasi altro file che caricherà gli elementi, sostituirai il tuo loop corrente con un codice diverso. Puoi identificare il tuo loop con questo codice:

while (have_posts ()):

Quindi, una volta trovato, puoi usare questo codice magico:

<div id = "content" role = "main"> <? php / * Mostra solo Pages su scroll infinito! Ecco il segreto: puoi impostare post_type per ciò di cui hai bisogno, è semplice! Alcuni post_types potrebbero essere: portfolio, project, product Potremmo aggiungere tutti i tipi di post che vogliamo, separandoli con virgole, come "post", "page", "product" * / $ args = array (// imposta argomenti 'post_type' => 'pagina', // solo pagine); query_posts ($ args); // carica post if (have_posts ()):?> <? php / * Avvia Loop * /?> <? php while (have_posts ()): the_post (); // il "solito" codice di loop per visualizzare quegli elementi?>

Conclusione

Questo è solo un articolo di "riscaldamento". Ci sono molte cose che potresti fare con questo tipo di approccio. Ad esempio, puoi caricare i prodotti nel tuo negozio (usando WooCommerce, forse) mentre l'utente scorre, o anche aggiungere più codice JS e CSS per creare e un fantastico caricatore simile alla parallasse per le immagini post.

Cosa ne pensi di questa tecnica? Ti piace? Lo useresti? Condividi i tuoi pensieri usando la sezione commenti!

A proposito di Rochester Oliveira

Sono un web designer e imprenditore di Itajubá (MG), Brasile. Adoro scrivere argomenti oscuri e fare cose interessanti.

Collegare: