Come usare campi personalizzati in blog WordPress

Come usare campi personalizzati in blog WordPress

I campi personalizzati sono uno degli strumenti più potenti e utili che WordPress mette a disposizione agli smanettoni (come me). Servono per aggiungere ulteriori informazioni alla pagina o al post, come ad esempio assegnare all’articolo un’immagine da mostrare in homepage (funzione molto intelligente), oppure assegnare un video al post, utile per chi ha un blog di video e vuole mostrare tutti i video/post in homepage, e così via…

Belli vero? Ma passiamo alla parte più bella, la pratica! Ecco come utilizzare i campi personalizzati in WordPress.

Quando crei o modifichi un post (o pagina), sotto l’editor c’è il box “Campi personalizzati”, clicca su Aggiungere nuovo ed inserisci il Nome, ovvero la chiave da associare a questo tipo di campi personalizzati, ad esempio “immagine_homepage“. A destra, nel campo Valore, inserisci l’informazione che vuoi salvare ed associare a questo post, ad esempio l’URL dell’immagine da visualizzare in homepage per questo post, e poi premi il pulsante Aggiungi campo personalizzato. Ecco il risultato:

Ora WordPress ha creato un campo personalizzato con questa chiave, in futuro questa chiave comparirà direttamente nel menù a tendina dove c’è Seleziona (vedere la seconda immagine qui sopra)! Questo faciliterà molto il tuo lavoro ogni volta che vorrai associare un’immagine a nuovi e vecchi post, almeno non sbaglierai il nome della chiave!

Ora che hai creato la chiave (Nome) ed associato il Valore (nell’esempio è l’URL dell’immagine) al post, devi mostrarlo! Qui arriva la parte più “complicata” perchè devi modificare i file del tema di WP.

Ogni file del tema di WP mostra qualcosa, ad esempio le pagine, i post, l’homepage … quindi devi capire quale file devi modificare, ad esempio supponiamo di voler mostrare l’immagine associata al post in homepage, con il mio tema devo modificare il file index.php (ogni tema è diverso, alcuni avranno anche il file homepage.php, con altri bisogna modificare il file entry.php, devi fare delle prove).
Trovo il punto preciso in cui vengono mostrati i post, solitamente è dentro un loop, e qui incollo il codice per leggere l’URL dell’immagine e per mostrarla in home.

Il codice da utilizzare in generale per leggere il contenuto del campo personalizzato è:

<?php $variabile = get_post_meta($post->ID, 'Nome', true); ?>

Ricordati di sostituire “Nome” con la chiave che hai utilizzato, nell’esempio è “immagine_homepage“.
Il codice legge il campo personalizzato con la chiave “Nome” del post e lo salva nella variabile “variabile“. Ora puoi utilizzare il suo contenuto come si fa normalmente con una variabile php, ad esempio per mostrare l’immagine 100×100 devo scrivere:

<?php $variabile = get_post_meta($post->ID, 'immagine_homepage', true); ?>
<img src="<?php echo $variabile; ?>" width="100" height="100"
 title="<?php the_title(); ?>" alt="<?php the_title(); ?>" />

Questo era solo un esempio, io li ho utilizzati per altri mille scopi, come associare un video, una citazione, un messaggio di benvenuto diverso per categoria, una canzone, l’immagine di anteprima di un video (funzione molto interessante), un file per il download diretto dall’homepage …
Te per cosa li usi o li userai?

VUOI CREARE IL TUO SITO O BLOG WORDPRESS?

Scegli uno tra i migliori hosting per WordPress

HOSTING

Scegli uno tra i migliori hosting per WordPress

Hosting

Scegli uno tra i migliori temi WordPress professionali

GRAFICA

Scegli uno tra i migliori temi WordPress professionali

Grafica

Guide e risorse per gestire il sito WordPress a 360°

GESTIONE

Guide e risorse per gestire il sito WordPress a 360°

Gestione
  
con le dita sempre in costante, frenetico movimento sulla tastiera… vengo spesso trascinato e catturato “in rete” per colpa delle mille idee che mi girano per la testa (prima o poi troverò quella giusta)… dal futuro incerto (nonostante una laurea, e chi non lo è?..siamo in tanti!) .. credo fortemente nella condivisione della conoscenza!
50 Commenti
  • Ciao Roberto, ti ringrazio per la tua disponibilità e gli ottimi consigli.
    Grazie a te, sono riuscito a far visualizzare il link dell’immagine presente nel campo personalizzato di wordpress, quindi nei post ora l’immagine c’è, ora non riesco a farla visualizzare nell’elenco delle categorie, anzi nella parte dove ho inserito questo codice ID, ‘image’, true); ?>
    <img src="” width=”300″ height=”300″
    title=”” alt=”” /> mi visualizza l’immagine solo sul primo post, lasciando gli altri sotto privi d’immagine. Riesci ad aiutarmi?
    Ancora grazie, ciao.

    • Prego, 🙂
      per prima cosa devi trovare il file che genera la pagina delle categorie, poi trovi il loop che mostra i vari post, ed inserisci il codice lì dentro…

      • Ok, fatto e se a quel campo personalizzato che è un immagine, vorrei associare un link di collegamento ad una pagina? 🙂

        • Potresti creare un altro campo personalizzato inserendo il link, e poi quando vai a leggere il contenuto dei campi personalizzati nel codice che genera la pagina, inserisci il codice per creare il link e come URL gli passi il contenuto di questo nuovo campo personalizzato:

          _a_href = _” URL CAMPO PERSONALIZZATO ” _img_src = ” URL CAMPO PERSONALIZZATO IMMAGINE ” … _/ _a

          ps, ho inserito un po’ di spazi e underscore inutili nel codice qui sopra per non farmelo tagliare

          • Ok, grazie, gentilissimo 🙂

  • *volessi 🙂

  • Ciao Roberto ho seguito il tuo consiglio, riesco a visualizzare l’anteprima dell’immagine nell’articolo, solo che la inserisce in alto sopra l’articolo. Come faccio ad allinearla a sinistra? in quale parte di CSS devo agire?

    • Devi lavorare sui contenitori (i DIV), e utilizzare il float: left; oppure dare una posizione fissa (position: absolute)… prima però, studia bene come devi disporre i DIV…

  • Finalmente qualcuno che ha spiegato decentemente come usare i campi personalizzati, e che è riuscito a farmi CAPIRE come usarli in modo facile e pulito!

    Grazie.

  • Ciao.
    Ho installato nel mio sito il tema maimpok che fa uso di campi personalizzati per mostrare le immagini di anteprima dei blog. Però non appaiono. Sai indirizzarmi su come risolvere questo problema? Grazie 1000.

    • Controlla il sorgente della pagina in questione, quindi vedi se manca il codice che mostra la figura, oppure se semplicemente è sbagliato l’indirizzo dell’immagine.

  • Ciao Roberto, ma se invece di un’immagine voglio mettere un testo, ad esempio per richiamare la categoria del post, come faccio?

  • La stessa identica cosa, solo che ci scrivi il testo e non l’URL dell’immagine. Poi nel codice che inserirai in single.php o loop.php, devi “creare” il link, quindi al posto di dovrai inserire

    • Abbi pazienza ma non mi riesce… non sono un esperto, come dovrebbe essere il codice generato e dove metterlo se ad esempio ho un loop tipo questo:
      <?php
      if ( have_posts() ){
      while (have_posts()){
      the_post();

      echo '’;
      eccetera eccetera…

      Grazie

      • Inserisci il codice dopo o prima il the_post(); , che serve per mostrare il contenuto del post.
        Ciao

  • Ciao Roberto e grazie dei tuoi preziosi consigli

    Volevo chiederti una cosa.
    Io vorrei che i campi personalizzati, l utente lì trovasse già fatti…
    anche ogni volta che crea una nuova pagina.
    Parlo ovviamente la back office, in modo che per ogni nuova pagina
    avesse solo campi di testo da riempire…e non crearli manualmente.
    Per un utente non esperto puo’ essere una scocciatura e mi sembrerebbe una cosa
    professionale

    Cosa e come mi consigli di fare? Su quale file dovrei agire lato bo?

    Grazie mille

    • Cosa intendi per già fatti?

  • Ciao

    Mi spiego meglio

    Ogni volta che l utente crea la pagina,
    dovrebbe dal menu a tendina ricreare ogni volta la chiave ed il valore,
    per ogni voce…

    Io vorrei che si trovassero già pronte, agendo su codice…

    Poi, un’altra domanda scusa.
    Ho già messo i miei campi personalizzati su ogni pagina,
    agendo sul file loop… ma aimè il problema viene fuori
    quando la pagina ha bisogno di password…in pratica si vedono
    ” stampate ” sotto la richiesta di immettere la password…
    ancor prima che l utente abbia inviato la passoword

    Questo avviene perchè io stampo nel codice non nel content
    Ma non c’è altro modo che io conosca

    Non ne vengo fuori, come faresti te in questo caso?

    Grazie per la disponibilità

    • Per i custom field, prova a vedere il plugin Custom Field Template, promette bene!
      Comunque, una volta che registri tutti i custom fields che vuoi, poi i tuoi utenti li vedranno direttamente nel menù a tendina, poi dovranno solo compilare la parte del valore (questa non penso possa essere impostata di default).

      Per il secondo problema, mandami una mail con il codice, altrimenti non ci capisco niente …

      Ciao

  • Ciao Roberto

    Grazie per la info sul plugin, l0 controllero’ quanto prima.

    Per il secondo problema cerchero’ di mandarti una mail magari…

    Ciao

  • Ciao Roberto,

    Quoto Sylia in toto.
    Premetto che sono un niubbone sia in php che in wp, dal momento che ho iniziato da pochissimo tempo a frequentarli entrambi.
    Nonostante tutto non posso fare a meno di pensare che si potrebbe fare una funzione per discriminare quanti e quali campi personalizzati sono stati compilati e ritornare il codice html necessario per visualizzare i contenuti relativi.
    A questo punto si potrebbe richiamare la funzione nel punto (o nei punti) delle pagine in cui si vuol far comparire a video i contenuti di questi benedetti campi personalizzati.
    Ora… tra il dire …. e il fare …….. è tutta un’altra storia.

  • Ciao Roberto,
    volevo chiederti una cosa, quando postiamo il link di un sito WP su facebook, come possiamo decidere quale immagine miniatura fb pubblicherà? Per esempio sarebbe bello che fosse l’header o il logo del sito, invece sembra che peschi a caso tra le img contenute nel sito (senza considerare header peraltro)
    Hai un consiglio da dare?
    Grazie mille!
    Marco

  • Ciao roberto ti ringrazio per i tuoi utili consigli.
    Ho un problema sto usando advanced custom field e advanced post list
    riesco a farlo funzionare per quasi tutto quello che mi serve.
    ho aggiunto dei campi file ad una categoria di articoli per farmi restituire le url dei file stessi, ma quando uso lo shortcode [post_meta name=”custom_field_name”] invece di restituirmi la url mi restituisce la id. Forse sono troppo imbranato per capirlo ma non riesco a proprio a creare una funzione per sbrogliare questa questione? Puoi aiutarmi?

    • Roberto Iacono

      Mi hai mandato in confusione 🙂
      I post hanno un custom field con dentro l’URL?

      In ogni caso, da un id, puoi risalire all’URL tramite get_permalink( $id ).

      • Ma get_permalink funziona anche con i media della libreria (attachment)? O solo con le post/page?

        • Roberto Iacono

          Sì,
          get_permalink( $attachment )
          dove in $attachment c’è l’ID del permalink.

          • grazie

  • non avevo flaggoto in basso sorry

  • Ciao!!! Guida utilissima 🙂 ma se volessi usare un campo personalizzato in un post? ad esempio, ho un blog di ricette e vorrei creare in ogni post un’immagine con “ingredienti”, qual è il file da modificare? single.php? in ogni caso non riesco a trovare il punto preciso dove modificare/incollare il codice. Potresti aiutarmi? temo di fare pasticci.
    Un’altra domanda, una volta modificato il codice non ci sarà bisogno ad ogni nuovo articolo di fare modifiche varie?
    Grazie mille 🙂

    • Roberto Iacono

      Ciao Ivana,
      solitamente sì, devi modificare il file single.php.
      Devi scegliere dove mostrare il box ingredienti, solitamente all’inizio dell’articolo, così uscirà una cosa del tipo:

      titolo
      box ingradienti
      contenuto del post

      Quindi ti consiglio di mostrare il box ingredienti tra il titolo ed il contenuto del post (magari il box a sinistra contornato dal testo).
      In questo modo, tutti i post avranno la stessa struttura, e per ogni articolo, dovrai solamente compilare i campi personalizzati.

  • Niente da fare non ci riesco. ho creato il campo come hai detto, Forse sbaglio ad inserire la funzione nel single.php (è lì che voglio inserirlo). l’ho inserito qui così:

    ID, ‘link_forum’, true); ?>
    Pagine: ‘, ‘after’ => ‘‘, ‘next_or_number’ => ‘number’)); ?>
    dove link_forum è il campo sbaglio qualcosa? perchè non esce niente

    • aspetta non si vede il codice… comunque l’ho messo dopo the_content e prima di wp_link_pages

    • Roberto Iacono

      Prova inizialmente con un menù solo, poi se si vede, aggiungi anche l’altro.
      Ma sei sicuro che lo stai inserendo nel punto corretto? Prova a scrivere qualsiasi cosa e vedere se compare a video.

      • Scusa non ho capito niente….;) “Prova inizialmente con un menù solo” che significa? il codice l’ho messo dopo the_content e prima di wp_link_pages nel file single.php ma non esce niente eppure ho seguito i passaggi. Ho provato a copiare qui nel primo commento la parte del single.php dove l’ho inserito ( ripeto dopo the_content e prima di wp_link_pages), ma non viene visualizzato in codice

        • Roberto Iacono

          Hai letto Come e dove modificare WordPress?
          Basta aggiungere un qualsiasi testo per capire se il punto è corretto, ad esempio scrivi TEST e vai a vedere se si visualizza nel sito nel punto desiderato.

  • Ciao Roberto, grazie per la preziosa informazione. Ma ho un problema: nei post dove ho inserito nel campo personalizzato i dati per un’immagine va tutto bene, ma dove non è prevista un’immagine viene fuori il quadrato di “immagine mancante”… come si può ovviare al problema? Ovvero, come posso fare uno script che dica: “se il campo è pieno l’immagine c’è, prelevala e mostrala… ma se il campo è vuoto ignora tutta l’istruzione.” – Grazie. Fra

    • Roberto Iacono

      Ciao Francesco,
      prova con:

      <?php if($variabile != ” ) : ?>
      codice
      <?php endif; ?>

  • Grazie ma… non va. E non è detto che l’abbia scritta giusta:

    ID, ‘immagine’, true); ?>
    <img class="colorbox-4035"; style="border-image: initial; border-width: 3px; border-color: grey; margin: 15px 16px; border-style: solid;" src=http://www.francescocataldo.it/dbimages/ align=”left” >

    ?

  • Riprovo così

    ?php if($variabile != ” ) : ?
    ?php $variabile = get_post_meta($post->ID, ‘immagine’, true); ?
    img class=”colorbox-4035″; style=”border-image: initial; border-width: 3px; border-color: grey; margin: 15px 16px; border-style: solid;” src=http://www.francescocataldo.it/dbimages/ align=”left”
    ?php endif; ?

    • Roberto Iacono

      Scusa Francesco,
      la variabile la devi leggere prima del controllo, altrimenti sarà sempre vuota.

      quindi:

      $variabile = get_post_meta($post->ID, ‘immagine’, true);

      if($variabile != ” ) :

      img bla bla bla

      endif;

      Il tutto con le relative parentesi.

      • Grazie ancora! Domani ci provo e ti informo! 🙂

  • Ciao scusami ma è possibile che io non ho la voce “Campi personalizzati” ?
    Forse il tema non va bene per questo tipo di opzione?
    Grazie mille per l’aiuto

    • Roberto Iacono

      Ciao Francesca,
      clicca in alto a destra su Impostazioni Schermo e seleziona la relativa casella 🙂

  • Ciao Roberto, ti disturbo sempre! vorrei inserire dei campi personalizzati nel single… li ho messi e riesco a farli apparire, volevo però chiederti, come posso gestirli in modo che quando questi campi sono vuoti non viene visualizzata la riga! Tipo io ho impostato questo Dimensione: che mi fa apparire la dimensione di un file, come faccio a non far apparire tutta la riga quando non metto il valore nel campo del post?

    Ti ringrazio anticipatamente 🙂

    • Roberto Iacono

      Ciao Salvatore,
      devi fare un controlla IF. In poche parole dici:

      $variabile = leggi il contenuto del campo personalizzato
      if ( $variabile != “”){
      mostra la dimensione
      }

      Se il contenuto è vuoto, non viene mostrato niente.

  • Ciao Roberto grazie per la risposta, nel frattempo ho provato a unire 2 cose e sembra che funzionino, dimmi se si possono ottimizzare
    io ho inserito questo nel single:
    ID, $key, TRUE);
    if($themeta != ”) {
    echo ‘Dimensione:’;
    }
    ?>
    ID, ‘dimensione’, true); ?>

    • Roberto Iacono

      Nei commenti viene mangiato un po’ il codice, ma se lo hai provato e funziona, mi fido di te 😉

  • ti avevo scritto sulla mail, se riesci controllalo e caricalo nei commenti o alla fine del post! magari può tornare utile a qualcuno, che ha bisogno di utilizzare i campi personalizzati nei post e vuole farli apparire solo se riempiti! per creare i campi personalizzati ho usato Advanced Custom Fields 4.1.6