Visualizza i post di WordPress in un elenco illimitato. Super plugin WordPress a scorrimento infinito Pulsante mostra Wordpress

Golovna / Corisna informazioni

Ajax Load More è l'ultimo plug-in di scorrimento infinito di WordPress per il caricamento pigro di post, singoli post, pagine, commenti e altro con Ajax Powered Queries.

Crea complesse query WordPress personalizzate con Ajax Load More short code Builder installerà il codice breve al tuo fianco dietro un editor invece che direttamente nei tuoi file modello.

Ajax Load More è compatibile per lo scorrimento infinito con i popolari plug-in di eCommerce come WooCommerce e Easy Digital Downloads.

Caratteristiche

  • Costruttore di codici brevi— Crea il tuo shortcode Ajax Load More personalizzato valido per diversi parametri di WordPress nella nostra pratica chiamata di attivazione shortcode personalizzata (vedi Parametri shortcode).
  • Parametri di interrogazione- Ajax Load More ti consente di interrogare WordPress con molte opzioni diverse. Query per tipo di post, formato post, data, categoria, tag, tassonomie personalizzate, termine di ricerca, autori e altro!
  • Modelli ripetitore— Modifica ed estendi la funzionalità di Ajax Load More creando il tuo modello di ripetitore che corrisponda all'aspetto del tuo sito Web (vedi schermate).
  • Più istanze— Puoi includere alcuni articoli di Ajax Load More su un lato, post o modello.
  • Filtraggio Ajax- Il metodo di filtraggio personalizzato Ajax Load More ti consentirà di filtrare e aggiornare i risultati della query Ajax.
  • Compatibilità multisito- Gestisci i modelli ripetitori su tutti i siti della tua rete.
  • Pannello delle impostazioni— Personalizza la tua versione di Ajax Load More aggiornando diverse impostazioni del plugin.
  • ripetitore- Scegli un modello ripetitore (componente aggiuntivo disponibile). predefinito='predefinito'
  • post_type- Elenco separato da virgole di tipi di post. default='post'
  • sticky_posts- Mantieni l'ordine post appiccicoso per l'elenco Ajax. predefinito=falso
  • post_format- Query per formato postale. predefinito=nullo
  • categoria— Un elenco di categorie separate da virgole da includere per slug. predefinito=nullo
  • categoria_e— Un elenco di categorie separate da virgole da includere in base all'ID. predefinito=nullo
  • categoria__non_in- Un elenco di categorie separate da virgole da escludere in base all'ID. predefinito=nullo
  • etichetta- Un elenco di tag separati da virgole - include per slug. predefinito=nullo
  • etichetta_e— Un elenco separato da virgole di tag include per ID. predefinito=nullo
  • tag_not_in- Un elenco di tag separati da virgole - escludi per ID. predefinito=nullo
  • tassonomia- Query in base al nome della tassonomia personalizzata. predefinito=nullo
  • tassonomia_terms- Elenco separato da virgole di termini di tassonomia personalizzati (slug). predefinito=nullo
  • tassonomia_operatore
  • tassonomia_relazione— La relazione logica tra ogni tassonomia quando ce n'è più di una. (E/O). Predefinito = 'E'
  • giorno- Giorno della settimana. predefinito=nullo
  • mese- Mese dell'anno. predefinito=nullo
  • anno- Anno di carica. predefinito=nullo
  • tassonomia_operatore— Operatore per confrontare termini di tassonomia con (IN/NOT IN). default='IN'
  • meta_chiave- Chiave di campo personalizzata (nome). predefinito=nullo
  • meta_valore- Valore del campo personalizzato. predefinito=nullo
  • meta_compare- Operatore per confrontare meta_key e meta_value contro. default='IN'
  • meta_tipo- Tipo di campo personalizzato. Predefinito = 'CHAR'
  • meta_relazione- Vincere con più voci di campi personalizzati (AND/OR). Predefinito = 'E'
  • autore- Elenco degli autori separati da virgola per id. predefinito=nullo
  • post_in— Elenco separato da virgola di ID post inclusi nella query. predefinito=nullo
  • post_not_in- Elenco separato da virgole di ID post da escludere dalla query. predefinito=nullo
  • ricerca- Query termine di ricerca ('s'). predefinito=nullo
  • custom_args- Un elenco di valori separati da punto e virgola: coppia di argomenti. per esempio. tag_slug__and:progettazione,sviluppo; event_display:in arrivo. predefinito=nullo
  • post_status- Selezionare lo stato del post. Predefinito = 'pubblica'
  • ordine— Visualizza i post in ordine ASC (crescente) o DESC (discendente). Predefinito='DESC'
  • ordinato da- Ordina i post per data, titolo, nome, ordine del menu, autore, ID del post o conteggio dei commenti. default='data'
  • compensare- Compensare la query iniziale (numero). predefinito='0'
  • post_per_pagina- Numero di post da caricare con ogni richiesta Ajax. predefinito='5'
  • scorrere- Carica più post man mano che l'utente scorre la pagina (vero/falso). default='vero'
  • scroll_distanza- Cammina da un bordo all'altro fino al caricamento dei pali da parte del tiratore durante lo scorrimento. default='150'
  • scroll_contenitore- Limita Ajax Load More scorrimento infinito a un contenitore padre. predefinito=nullo
  • max_pages- Numero massimo di pagine da caricare mentre l'utente sta scorrendo (attivato quando scroll = true). predefinito='0'
  • pause_override- Consenti lo scorrimento per ignorare il parametro Pausa e attivare il caricamento dei post sullo scorrimento. predefinito=nullo
  • pausa- Non caricare i post fino a quando l'utente non preme il pulsante Carica altro (vero/falso). default='falso'
  • transizione- Scegli una transizione di rivelazione dei montanti (dissolvenza/muratura/nessuna). default='dissolvenza'
  • contenitore_transizione- Visualizzare il contenitore di caricamento Ajax Load More (.alm-reveal). default='vero'
  • transition_container_classes- Aggiunta di classi al div di transizione .alm-reveal.
  • muratura_selettore- Il nome della classe di destinazione di ciascun elemento in muratura. predefinito=nullo
  • muratura_animazione- Selezionare il tipo di transizione di caricamento per gli elementi in muratura. (predefinito/rimpicciolisci/scorri verso l'alto/scorri verso il basso/nessuno). predefinito = predefinito
  • muratura_ordineorizzontale- Mantenere l'ordine orizzontale. predefinito=vero
  • immagini_caricate- Attendere il caricamento di tutte le immagini prima di visualizzare il contenuto caricato in ajax (vero/falso). default='falso'
  • distruggere_dopo- Rimuovi ajax carica più funzionalità dopo che il numero di pagine 'n' è stato caricato. predefinito=nullo
  • barra di avanzamento- Visualizza l'indicatore della barra di avanzamento nella parte superiore della finestra durante il caricamento del contenuto Ajax. default='falso'
  • progress_bar_color- Inserisci il colore esadecimale della barra di avanzamento. default='ed7070'
  • etichetta_pulsante— Il testo dell'etichetta per il pulsante Carica altro. Predefinito = 'Vecchi messaggi'
  • - Aggiorna il testo del pulsante Carica altro durante il caricamento del contenuto. predefinito=nullo
  • tipo_contenitore- Sostituisci il tipo di contenitore globale impostato nella pagina Impostazioni ALM. predefinito=nullo
  • classi_css- Aggiungi classi CSS personalizzate al contenitore Ajax Load More. predefinito=nullo
  • id- Un ID univoco per l'istanza Ajax Load More.
  • nidificato- Questa è un'istanza Ajax Load More non modificabile. predefinito=falso

Esempio Ajax carica più shortcode

Demo di esempio

  • Predefinito- Funzionalità e stile pronti all'uso.
  • Campi personalizzati avanzati- Dati dei campi personalizzati avanzati a scorrimento infinito con Ajax Carica di più.
  • allegati- Infiniti allegati di post di scorrimento.
  • Distruggi dopo— Rimuovi la funzionalità Ajax Load More dopo 'n' numero di pagine.
  • Elenco degli eventi— Ordinare ed elencare gli eventi in base alla data del campo personalizzato.
  • filtraggio- Reimposta e filtra sull'istanza Ajax Load More.
  • Scatola flessibile— Creazione di una griglia Ajax Load More reattiva con Flexbox.
  • Scroll infinito— Uno sguardo alla nuova funzionalità e agli stili di caricamento.
  • Immagini caricate- Scarica le immagini prima di visualizzare il contenuto caricato ajax.
  • Opere murarie— Creazione di un layout di griglia flessibile con Masonry JS.
  • Più istanze- Includi più Ajax Load More 'su una singola pagina.
  • URL di paging- Genera URL di paging univoci per ogni query Ajax Load More con il componente aggiuntivo SEO.
  • - I post non verranno caricati fino a quando non vengono avviati dall'utente.
  • Post precaricati- Facile precarico di un set iniziale di post per tutte le richieste Ajax sul server.
  • barra di avanzamento- Mostra un indicatore di caricamento della barra di avanzamento con ogni richiesta Ajax.
  • risultati di ricerca- Restituzione dei risultati in base ai termini di ricerca.
  • Contenitore a scorrimento- Vincola Ajax Load Larger al contenitore principale.
  • SEO e paginazione- Combina questi due componenti aggiuntivi per creare un potente sistema di navigazione.
  • Galleria di diapositive— Crea una galleria di ricerca con il componente aggiuntivo Ajax Load More e Paging.
  • Disposizione della tabella- Ajax Load More visualizzerà i risultati richiesti in un formato tabella.

Tutti noi abbiamo ceduto agli archivi, per alcuni, quando abbiamo scelto un mese, siamo stati gettati dalla parte dei registri per quel mese. WordPress ha un tale modo di archiviare i messaggi per la funzione aggiuntiva wp_get_archives(). Un archivio di post simile verrà visualizzato quando vengono visualizzate le intestazioni principali di WordPress, solo i post sono raggruppati per categoria.

Oggi voglio dirtelo come costruire un lato archivio dinamico. "Dinamico" significa questo quando scegli un mese, i risultati verranno visualizzati dalla tua parte, per aiuto AJAX - Javascript. Se la libreria jQuery fornisce un'utile API per lavorare con Ajax, allora hackereremo il framework. Fino ad allora, dove sono i giorni senza jQuery? Adzhe vin vikoristovuetsya spesso densamente e cantilenante nel tuo progetto vin già connesso.

Prima di scrivere questi articoli, ho creato una pagina di archivio dinamico per questo blog, Voglio meravigliarmi (DEMO).

Per implementare archivi dinamici, dobbiamo passare attraverso 4 fasi:

Sto mostrando la creazione di un lato dinamico degli archivi sopra il tema base di WordPress: "twentyten".

1. Collegamento di jQuery a WordPress

Il modo corretto per includere uno script jQuery consiste nell'usare invece la funzione wp_enqueue_script(). Tale connessione ti garantirà in caso di conflitti dalla connessione di questo script nei plugin. Lo script verrà abilitato una volta.

Devi inserire questo codice nel file functions.php.

opzione 2

Per la prima opzione, abbiamo incluso uno script dal nostro server, che è lo stesso per i file WordPress. Tuttavia, puoi modificare la richiesta nel file jQuery e collegarlo al CDN di Google. Il vantaggio di un tale approccio è che se il browser ha già preso il file, quando vai sul tuo sito, il browser non accetta più lo script / L'acquisizione del lato aumenta. Inoltre, lo script CDN è visto in modo artificioso, per cui il file è più leggero di un kilobyte:

Funzione my_scripts_method() ( wp_deregister_script("jquery"); wp_register_script("jquery", "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"); wp_enqueue_script("j ) ;) add_action("wp_enqueue_scripts", "my_scripts_method");

Opzione 3

La versione più recente e cosiddetta "zhorst" della connessione jQuery: non scrivere una richiesta nel nuovo modello di file header.php al centro del tag. Inserisci il seguente codice html:

2. Cattura l'immagine prima dell'acquisizione

Al momento della convalida, se chiede al server di forzare l'aiuto di AJAX, dobbiamo mostrare un'immagine, ricordando al koristuvach, cosa viene chiesto. Tali immagini tu, cantilenante, hai brulicato ai confini e più di una volta, un'alternativa a un'immagine del genere è il testo: "Entanglement ...".

Quindi abbiamo avuto un'immagine del genere, scarichiamola, ad esempio, ad esempio, qui: GIF animata (servizio che ho ricevuto), cambiala in ajax-loader.gif e mettila nella cartella delle immagini, come è nel nostro WordPress directory dei temi. Di conseguenza, vediamo un'immagine del genere: http://example.com/wp-content/themes/twentyten/images/ajax-loader.gif. Sotto mi yogo vikoristovuemo in codice.

3. Creazione di un modello di un lato permanente

Per le post-page in WordPress si possono scegliere diversi template, in questo modo possiamo creare un lato, come se fosse diverso dalla struttura degli altri lati. Per dire a WordPress che il file è stato creato come modello per la pagina del post, devi scrivere il seguente codice in cima al file:

Modello di archivio: il nome del nostro modello, come lo vediamo nel pannello di amministrazione di WordPress, quando viene creato il lato post.

Creiamo un nuovo file nella cartella con il nome tpl_archive.php e incolliamo lì il codice del suggerimento. Quindi andiamo al pannello di amministrazione di WordPress e creiamo un nuovo lato, riconoscendo questo modello.

Ora salviamo il file con il codice necessario.

1. Siamo davanti, dobbiamo inserire gli elenchi di cosa lasciare, facciamolo per ulteriori funzioni di WordPress: wp_get_archives() e wp_dropdown_categories() :

Mesi

Categorie

get_header(); e get_footer(); otrimuyut il cappuccio e abbina il modello vodpovidno. get_sidebar(); I virіzav navmisno, schob non misshavsya nel codice rozumіnі. Codice Reshta per visualizzare elenchi di Misyatsiv e rubriche.

Blocco vuoto

- contenitore tse dove vedere i risultati della richiesta, tobto. documentazione

2. Formare le liste che passano attraverso i CSS, per cui dodamo, tale codice è immediatamente seguito dall'header wiki ():

A che punto mi è successo così:


3. Codice JavaScript Dodamo, quale viconuvatetime viene inviato al server e restituito al blocco archive_pot (il codice può essere aggiunto dopo gli stili css):

Rozberomo trochi codice:
Qualunque cosa nel mezzo di $("#archive_browser select").change(function()(...) funzionerà quando si cambiano gli elenchi mancanti.

/images/ajax-loader.gif - percorso del file immagine (avanzato...), in modo che possa essere richiesto durante la richiesta.

/scripts/archive_getter.php - il percorso del file di recupero, che creeremo nella fase successiva.

$.post(...); - Funzione jQuery che invia il browser al server utilizzando la tecnologia AJAX.

Nuovo codice per il modello di pagina del post

File per il template post-page (creiamo il file con i pap con la stessa copia dello stesso codice):

Mesi

Categorie

4. Creazione di un file-obrobnik

AJAX può essere utilizzato per "dividere" il browser con il server senza coinvolgere nuovamente il lato, utilizzando Javascript. Lo script da solo non può portare via i dati, anche se si trova sul computer del koristuvach e i dati sono sul server, quindi se lo script ha preso i dati, il vino è colpevole di tornare al server, in questo caso tale dialogo sarà pidtrimuvat file-obrobnik.

Creiamo la cartella degli script nella directory con lo stesso, creiamo il file archive_getter.php (/wp-content/themes/twentyten/scripts/archive_getter.php) e il file con il seguente codice:

"; ) else ( // Recupera i dati per la guida query_posts query_posts("posts_per_page=-1&cat=$cat&monthnum=$month&year=$year"); // Visualizza i dati nel loop di WordPress if(have_posts())( while(have_posts( ) )( the_post(); ?> "; } ?>
Per favore, scegli una data/categoria dall'elenco qui sopra.
">
Non abbiamo trovato nulla.

Analisi del piccolo codice:

Sto pensando all'ambiente WordPress (tutte le personalizzazioni, le funzioni, i plugin). Dobbiamo lavorare per rendere disponibili le funzioni di WordPress, il codice query_posts(), mentre hackeriamo questo file per estrarre i dati.

Attenzione if(($year=="") && ($month=="") && ($cat=="-1"))(...) per modificare la funzione query_posts(), dato che non ci sono altri quelli, allora deve essere rifatto.

query_posts("posts_per_page=-1&cat=$cat&monthnum=$mese&anno=$anno"); E tutto ciò che segue è il ciclo principale di WordPress.

Asse e tutto, il lato è pronto!

L'asse di ciò che era in me (anche se è solo un'immagine. Un culo vivente):

Potenziamento contenuto (pulsante mostra) wordpress (ajax)

Uno degli assistenti mi ha chiesto di aggiungere contenuti dinamici (post, record) al sito, oppure il "pulsante mostra". Il design di tali soluzioni sta diventando sempre più popolare. Ricezione simile può essere trovata su Twitter, vkontakte. Per wordpressa, scusa per i plug-in dell'edificio virishity, il compito è troppo piccolo, conosco solo un plug-in, ma non ci sono riuscito, ho continuato la soluzione. E avendo speso sul tema della vista, lì, per la creazione di una promozione dinamica dei post, viene utilizzata la libreria jquery.

Per creare una promozione dinamica per i contenuti, abbiamo bisogno di due file:

Il file jquery.cookie, lo script dovrà essere inserito nella cartella js poiché si trova nella cartella con il tuo modello, poiché non esiste una cartella di questo tipo, quindi devi crearla. È necessario aggiungere percorsi agli script nel file header.php.

//spazio tra i tag

Poiché hai registrato i percorsi degli script, non è sufficiente modificare il file index.php, o se si tratta di un altro file, prevedi di sviluppare post migliorati dinamicamente. Bisogno di aggiungere id="ciclo" ai posti container, classe="post" al blocco della posta, id = "impaginazione" là de vie si desidera posizionare il pulsante "Mostra". Il codice dovrebbe assomigliare a questo:

**** ****

Risultato pratica:

La libreria jquery è richiesta per lo script robot, puoi aggiungere la libreria in questo modo

Modello per testare la promozione dei contenuti

Per protestare contro l'anticipo, è necessario portare il modello nella cartella wordpress con i modelli, quindi selezionare il modello nel pannello di amministrazione con il nome test

Se hai bisogno della mia risorsa e vuoi sostenermi finanziariamente, allora puoi cambiare la somma, vittoriosi prossimi requisiti:

  • Yandex hamanet - 410014625168542
  • webmoney- R429373694729

Cosa c'è dietro l'aiuto della tecnologia AJAX con il metodo di ottimizzazione per-shock aver allegato al sito una parte sotto forma di sistemi di ricerca (che, a dir poco, non è cloaking).

Ho implementato tecnicamente. Oskіlki conosceva molte persone disposte a ripeterle sui propri blog, cercherò di trasmettere informazioni su quelle, come se lo volessi.

AJAX è, infatti, una parte dinamicamente interessante invece di un lato per l'aiuto di JavaScript. Tobto. nachebto utilizzato sul sito parte del contenuto viene visualizzato, ma, se guardi il codice di uscita della pagina, non c'è niente lì. Altrimenti, disattiva il supporto JavaScript nel browser, il cui contenuto non sarà visibile.

Tale possibilità può essere vittoriosa, ad esempio, singhiozzare modificare il numero di messaggi interni sui siti per i sistemi poke. Né Google né Yandex non indicizzano quella parte del contenuto che è collegata tramite AJAX.

Bene, passiamo alla pratica. Ti dirò Come rubare su WordPress sul retro dell'elenco mensile degli archivi, che verrà visualizzato nella barra laterale.

Puntello 2 opzioni soluzione. L'altro è il più semplice.

Prima opzione

    ajax_archives.php) con la prossima volta:

    Vai all'area di amministrazione di WordPress e crea una nuova pagina. Nominalo come al solito, ad esempio "Elenco di archivi". Destro al blocco " Attributi laterali» selezionare il modello "Elenco archivi AJAX".

    Se vedi questo lato nel browser, allora puoi dire che c'è solo un elenco richiesto e niente di più. Axis ce mi e p_dvantazhuvatememo sul sito nell'area richiesta.

    Ci file barra laterale.php

    AJAX è implementato con l'aiuto di jQuery, quindi poiché non ci sono ancora connessioni sul tuo sito, il file header.php prima del codiceaggiungi il codice successivo:

    Ora ho perso la possibilità di aggiungere un piccolo script al sito, che è un contenuto eccitante e necessario. Crea un file js (ad esempio, script.js

    (function($) ( $(function() ( $("#archives").load("http://YOUR_DOMAIN/ajax_archives/"); )) ))(jQuery)

    Sostituisci http://YOUR_DOMAIN/ajax_archives/ Invia l'indirizzo dell'altro lato creato.

    header.php :

Un'altra opzione

Questa opzione è straordinariamente semplice, perché qui non è necessario creare un lato aggiuntivo.

    Crea un nuovo file php per tuo padre con un modello WordPress (ad esempio, ajax_archives.php) con la prossima volta:

    La primissima riga del codice fa scomparire la necessaria creazione di un nuovo lato.

    Ci file barra laterale.php, se vuoi vedere un elenco di archivi, inserisci il seguente codice html:

    Se jQuery non è ancora incluso nel tuo sito, file header.php prima del codiceaggiungi il codice successivo:

    Crea un nuovo file js (ad esempio, script.js) e incollare il codice successivo:

    (function($) ( $(function() ( $("#archives").load("http://YOUR_DOMAIN/wp-content/themes/Template_FOLDER/ajax_archives.php"); )) ))(jQuery)

    Rilascia il file nella cartella dal modello del tuo sito e connettiti al file header.php, inserendo una riga di avanzamento prima del tag :

Asse, vlasne, e basta. Puoi controllare il risultato.

Con un grado simile, puoi zapkhati anche l'intera barra laterale, oppure puoi invece creare uno spratto di blocchi okremikh da yakimos.

Yak Vee già, cantilenante, indovinato, oggi si tratta della promozione ininterrotta di nuovi post durante lo scorrimento su WordPress. Tobto, vice navigazione post-record, le voci appariranno automaticamente ogni ora di scorrimento. Raggiungi nuove registrazioni senza chiedere aiuto AIAX. zrobimo tutto tse, senza usare plugin.

Mostrerò subito due vie di tale avanzamento. In sostanza, allo stesso modo, un po' con autorità diverse. L'anticipo verrà attivato automaticamente durante lo scorrimento o premendo il pulsante, ad esempio - mostrando. Ciò che è giusto per il tuo sito, tezh virishuvati you.

Avanza automaticamente le registrazioni per ora di scorrimento

Krok 1

Per la pannocchia è necessario sapere che de Wee vuole eseguire l'auto-vantaggio. Molto spesso, è necessario installare una scorciatoia, de є l'introduzione del ciclo dalla navigazione post-record. Ad esempio, ho un file contenuto.php. Quindi puoi solo bottino - indice.php, archivio.php, ciclo.php, categorie.php, cerca.php e così via. Questi file possono avere una navigazione WordPress standard o avere una funzionalità autonoma. Applicare є all'articolo.

Quindi, poiché hai qualcosa di simile a questo, crescerà proprio alla fine del ciclo. Sostituisci Nuovo Successivo Inserisce il codice successivo.

max_num_pages > 1) : ?>

La parte superiore del codice non è necessaria, ma l'asse inferiore è necessario per l'animazione dell'ora di interesse. Non devi solo vedere tutto ciò che è nel mezzo del blocco - load_more_gs, o sostituisci tutto nel mezzo, non load_more_gs stesso, ma inseriscilo invece nel tuo codice e avrai la tua animazione.

UPD.Tuttavia, se fai la ricerca, farai bene a provare dalla parte delle categorie, ma non dalla parte della ricerca, puoi provare a sostituire la 4a riga con il codice sulle nuove due:

// Sostituisci var true_posts = "query_vars); ?>"; // Sulla destinazione $str = serialize($wp_query->query_vars); var true_posts = "";

Krok 2

Ora aggiungi stili per la nostra animazione. Yakscho Vi її è stato visto, puoi saltare questo paragrafo.

#load_more_gs( width: 53px; padding:50px 0; margin:0 auto; ) .cssload-container( position:relative; ) .cssload-whirlpool, .cssload-whirlpool::before, .cssload-whirlpool : absolute; alto: 50%; a sinistra: 50% bordo: 1px solido rgb(255,255,255); bordo-sinistra-colore: rgb(0,225,255); bordo-raggio: 974px; -border-radius: 974px; -webkit-border-radius: 974px; -moz-border-radius: 974px; ) cssload-rotate 1150ms lineare infinito;-o-animazione: cssload-rotate 1150ms lineare infinito;-ms-animation: cssload-rotate 1150ms lineare infinito; ruotare 1150 ms lineare infinito; ) .cssload-whirlpool::before ( content: ""; margin: -22px 0 0 -22px; cssload-rotate 1150ms linear infinite;-ms-animat ion: cssload-rotate 1150ms linear infinite; -webkit-animation: cssload- ruotare 1150ms lineare infinito; -moz-animation: cssload-rotate 1150ms lineare infinito; ).cssload-whirlpool::after ( contenuto: ""; margine: -28px 0 0 -28px; altezza: 55px; larghezza: 55px; animazione: cssload-rotate 2300ms lineare infinito; infinito;-ms-animation: cssload-rotate 2300ms lineare infinito; -webkit-animation: cssload-rotate 2300ms lineare infinito; -moz-animation: cssload-rotate 2300ms lineare infinito; ruota (360 gradi); ) ) @-o-keyframes cssload-rotate ( 100% ( -o-transform: ruotare(360deg); ) ) @-ms-keyframes cssload-rotate ( 100% ( -ms-transform: ruotare( 360deg); ) ) @-webkit-keyframes cssload-rotate ( 100% ( -webkit-transform: ruotare(360deg); ) ) @-moz-keyframes cssload-rotate ( 100% ( -moz-transform: ruotare(360deg) ; ) )

Krok 3

Ora abbiamo bisogno di uno script di cattura asincrono. Ci sono due modi di ciliegia qui. Oppure inserisci lo script in fondo al thread, comprimendo lo yoga nei tag:

Abo crea un file, ad esempio - moreload.js, aggiungi lo script a quello nuovo, quindi attivalo in basso, indicando il percorso corretto, in questo modo:

Altrimenti, aggiungendo il codice a funzioni.php:

Funzione loadmore_scripts_gs() ( wp_enqueue_script("moreload", get_template_directory_uri() . "/js/moreload.js", array("jquery"), null, true); ) add_action("wp_enqueue_script

Krok 4

Ora la sceneggiatura stessa. Una copia viene inserita nel maggese nel modo che hai scelto.

jQuery(function($)( $(window).scroll(function())( var bottomOffset = 2000; var data = ( "action": "loadmore", "query": true_posts, "page" : current_page ); if ( $(document).scrollTop() > ($(document).height() - bottomOffset) && !$("body").hasClass("loading"))( $.ajax(( url:ajaxurl, data: data , digitare:"POST", beforeSend: function(xhr)( $("body").addClass("loading"); ), success:function(data)( if(data) ( $("#load_more_gs") ).$("body").removeClass("loading"); current_page++; ) else ( $("#load_more_gs").remove(); ) )));

La riga 3 ha un valore 2000 . Tse significa, accesso al limite inferiore del sito, avendolo fatto nella misura in cui è possibile, ci sarà un aumento di nuovi record. Puoi cambiare, ma non esagerare, in modo che non ci sia avanzamento.

Alle 19.24 viene indicato un blocco di fila load_more_gs, se vuoi cambiare il nome del blocco, devi farlo non solo nei cicli e negli stili, ma anche negli script.

Krok 5

Function true_load_posts()( $args = unserialize(stripslashes($_POST["query"])); $args["paged"] = $_POST["page"] + 1; // la pagina sta arrivando $args["post_status " ] = "pubblica", $q = new WP_Query($args);

" rel="segnalibro" title="!}!}">

Questo codice deve essere modificato in base al tema. È colpa tua sostituire le righe - 9, 10, 11 con il codice HTML, che hai nel mezzo del ciclo in qualsiasi file, de mi vykonuvali KROK No. 1. Se non hai HTML, ma in PHP scrivi i record, devi sostituire l'8a, 9a, 10a, 11a, 12a riga. Il codice Tobto tse, che garantisce la creazione di una miniatura, nomina il record, il testo del teaser è troppo sottile. Se non rompi nient'altro, tutto sarà storto e armeggierà con il design dei tuoi post.

Poiché hai sostituito parte del codice con il tuo, puoi provare a sovrascrivere il robot di vantaggio automatico. Se non hai avuto la grazia, otterrai il primo risultato. Ora passiamo a un altro tipo di pregiudizio.

Registra l'avanzamento alla pressione del pulsante - Indicativo

Krok 1

Il codice del primo passaggio, oltre il metodo, che deve essere inserito nel file dal ciclo, sarà lo stesso, crema della parte inferiore, in modo che la sostituzione del preloader sarà un pulsante. Quindi ruota il codice solo dalla prima volta all'ultimo metodo:

//vice

//Inserire
mostrando

mostrando- È possibile modificare il testo del pulsante, se lo si desidera.

Krok 2

Ora aggiungi nuovi stili per il pulsante. Se hai aggiunto stili al primo metodo, puoi vederli.

#loadmore_gs( background:#63a63e; color:#fff; padding:5px 0; text-align:center; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius: 4px; width: 150px;margine:0 auto;cursore:puntatore;

Krok 3

Esattamente lo stesso, come nell'ultimo metodo, come prima che lavorassero con lo yoga, salta, come se no, quindi lavora in modo simile al primo metodo.

Krok 4

La sceneggiatura di zavantazhennya trohi asincrono vіdrіznyatmeetsya, oskіlki ora in spratsovuvatime premendo il pulsante. Guarda il vin in questo modo:

jQuery(function($)( $("#loadmore_gs").click(function()( $(this).text("Loadmore..."); var data = ( "action": "loadmore", "query ) ": true_posts, "page" : current_page ); text("Mostra").before(data); current_page++; if (current_page == max_pages) $("#loadmore_gs").remove(); ) else ( $ ( "#loadmore_gs").remove(); ) ) )); )); ));

Qui puoi cambiare il testo del pulsante o cambiare il nome dell'ID, quindi puoi cambiarlo. Nella terza riga c'è una parola -. Vedrai se premi il pulsante e il lavoratore AJAX sarà migliore del tuo lavoro.

Alla quindicesima riga il testo - mostrando, il cui testo apparirà dopo l'avvento. Se hai modificato il testo dal primo paragrafo, modificalo qui.

Krok 5

Obroblyuvach rimane con lo stesso senza modifiche, quindi puoi saltare questa parte, o se non hai ucciso Viyogo, allora vikoyoyogo dal metodo passato.

Per un altro metodo, tezh usі. Come il primo, come tutti i passaggi sono corretti, il risultato non sarà d'intralcio.

Ho riconsiderato gli insulti dei metodi e gli insulti dei robot, quindi ho aggiunto il pulsante e il preloader e ho provato tutto sul mio sito. È possibile incolpare qualcuno per i problemi, è necessario guardare fuori dalla situazione e rispettosamente meravigliarsi. L'argomento della pelle è diverso e il blog della pelle è speciale, quindi prima, come scrivere che il metodo non funziona, giralo di nuovo.

Su tsimu tutti, dyakuyu per rispetto. 🙂

© 2023 androidas.ru - Tutto su Android