Come utilizzare i campi personalizzati in WordPress

Come utilizzare i campi personalizzati in WordPress


Mentre stavi scrivendo il tuo articolo precedente, potresti aver fatto scorrere l’area Campi personalizzati nell’editor dei post.

Questa semplice ma potente funzionalità di WordPress potrebbe passare inosservata ai principianti, ma in realtà è una funzione che può senza dubbio trasformare il tuo sito web semplice e chiaro in un portale dinamico che attirerà nuovi visitatori.

Lascia che ti mostriamo di più sui campi personalizzati e su come usarli sul tuo sito:

  • Cosa sono i campi personalizzati e come funzionano
  • Come elencare i post con un campo personalizzato specifico
  • Mostra barra laterale utilizzando i campi personalizzati
  • Cambia intestazione, piè di pagina o barra laterale per singoli post con campi personalizzati
  • Implementa più facilmente i campi personalizzati avanzati con il codice tema ACF
  • Mostra il tuo umore o una canzone con campi personalizzati

Cosa sono i campi personalizzati e come funzionano

Cosa sono esattamente i campi personalizzati? Questi piccoli campi consentono a qualsiasi utente di inserire informazioni aggiuntive sul post. Questo è noto come metadati, ovvero “dati sui dati” e consente di allegare ulteriori informazioni ai tuoi post. I valori che puoi inserire nei campi personalizzati possono variare da qualcosa di semplice come l’aggiunta di un testo o un numero al tuo post, l’aggiunta di immagini, la modifica degli stili nel campo o effettivamente qualsiasi cosa ti passi per la testa.

Campi personalizzati

Forse tutto sarà più chiaro con un esempio.

Immagina di gestire un sito Web dedicato ai videogiochi. Scrivi notizie e pubblica trailer, gioca con l’hardware di gioco in modo da poterne parlare e ovviamente scrivi recensioni dopo l’arrivo di nuovi giochi. Dopo aver scritto una recensione e inserito screenshot e video di gameplay nell’articolo, probabilmente vorrai visualizzare informazioni importanti sul gioco.

Invece di nascondere le informazioni più importanti su un gioco nel lungo testo, potresti voler visualizzare il punteggio di un gioco, i nomi degli sviluppatori e dei publisher che si collegano al loro sito Web, alla data di rilascio, ecc. Sì, i campi personalizzati sono qualcosa che può aiutarti a fare il Magia.

Se lasci che i tuoi autori inseriscano tali informazioni in un campo personalizzato, puoi facilmente estrarre le informazioni e visualizzarle in aggiunta alla recensione. Hai visto caselle informative sui siti di recensioni. In tal caso, tutte le recensioni possono avere un modello standardizzato, che può migliorare l’esperienza dell’utente, sia sul lato anteriore che sul retro.

Seguendo l’esempio del sito Web di gioco, potresti avere diversi campi personalizzati che i tuoi autori possono inserire e che mostri ai tuoi lettori:

Informazioni su Call of Duty

Queste sono le informazioni che i tuoi autori inseriranno nei campi personalizzati e puoi visualizzarle in un post. Ma come?

Visualizza tutti i campi personalizzati:

Se hai un solo campo o vuoi mostrare tutti i tuoi campi nello stesso punto, puoi agganciare i tuoi metadati contemporaneamente con una semplice funzione:

  1. Apri single.php
  2. Trova la funzione_content () e incolla questo codice prima o dopo (a seconda di dove vuoi visualizzare i campi personalizzati):
  3. Salvare le modifiche

Visualizza campo personalizzato specifico:

Questo è tutto. Quella semplice funzione ora rimarrà agganciata e mostrerà tutti i campi personalizzati da un post. Ma cosa se vuoi mostrare campi diversi in una posizione diversa o se vuoi mostrare solo una chiave specifica? Quindi utilizzerai un approccio leggermente diverso e definirai la chiave che verrà visualizzata:

  1. Apri il file single.php
  2. Trova il contenuto e c / p quanto segue:
ID, 'chiave', vero); ?>
  1. Sostituisci “chiave” con l’effettivo campo personalizzato che stai utilizzando in un post. Ad esempio: “Editore”
  2. Salvare le modifiche

Questa funzione controllerà tutti i post nel loop e cercherà un campo personalizzato chiamato “Publisher”. Se la chiave è stata trovata, verrà visualizzato il suo valore. Puoi personalizzare ulteriormente il modo in cui viene visualizzato un campo personalizzato aggiungendo una classe ad esso e modellare la classe con CSS oppure puoi inserire direttamente HTML nel valore del campo.

Campi personalizzati condizionali:

Se lo desideri, puoi utilizzare i campi personalizzati come condizionale. Lascia l’esempio e diciamo che ci sono volte in cui non sarai in grado di conoscere una data di uscita per il gioco di cui stai scrivendo. Invece di digitare un campo personalizzato, puoi automatizzare il processo e dire a WordPress di scrivere “TBA” (da annunciare) nel campo Data di rilascio se non ci sono dati aggiunti dall’utente:

ID, "Data di rilascio", vero);
if ($ release_date) {
?>


Essere annunciato.

OK, lo avvolgiamo da qui. Questo è il modo più semplice di usare campi personalizzati. Ma ora che hai trattato le basi, puoi effettivamente fare praticamente qualsiasi cosa con loro. Ad esempio, puoi mostrare il tuo umore o una canzone che stai ascoltando. In alternativa, puoi mostrare un elenco di post che contengono chiave e / o valore specifici. Il cielo è il limite.

Come elencare i post con un campo personalizzato specifico

I campi personalizzati sono un ottimo modo per estendere la funzionalità dei tuoi post. Invece di consentire agli utenti di gestire il codice, puoi consentire loro di immettere un valore in un campo personalizzato e fare qualcosa con tali informazioni: ci sono infinite possibilità.

A volte, quando si utilizzano già campi personalizzati specifici, potrebbe essere necessario elencare i post con tali campi.

Ad esempio, se stai scrivendo recensioni di giochi e hai già diversi campi personalizzati in cui visualizzi editore, genere, punteggio, ecc. In una casella di informazioni separata nella tua recensione, potresti voler visualizzare solo i giochi di quel determinato editore, giochi del genere FPS o solo quelle recensioni con un punteggio di 10.

Questo tipo di informazioni potrebbe essere davvero interessante per il tuo visitatore. Puoi consentire loro di sfogliare le recensioni dei tuoi giochi in molti più dettagli o consentire loro di vedere i primi 10 giochi classificati sul tuo sito. Anche se non vuoi pubblicare un nuovo elenco, questo metodo può aiutarti con il data mining – invece di creare un articolo da esso, puoi elencare tutti i post con determinate proprietà solo a scopo di ricerca.

A nostro avviso, il modo migliore per elencare i messaggi ordinati per un campo personalizzato è di creando un nuovo modello di pagina e mostrando un elenco su una nuova pagina. Questo metodo ti consente di organizzare le tue pagine e di utilizzare facilmente una nuova pagina per visualizzare ciò di cui hai bisogno. Nelle righe seguenti, stiamo per mostrarti come trovare tutti i post con uno specifico campo personalizzato e / o il suo valore e mostrarlo in una nuova pagina.

1. Crea un modello personalizzato:

Restiamo con l’esempio della recensione del gioco in cui vogliamo visualizzare tutti i giochi di Bethesda Softworks (qualcuno ha detto Fallout?). Per cominciare, dovrai creare e preparare un modello personalizzato:

  1. Crea un modello di pagina personalizzato e chiamalo bethesda-games.php
  2. Copia e incolla il seguente codice nel file:
  3. 
    
    
    
     'editore',
    'meta_value' => 'Bethesda'
    ));
    
    if (have_posts ()) while (have_posts ()): the_post ();
    eco '';
    il titolo();
    eco '';
    endwhile;
    
    wp_reset_query (); ?>
    
    
    
    
  4. Salvare le modifiche

Il codice è pronto per scorrere tutti i campi personalizzati e trovare solo le chiavi “Publisher” con il valore di “Bethesda”. Puoi cambiare la chiave e il valore in qualsiasi cosa tu voglia. Se desideri visualizzare tutti i post con il campo personalizzato “Publisher” contenente qualsiasi valore, rimuovi semplicemente la riga “meta_value”.

Non dimenticare di cambiare il titolo del modello in qualcosa che riconoscerai in seguito.

2. Aggiungi la pagina:

Ora il tuo modello è pronto in modo da poter continuare a creare l’elenco:

  1. Navigare verso Pagine-> Aggiungi nuovo
  2. Aggiungi un titolo
  3. Sul lato destro, trova “Attributi di pagina”
  4. Seleziona il tuo modello dall’elenco a discesa “Modello”
  5. Pubblica la pagina

Questo è tutto! Ora se apri la tua nuova pagina, puoi vedere l’elenco di tutti i tuoi post che contengono campi personalizzati con i valori che hai scelto.

Ora devi aggiungere del testo alla tua nuova pagina, dare uno stile all’elenco e trovare il modo migliore per mostrarlo ai tuoi visitatori. Speriamo che questo metodo ti aiuti a ordinare i tuoi post su un altro livello e che ti piacerà.

Mostra barra laterale utilizzando i campi personalizzati

Una barra laterale è stata introdotta in WordPress versione 2.2. Da allora, è diventato un modo popolare di mostrare contenuti extra e il più delle volte, i temi di WordPress ne avranno uno per impostazione predefinita in cui è possibile posizionare tutti i widget desiderati.

Anche se molto utile, non vuoi che la barra laterale sia presente ovunque. Di solito, queste barre sono mostrate ovunque tranne che nella home page. E non esiste tale opzione per attivare e disattivare facilmente la barra laterale.

Quindi, perché non farlo da soli. In questa parte dell’articolo, ti mostreremo come inserire la barra laterale in un campo personalizzato e chiamarla solo per i post che desideri.

1. Prepara il modello:

  1. Apri page.php o file single.php
  2. Trova il seguente codice:
  3. Sostituisci il codice con questo:
  4. ID, "sidebar", true);
    get_sidebar ($ barra laterale);
    ?>
    
  5. Salvare le modifiche
  6. Crea un modello personalizzato in cui si troverà la barra laterale
  7. Apri il file sidebar.php
  8. Copia tutto da sidebar.php e incollalo nel tuo file modello personalizzato
  9. Salvare le modifiche.

Ora devi aprire un post o una pagina in cui puoi trovare “campi personalizzati” sotto l’editor di testo / visivo. Per aggiungere una barra laterale a quel post / pagina, procedi come segue.

2. Utilizzo della barra laterale nei campi personalizzati:

  • Digita “sidebar” sotto il nome del tuo campo personalizzato
  • Digitare il nome del modello personalizzato come valore di campo
  • Questo è tutto. Se hai lasciato vuoti i tuoi campi personalizzati, il tuo post sarà senza barra laterale mentre nell’altro caso, la barra laterale dovrebbe caricarsi se hai fatto tutto correttamente.

    Cambia intestazione, piè di pagina o barra laterale per singoli post con campi personalizzati

    Di solito, un sito Web WordPress avrà solo un’intestazione, un piè di pagina e una barra laterale già definiti dal tema che si sta utilizzando. Ognuno ha le sue funzioni e il design memorizzati in file separati che vengono chiamati dal tema e quindi visualizzati sul sito dove necessario. Poiché ogni parte del tema è memorizzata in un file diverso, puoi facilmente modificarle senza preoccuparti di rovinare l’intero sito e puoi cambiare il modo in cui solo un’intestazione, un piè di pagina o una barra laterale si comportano sul tuo sito.

    Ma a volte, un elemento non sarà sufficiente e, ad esempio, vorrai cambiare l’intestazione. Se vuoi cambiarlo per l’intero sito, sei già pronto per andare: apri header.php e modificalo nel modo desiderato. E se volessi aggiungere un annuncio in un’intestazione solo per i tuoi singoli post? O forse modificare l’intestazione per un solo post nell’intera raccolta senza cambiare il resto?

    Ancora una volta, i campi personalizzati ti aiuteranno.

    1. Prepara il file:

    Prima di utilizzare un campo personalizzato per modificare intestazioni, piè di pagina o barre laterali, è necessario preparare un file. Supponiamo che tu voglia cambiare un’intestazione per uno o due post e che tu abbia creato un nuovo file chiamato header-header2.php dove hai cambiato il design o inserito un annuncio specifico nel post. Prima di continuare con la creazione di un campo personalizzato, assicurati che il file sia codificato correttamente e funzioni sul tuo sito. Una volta che il file è pronto e pronto, puoi procedere.

    Stai attento nominare il file – se stai provando a cambiare l’intestazione, il tuo nuovo file di intestazione dovrebbe apparire così: header-newname.php

    2. Sostituisci il codice:

    1. Apri il file single.php
    2. Cerca get_header (); parte del codice che di solito si trova all’inizio della pagina single.php
    3. Sostituisci la funzione con la seguente:
    4. $ wp_query globale;
      $ postid = $ wp_query-> post-> ID;
      $ header = get_post_meta ($ postid, "header", true);
      if (! empty ($ header)) {
      get_header ($ intestazione);
      } altro {
      get_header ();
      }
      wp_reset_query ();
      
    5. Salvare le modifiche

    Con questo codice, hai detto a WordPress di verificare la presenza di un campo personalizzato di “intestazione” in ogni singolo post. Se viene trovato un campo personalizzato con quel nome, WordPress prenderà il suo valore e utilizzerà il nome file come intestazione solo per quel post.

    3. Modifica un’intestazione tramite campo personalizzato:

    Se hai caricato header-header2.php nel tuo tema, ora puoi chiamarlo in un campo personalizzato:

    1. Apri un post per il quale desideri modificare un’intestazione
    2. Scorri verso il basso e vai ai campi personalizzati
    3. Inserisci un nuovo campo e chiamalo “header”
    4. Digita “header2.php” nel valore del campo
    5. Aggiorna o pubblica il post

    Se non ci sono errori nel tuo header-header2.php file, la nuova intestazione dovrebbe apparire in cima al post per cui hai apportato la modifica. Tuttavia, tutti gli altri post caricheranno il tuo file di intestazione standard definito dal tema.

    Come avrai notato, ti viene richiesto di digitare il nome file del tuo nuovo file di intestazione solo dopo la parte “intestazione”. Per questo motivo, è importante nominare correttamente il nuovo file di intestazione e aggiungi la parte “intestazione” prima del nome effettivo che stai utilizzando nel campo personalizzato.

    Lo stesso vale per il file della barra laterale o del piè di pagina, ovviamente cambiando get_sidebar () e get_footer () parte del codice.

    Implementa più facilmente i campi personalizzati avanzati con il codice tema ACF

    I campi personalizzati sono la parte inevitabile praticamente di ogni tema WordPress. Questi campi consentono a tutti di includere informazioni aggiuntive sul post, ma sfortunatamente questa funzionalità WP standard è piuttosto grezza. I principianti hanno bisogno di un po ‘di tempo per abituarsi all’utilizzo di campi personalizzati e gli sviluppatori devono dedicare molto tempo extra quando si codifica intorno a loro.

    Questo è il motivo per cui Campi personalizzati avanzati Il plugin (ACF) è così popolare tra gli utenti di WordPress in tutto il mondo. Al momento questo plug-in gratuito conta oltre 1 milione di installazioni attive e non vediamo perché il numero inizierà a diminuire. ACF ti consente di creare campi personalizzati potenti, professionali e intuitivi tramite un editor visivo.

    Sebbene piuttosto popolare, ACF richiede ancora conoscenze di codifica e molto tempo se intendi implementare quei campi in un tema. Sì, creare un gruppo di campi è facile, ma visualizzare quei campi non è un gioco da ragazzi. Ed è qui che interviene il codice tema ACF per salvare gli sviluppatori.

    Codice tema ACF

    PREZZO: gratuito

    Codice tema ACF per WordPress

    Questo fantastico plugin è un prodotto di due sviluppatori che hanno deciso che è ora di smettere di perdere tempo a scrivere ripetutamente lo stesso codice più e più volte. Quando si sviluppa un tema o si modifica uno esistente, Advanced Custom Fields richiede a uno sviluppatore di implementare il codice giusto nel posto giusto all’interno di un tema. Poiché non esisteva un modo più semplice, uno sviluppatore doveva memorizzare lo snippet e tutte le funzionalità di un’API per svolgere il lavoro.

    Aaron Rutley, uno dei creatori, ha spiegato sul suo blog:

    “Quando si implementa un campo all’interno di un tema WordPress, è probabile che dimenticherò il nome del campo, era” profile_image “o” profile_photo “? Probabilmente dimenticherò anche come ho impostato quel campo per essere restituito, era ID, URL o array? Mi sono ritrovato a modificare costantemente il gruppo di campi per scoprirlo. “

    Ed è qui che il codice tema ACF può aiutare uno sviluppatore. Dopo aver installato questo plug-in gratuito che viene scaricato più di 4.000 volte, puoi risparmiare tempo quando gestisci il codice. Ogni volta che pubblichi, modifichi o aggiorni un gruppo di campi in Campi personalizzati avanzati, questo fantastico plug-in genererà automaticamente il codice necessario per implementare i campi in qualsiasi tema.

    Troverai questo codice reso in fondo alla pagina. Accanto a ogni frammento, troverai un’icona negli Appunti che ti consentirà di copiare facilmente il codice. Ora non devi memorizzare nulla e puoi rilassarti quando lavori con campi personalizzati.

    Sebbene il plug-in sia già un must per qualsiasi sviluppatore, Aaron afferma che stanno già pianificando di espandere il codice tema ACF:

    “In futuro prevediamo di aggiungere supporto per i campi di terze parti più popolari. Intendiamo inoltre offrire agli sviluppatori un maggiore controllo sul codice generato “.

    Mentre il plug-in è gratuito se associato alla versione gratuita di ACF, sarà necessario un Versione PRO se si utilizza una versione estesa di Advanced Custom Fields. ACF Theme Code Pro genera codice per tutti gli altri tipi di campo ACF Pro come il campo Clone, Galleria, Ripetitore e Contenuto flessibile.

    Mostra il tuo umore o una canzone con campi personalizzati

    Bloggare dovrebbe essere divertente. Anche se stai scrivendo articoli su argomenti seri, il tuo blog potrebbe ancora avere quella cosa o due che lo rende un po ‘più divertente per un lettore medio. Può essere qualsiasi cosa: una piccola nota dell’autore, un’immagine divertente o potresti aggiungere un umore in cui ti trovavi mentre stavi scrivendo l’articolo. Forse ti piacerebbe anche aggiungere il titolo di una canzone che stavi ascoltando.

    In questa parte, stiamo per mostrarti come implementare facilmente una funzione per visualizzare un mood / canzone nei tuoi post. Non dovrai installare alcun plug-in aggiuntivo e la funzione non occuperà molto del tuo spazio. È una semplice riga di testo che può essere aggiunta automaticamente all’inizio o alla fine del post.

    1. Aggiungiamo una “caratteristica dell’umore”:

    1. Apri il file single.php
    2. Copia e incolla il seguente codice nel punto in cui desideri mostrare il tuo umore:
    3. $ customField = get_post_custom_values ​​("mood");
      if (isset ($ customField [0])) {
      eco ""." Mood: ". $ CustomField [0]."";
      }
    4. Salvare le modifiche

    Umore di campi personalizzati

    Ora che hai preparato WordPress per i tuoi umori, sei pronto per mostrarli in qualsiasi post che desideri. Per impostazione predefinita, WordPress non mostrerà il tuo stato d’animo e non ci saranno stati d’animo predefiniti che verranno caricati fino a quando non deciderai di mostrarne uno. Se invece volessi aggiungere una canzone, cambia semplicemente lo “stato d’animo” in “canzone” sulla prima riga di codice e puoi anche cambiare il nome della classe sulla terza riga.

    2. Aggiungi il tuo umore / canzone a un post:

    Per inserire uno stato d’animo o una canzone, dovrai scriverla in un campo personalizzato:

    1. Apri un post per il quale vuoi scrivere uno stato d’animo
    2. Scorri verso il basso fino a visualizzare “Campi personalizzati”.
    3. Se non hai Campi personalizzati visualizzati sotto il contenuto del post, fai clic su “Opzioni schermo” nella parte superiore della schermata dell’editor e seleziona la casella di controllo accanto a “Campi personalizzati”.

    4. Scrivi “mood” nel campo del nome o “canzone” se hai deciso di seguirlo
    5. Scrivi tutto quello che vuoi nel campo “Valore” – questo sarà lo stato d’animo / la canzone visualizzata nel tuo post
    6. Fai clic sul pulsante “Aggiungi campo personalizzato”
    7. Pubblica il tuo post

    3. Stile:

    Come puoi già vedere da solo tre righe del codice, questa è la forma più semplice per aggiungere un nuovo campo personalizzato. Se vuoi modellare il tuo umore con alcuni CSS, puoi vedere che il codice ha già aggiunto la classe “my_mood” al tuo testo. Per modificare lo stile, procedi come segue:

    1. Apri il file style.css
    2. Copia e incolla il codice:
    3. .il mio umore {
      colore blu;
      }
    4. Aggiungi qualsiasi stile CSS che ti piace
    5. Salvare le modifiche.

    Spero che questo sia sufficiente per iniziare con la personalizzazione della “funzionalità mood / canzone” per il tuo blog e speriamo che il “blu” non sia un valore frequente con cui hai a che fare. Se non vuoi pubblicare il tuo umore, semplicemente non scrivere nulla nel campo personalizzato “umore”.

    Riassumendo

    Se qualcun altro ha creato un campo personalizzato per te (come uno sviluppatore di temi o plugin), usarlo per migliorare il tuo blog è abbastanza semplice. Ma speriamo che questo articolo ti abbia aiutato a personalizzare i campi da solo.

    Con semplici modifiche al codice che ti abbiamo mostrato, puoi creare e gestire i tuoi campi personalizzati che ti aiuteranno a generare un blog unico. Sarai in grado di estrarre le informazioni di cui hai bisogno e semplificherai il processo di scrittura e generazione di contenuti. Cosa ne pensi dei campi personalizzati in WordPress?

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map