Vai al contenuto principale

Come utilizzare correttamente WP_Query su WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 600.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Sono un grande fan della classe WP_Query: lo utilizzo su diversi siti Web client per recuperare e visualizzare i dati in modo personalizzato.

Se si desidera utilizzare più loop in una pagina, il modo migliore per farlo è eseguire "WP_Query" ogni volta che è necessario eseguire il loop.

Ma c'è un inconveniente: ogni volta che WordPress esegue un ciclo, invia query al database, che richiede più tempo e può rallentare il tuo sito web.

In questo tutorial, ti mostrerò come utilizzare una query per più di un ciclo. Puoi farlo con la query principale oppure puoi usare la stessa tecnica con WP_Query.

Esploreremo gli aspetti di 3:

  • Crea un tema figlio e un file modello.
  • Crea un modello per il contenuto del loop.
  • Crea i nostri loop.

Ma prima scopriamo insieme Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog

Quindi torniamo al perché siamo qui.

Quello che vi serve

Per seguire questo tutorial, avrete bisogno di:

  • Da un'installazione di WordPress per lo sviluppo (a livello locale).
  • Un editor di codice.
  • Articoli nel tuo sito Web con più categorie assegnate
  • il ventisei tema di WordPress
  • Un tema figlio di ventisei sedici installato e attivato

Questa tecnica si adatta anche alla tua situazione e al tuo tema WordPress.

Creare un tema figlio

Innanzitutto, creeremo il tema figlio di ventisei sedici. Lo sto facendo perché non voglio cambiare il tema principale.

Scopri Come installare un tema WordPress bambino

Nella cartella "contenuto / temi / wp", crea una nuova cartella vuota, che chiamerai "tema tutor". Successivamente puoi scegliere il nome che fa per te.

In questa cartella, crea un file chiamato style.css e aggiungi il seguente codice:

/*

Nome del tema: tema di Tuto

URI del tema: https://blogpascher.com

Descrizione: tema a supporto dell'esercitazione sull'esecuzione di più loop durante l'interrogazione del database una sola volta. Tema figlio per il tema Twenty Sixteen.

Autore: Hervé

URI dell'autore: https://blogpascher.com

Modello: ventisette

Versione: 1.0

*/

@import url ("../twentysixteen/style.css");

Ora salva questo file e attiva il tuo nuovo tema WordPress.

Il prossimo passo è creare un file modello per le categorie, ecco su cosa lavoreremo.

Crea una copia del file "archive.php" dal tema WordPress "Twenty Sixteen". Non spostarlo, ma eseguine una copia. Rinominalo "categoria.php".

Per andare oltre, scopri Come gestire i file e le cartelle di WordPress

Questo sarà ora il file modello per le categorie del tuo sito Web.

Creazione di un nuovo file modello

Il primo passo è creare un nuovo file modello nel nostro tema che conterrà una versione modificata del ciclo "ventisei".

Consultiamo anche insieme Come mettere il tuo sito Web WordPress in modalità Manutenzione

Nella cartella del tema figlio, crea una sottocartella denominata "include". E all'interno, crea un nuovo file chiamato "loop-category.php".

Quindi, apri il file "template-parts / content.php" dalle cartelle dei temi principali (ventisei sedici) e trova il seguente codice:

<article id = "post - <? php the_ID (); ?> "<? Php post_class (); ? >>

<header class = "entry-header">

<? php if (is_sticky () && is_home () &&! is_paged ()):?>

<span class = "sticky-post"> <? php _e ('Featured', 'twentysixteen'); ?> </ Span>

<? php endif; ?>

<? php the_title (sprintf ('<h2 class = "entry-title"> <a href="%s »rel="bookmark">' esc_url (get_permalink ())), '</a> </ h2 > '); ?>

</ header> <! - .entry-header ->

<? php twentysixteen_excerpt (); ?>

<? php twentysixteen_post_thumbnail (); ?>

<div class = "entry-content">

<? Php

/ * traduttori:% s: nome del post corrente * /

the_content (sprintf (

__ ('Continua a leggere <span class =' ​​screen-reader-text '>'% s '</ span>', 'twentysixteen'),

get_the_title ()

));

wp_link_pages (array (

'before' => '<div class = "page-links"> <span class = "page-links-title">'. __ ('Pages:', 'twentysixteen'). </ Span>',

'after' => '</ div>',

'link_before' => '<span>',

'link_after' => '</ span>',

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

'pagelink' => '<span class = "screen-reader-text">'. __ ('Pagina', 'ventisei'). '</ span>%',

'separator' => '<span class = "screen-reader-text">, </ span>',

));

?>

</ div> <! - .entry-content ->

<footer class = "entry-footer">

<? php twentysixteen_entry_meta (); ?>

<? Php

edit_post_link (

sprintf (

/ * traduttori:% s: nome del post corrente * /

__ ('Modifica <span class = "screen-reader-text"> "% s" </ span>', 'twentysixteen'),

get_the_title ()

),

'<span class = "edit-link">',

</ Span> '

);

?>

</ footer> <! - .entry-footer ->

</ article> <! - #post - ## ->

Copia questo codice nel nuovo file "loop-category.php" del tema figlio.

Modifica del file di parti del modello

Il ciclo "ventisei" mostra più del necessario, quindi ho intenzione di modificare questo codice. Voglio solo mostrare lo snippet e non il contenuto, quindi elimineremo il contenuto.

Qual è la differenza tra H1 e il titolo SEO di un articolo WordPress? Scoprilo consultando questo articolo.

Nel tuo nuovo file loop-category.php, trova questo codice ed eliminalo:

<div class = "entry-content">

<? Php

/ * traduttori:% s: nome del post corrente * /

the_content (sprintf (

__ ('Continua a leggere <span class =' ​​screen-reader-text '>'% s '</ span>', 'twentysixteen'),

get_the_title ()

));

wp_link_pages (array (

'before' => '<div class = "page-links"> <span class = "page-links-title">'. __ ('Pages:', 'twentysixteen'). </ Span>',

'after' => '</ div>',

'link_before' => '<span>',

'link_after' => '</ span>',

'pagelink' => '<span class = "screen-reader-text">'. __ ('Pagina', 'ventisei'). '</ span>%',

'separator' => '<span class = "screen-reader-text">, </ span>',

));

?>

</ div> <! - .entry-content ->

L'altro passaggio consiste nel sostituire la funzione "twenty_sixteen_excerpt ()" con la funzione "the_excerpt ()", poiché la versione ventisei sedici non fornisce un collegamento all'articolo completo.

Vedi anche Come visualizzare recenti articoli in una categoria specifica

Trova questa linea:

<? Php twenty_sixteen_excerpt (); ?>

Sostituiscilo con questo:

<? Php the_excerpt (); ?>

Dobbiamo anche apportare alcune modifiche ai tag del titolo.

Nella parte del modello, cambia la linea:

<? php the_title (sprintf ('<h2 class = "entry-title"> <a href="%s »rel="bookmark">' esc_url (get_permalink ())), '</a> </ h2 > '); ?>

Modifica i tag H2 per H3:

<? php the_title (sprintf ('<h3 class = "entry-title"> <a href="%s »rel="bookmark">' esc_url (get_permalink ())), '</a> </ h3 > '); ?>

Registra il tuo modello. Quindi torna al tuo file di categoria.php continueremo con esso.

Creazione di loop

Per prima cosa rimuoveremo l'inclusione del codice "ventisei" dal nostro file "categoria.php" perché dovremo usare il nuovo file.

Nel tuo file category.php trova questo codice:

get_template_part ('template-parts / content', get_post_format ());

Ed elimina il.

Quindi creeremo i loop.

In questo esempio, visualizzerò tutti gli articoli con il tag "content", usando il tag condizionale "has_tag ()". Ciò significa che dovrò passare attraverso tre anelli:

  • Il primo controlla se la query ha pubblicato elementi con questo tag.
  • In tal caso, il secondo visualizza gli articoli con questa etichetta.
  • Un terzo visualizza articoli senza questo tag.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Tra ogni ciclo, userò rewind_posts () per riavvolgere i messaggi senza reimpostare la query: lavoriamo sempre con la query principale ogni volta.

Il primo ciclo: verifica degli articoli

Nel tuo file "category.php", trova l'inizio del ciclo:

while (have_posts ()): the_post ();

Sopra questa linea, definisci una nuova variabile chiamata $ count:

$ Count = 0;

Quindi, all'interno di questo ciclo, aggiungi questo codice:

// controlla se ci sono post con il tag »

$ tag = 'content';

if (has_tag ($ tag)) {

$ count + = 1;

}

Questo codice controlla se i messaggi hanno l'etichetta "contenuto" e quindi aggiunge 1 al contatore se sì.

L'interno del loop sarà simile a questo:

// Controlla i post nel primo ciclo.

$ Count = 0;

while (have_posts ()): the_post ();

// controlla se ci sono post con il tag »

$ tag = 'content';

if (has_tag ($ tag)) {

$ count + = 1;

}

ENDWHILE;

Il secondo ciclo: ripristina gli articoli con il tag

Il prossimo passo è fare un ciclo per visualizzare gli oggetti con questo tag, solo se ce ne sono.

Ad esempio, se il valore di $ count è maggiore di 0.

Scopri anche Come personalizzare la dashboard di WordPress per un cliente

Aggiungi questa condizione al loop:

if ($ count> 0) {

rewind_posts ();

echo '<h2> Articoli taggati con'. $ tag. </ H2> ';

while (have_posts ()): the_post ();

if (has_tag ($ tag)) {

get_template_part ('Includes / loop', 'categoria');

}

// Termina il ciclo.

ENDWHILE;

}

Questo codice verifica che $ count sia maggiore di zero e, in tal caso, riavvolge gli elementi ed esegue nuovamente il ciclo. Per ogni articolo controlla se possiede la nostra etichetta e, in tal caso, chiama la parte del modello che abbiamo appena creato.

Il terzo ciclo: visualizza il resto degli articoli

L'uscita sarà un ciclo finale sugli elementi rimanenti. Se questa categoria non ha un articolo con il tag "contenuto", mostrerà tutti gli elementi nella categoria.

Impara pure Come creare un blog multi-autore e consentire ai lettori di pubblicare articoli sul tuo blog

Nel tuo secondo ciclo, aggiungi questo:

rewind_posts ();

// Secondo ciclo: post non con il tag "content"

while (have_posts ()): the_post ();

if (! has_tag ($ tag)) {

get_template_part ('Includes / loop', 'categoria');

}

// Termina il ciclo.

ENDWHILE; ?>

Quest'ultimo codice riavvolge gli elementi e quindi esegue nuovamente il ciclo. Questa volta, controlla se un articolo non ha l'etichetta "contenuto", quindi visualizza il contenuto nella "parte modello".

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [FREE]

Ti consigliamo anche di scoprire Come aggiungere un'opzione di stampa articoli su WordPress

Ora puoi testare la pagina degli articoli del tuo blog. Ricorda che puoi cambiare i filtri. In questo tutorial abbiamo usato il "contenuto" come filtro etichetta, ma puoi usare quello che preferisci.

Scopri anche alcuni plugin WordPress premium

Puoi utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la presa del tuo blog o sito Web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. Addon Social Wall per UserPro

UserPro può essere molto più divertente con un social wall. Questo è ciò che porta l'estensione Social Wall. Con l'estensione Social Wall, puoi creare un wall sul tuo sito Web e offrire ai tuoi membri un modo rinfrescante per interagire con la community.

Il plug-in Social Wall di WordPress consente ai tuoi utenti di: condividere messaggi tra loro, condividere immagini, commentare i post di altre persone, agli utenti potrebbe piacere o non piacere un messaggio, possono scegliere di visualizzare il wall solo per gli utenti gli utenti hanno effettuato l'accesso o per tutti gli utenti, gli amministratori possono eliminare post o commenti dagli utenti, ecc.

Download | Demo | Web hosting

2. Flipkart Affiliate Plus

Flipkart Affiliate Plus è un plug-in WordPress modulare che collega il tuo sito Web WordPress all'API di affiliazione Flipkart.

Questo plugin per WordPress semplifica l'importazione dei dati di prodotto da Flipkart e li aggiorna direttamente sul tuo sito web. Flipkart Affiliate Plus è il primo plug-in WordPress per l'API ufficiale di Flipkart. Usandolo, non sarà necessario utilizzare un'API di terze parti. Beneficiate pienamente del vostro lavoro.

Download | Demo | Web hosting

3. Google Analytics utilizzabile per WooCommerce

Google Analytics utilizzabile è un plug-in di WordPress che ti consente di utilizzare alcune delle migliori funzionalità di Universal Analytics, tra cui: e-commerce avanzato e monitoraggio dell'ID utente. Inoltre, questo plugin supporta l'anonimizzazione degli indirizzi IP, il rimborso dei prodotti, il raggruppamento dei contenuti, il monitoraggio dei moduli, ecc ...

Utilizzando questo plug-in WordPress, risparmierai tempo nell'integrazione del codice di Google Analytics complesso, così potrai concentrarti sulla gestione dei tuoi dati.

Le sue caratteristiche principali sono: installazione rapida e semplice, accesso ai rapporti e-commerce migliorati di 9, possibilità di studiare come dispositivi diversi vengono utilizzati dallo stesso utente e come vengono effettuati gli acquisti, la capacità di analizzare i prodotti che vengono rimborsati più spesso, infine di intraprendere azioni correttive e altro ancora.

Download | Demo | Web hosting

Altre risorse consigliate

Ti invitiamo inoltre a consultare le risorse seguenti per approfondire la presa e il controllo del tuo sito Web e blog.

Conclusione

Ecco ! Questo è tutto per questo tutorial abbastanza tecnico. Spero che siamo stati espliciti su come utilizzare correttamente WP_Query su WordPress. Non esitate a condividi il consiglio con i tuoi amici sui tuoi social network.

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.

Ma intanto parlaci del tuo commentaires e suggerimenti nella sezione dedicata.

...

Questo articolo contiene i commenti 7
  1. ___________ ________ _____ ____________
    | Articolo 1 | | arti 2 | | _A3_ | | |
    | __________ | | _______ | _____ | Articolo 6 |
    ______________________ | 5 | | |
    | _________ 4 _________ | | ____ | | ___________ |

  2. Ciao Blair
    grazie per queste esercitazioni parfais,
    Vorrei chiedere un piccolo aiuto per favore.
    Creo il mio tema wordpres (html / css) e ho un problema che cercherò di sviluppare: ho intenzione di creare un sito simile a msn.com il mio sito sarà diviso in diverse divisioni (sezioni ) che sono: notizie, intrattenimento, salute, stile di vita ... ecc. vale a dire che desidero realizzare un primo gruppo di articoli e un secondo gruppo, un terzo ... ecc. ma mostra tutti i gruppi sulla stessa pagina e ogni gruppo appartiene a una categoria (nicchia). Mi chiedo se questo back office wordpress può gestire il contenuto di ogni argomento separatamente? con il ciclo di wordpress // Pubblica contenuto scusa, nessun post trovato! Ottengo un mix di elementi:
    questo vuol dire che il mio ultimo articolo scritto viene inserito direttamente nella prima sezione che è una notizia, mentre per esempio è un articolo che appartiene allo stile di vita.
    Mi sono imbattuto in questa pagina https://codex.wordpress.org/fr:La_Boucle Penso che la parte più cicli possono risolvere il mio problema!
    Spero che tu capisca cosa sto cercando di dire

    vi ringrazio in anticipo per la risposta,
    Cordiali saluti,

    1. Buongiorno,
      Penso che tu stia complicando il compito per niente. Già quello che ho capito è che vuoi organizzare i tuoi articoli in categorie (intestazione) e ogni argomento può appartenere a una nicchia, che può essere categorie padre. Sì, il ciclo può aiutarti a farlo, ed è impressionante nella sua semplicità.
      Coraggio!

      1. Bonjour.
        prima di tutto grazie per la tua rapida risposta. Penso che il tema che ho appena creato non sia più compatibile con wordpress ed è da qui che nasce il problema.
        infatti poiché i tuoi commenti non supportano l'immagine allegata che spiegherò disegnando:
        ecco un sito di categorie
        ___________ ________ _____ ____________
        | Articolo 1 | | arti 2 | | _A3_ | | | quindi immagina che ogni articolo lo sia
        | __________ | | _______ | _____ | Articolo 6 | rappresentato da una piastrella; quindi abbiamo 6
        ______________________ | 5 | | | articoli (ogni tessera contiene l'immagine
        | _________ 4 _________ | | ____ | | ___________ | e il titolo di un articolo particolare)

        Il mio vero problema, signor Blair, è che non riesco a completare i miei articoli in modo che possano passare dal riquadro 1 al riquadro 6, vale a dire che quando aggiungo un nuovo articolo e che Lo pubblico, voglio che quest'ultimo prenda il posto dell'articolo 1 come in tutti i temi esistenti.
        - Penso che sia irrealizzabile poiché ogni post (articolo) ha le sue proprietà come posizione, altezza, larghezza ... ecc., Cosa ne pensi allora?
        ovviamente l'idea è un po 'oscura con questo schema, altrimenti se non ti infastidisco e vorresti aiutarmi, hai la mia e-mail (devi solo inviare una e-mail contenente il tuo nome).

        Grazie ancora per i tuoi ripensa

        1. Buonasera, in questo caso particolare, dovrai saltare con le variabili di tipo "int", quindi, ogni volta che il loop loop, aumenti la variabile e in base al valore della variabile, puoi cambiare il visualizzazione dell'articolo. Ad esempio:

          if ($ i == 1) {
          // il tuo codice qui
          } Else if ($ i == 2) {
          // come
          }
          $ I ++;

          Purtroppo, non posso assistervi personalmente in questo momento.

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
20 azioni
quota18
Tweet2
Enregistrer