Come creare in WordPress un modello universale in poche mosse con i CUSTOM FIELDS senza ricorrere a PLUG-IN esterni

campi personalizzati

Che cosa sono i campi personalizzati? Quanti scrivendo un articolo sul vecchio editor si sono accorti che esiste una linguetta/TAB in alto a DX che recita IMPOSTAZIONI SCHERMATA? Se clicchiamo là sopra salta fuori anche un misterioso FLAG sui CAMPI PERSONALIZZATI! A questo punto fleggando come per magia sotto l’articolo, in fondo, comparirà la finestra di gestione dei campi personalizzati. Facciamo un AGGIUNGI, inseriamo il nome e confermiamo con il pulsante AGGIUNGI NUOVO CAMPO PERSONALIZZATO, nel nostro caso si vuole fare un BANNER a questa NEW AGENCY che sta crescendo che è FWD. Ok ma se vedo l’articolo adesso che vedo?

settare i campi personalizzati

Un bel nulla perché il campo personalizzato va inserito nella pagina e siccome siamo nell’ area blog e sappiamo che WP lavora in un certo modo per fare su e giù tra le linee di montaggio, a fianco delle catene a rulli scorrevoli, che approvvigionano le risorse per l’assemblaggio, la pagina responsabile dell’ AGGANCIO sarà la SINGLE.PHP; quindi rechiamoci da ASPETTO sull’ EDITOR del tema e andiamo a INSERIRE il punto preciso in cui desideriamo avere questo oggetto all’ interno di un articolo. Quale è la funzione che ufficializza così tutto il nostro lavoro?

<?php the_meta(); ?>
il primo custom field, ancora grezzo nella sostanza

A questo punto visualizziamo il sito e rendiamoci conto di cosa abbiamo fatto fino a questo momento. Prima lo abbiamo spostato sopra la sidebar di dx e non ci piaceva, poi lo abbiamo sistemato sotto i commenti così tanto per provare. Se andiamo a vedere ora il risultato dell’ articolo personalizzato ci accorgiamo che ora c’è acqua sotto i ponti e la domanda che sorge è:

ma adesso avendo modificato il template single.php valido per tutte le pagine sono andato a inserire questo campo in tutti i post?

Basta cliccare sugli altri post per accorgersi che di fatto questo problema non esiste, in quanto il campo personalizzato si chiama personalizzato proprio perchè inserisce il modello ma accetta le singoli personalizzazioni ovunque previa attivazione! Andiamo avanti. Ora vogliamo trasformare questo campo in un BOX che ospiterà una nostra pubblicità sottoforma di banner come fare?

A questo punto il gioco si fa divertente perchè posso anche usare le classi di bootstrap per avvolgere la funzione di richiamo dei miei campi personalizzati nel file single.php, magari inserendo uno sfondo verde Umbria:

<div class="bg-success">
<?php the_meta(); ?>
</div>
il nostro campo personalizzato inizia la sua evoluzione

bene allora aggiungiamo qualcosa al DIV , un padding e anche una classe da stilizzare (che ho chiamato customfwd) nel mio file di sovrascrittura style.css. I famosi P o M vanno da 1 a 5 e sono al contrario per dimensioni alle intestazioni HTML ossia il valore più basso 1 corrisponde con la dimensione minore e 5 dà la massima estensione, quindi la single.php diventa:

<div class="bg-success p-4 customfwd">
<?php the_meta(); ?>
</div>

e il CSS:

.customfwd {
width:90%;
margin:20px auto;
box-shadow: 8px 5px 50px rgba(0,0,240,0.5)
}
evoluzioni ulteriori del campo personalizzato

questo per quanto riguarda la personalizzazione generale valida per tutti i campi personalizzati. Tra l’altro ci sarebbero da stilizzare anche le classi interne di WP recuperabili dallo strumento ISPEZIONA messo a disposizione per gli sviluppatori dal BROWSER. Ma siamo sempre nel campo del GENERALE, ossia un modello VALIDO PER TUTTI. Ma ora potremmo inserire una immagine nello spazio creato , oppure stilizzare qualcosa altro dentro il campo dove abbiamo scritto il testo BannerFWD: “ottimo, hai creato il tuo primo spazio personalizzato” che ovviamente si può togliere, modellare a nostro gradimento giocando con le proprietà dei selettori.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Blog su WordPress.com.

Su ↑

%d blogger hanno fatto clic su Mi Piace per questo: