Iniziare con temi per bambini di WordPress

Articolo scritto da:
  • WordPress
  • Aggiornato: Lug 27, 2013

Quindi, immagini che stai iniziando le tue modifiche nel mondo di WordPress e hai trovato molti temi fantastici. Troverai anche molti temi premium e la maggior parte di essi vale davvero il prezzo (alcuni libri per un aspetto e un codice professionali). E la maggior parte dei temi che trovi sono molto vicino, ma nessuno è esattamente quello che vuoi. Sarebbe bello poter spostare un po 'la barra dei menu, per sostituire il carattere, per aggiungere un nuovo blocco di testo.

Bene, se questo suona familiare, questa guida è per te. Qui ci immergeremo nel mondo dei temi per bambini, dove puoi fare praticamente tutto ciò che vuoi senza rompere il fantastico tema che hai acquistato o perdere gli aggiornamenti futuri perché tutto ciò che fai verrà annullato.

Modifica dell'aspetto senza modificare i file del tema

In breve, questo è il tema di Child: personalizzazione senza modificare i file originali. Un tema figlio avrà fondamentalmente le stesse funzionalità e aspetto del tema principale (genitore), a meno che tu non dica esplicitamente il contrario.

Conterrà almeno i file 2, il file style.css e il file functions.php, tutti gli altri file verranno acquisiti dal tema principale, quindi, a meno che non si crei un nuovo file nella directory dei temi figlio, verranno utilizzati i file principali.

Abbiamo molte possibilità qui, ma il vantaggio principale è che puoi tornare facilmente al tema originale, e quindi puoi anche aggiornare il tuo tema principale senza perdere alcuna modifica, dato che sono fatte in una cartella completamente diversa.

Mettiamo le mani sporche

Quindi, il primo passo è la creazione di una nuova directory di temi figlio sotto la cartella / wp-content / themes /. Chiamiamolo "Twenty-Child" e creiamo il nostro file styles.css di base:

/ * Nome del tema: URI di tema di venti bambini: http://www.webrevenue.co Descrizione: temi di apprendimento per bambini in questo momento Autore: Rochester Oliveira Autore URI: http://www.webrevenue.co/author/rochester/ Template: twentytwelve * / / * Chiamando il file CSS del tema principale * / @import ("../ twentytwelve / style.css"); / * Aggiungi tutto quello che vuoi sotto * /

I parametri sono (tra gli altri parametri omessi):

  • Nome del tema: il nome che vedrai nella schermata di selezione dei temi
  • URI del tema: il collegamento che verrà mostrato lì
  • Descrizione: una breve descrizione per ricordarti di cosa si tratta
  • Autore: chi ha creato il tema figlio
  • URI autore: se vuoi collegarti al sito dell'autore
  • Template: la cartella del tema principale (quindi se vuoi usare un tema diverso come main, basta sostituire questo parametro)

Una volta aggiunto questo codice, vedrai il tema figlio in WP admin> Aspetto> Temi. Puoi selezionarlo ora e tutte le modifiche fatte verranno visualizzate nel tuo sito.

Tema figlio modifica 101

Questo può essere inutile se non hai conoscenza CSS, giusto? Sbagliato! Il CSS è in realtà piuttosto semplice e puoi trovare molti frammenti per aiutarti. Ecco alcuni semplici suggerimenti per aiutarti nelle tue personalizzazioni.

#1 Installa Firebug

Un sacco di persone adorano Chrome e Safari (anche io!), Ma per me FireFox è molto meglio per lo sviluppo. Quindi, se vuoi usarlo, ti consiglio anche di installare firebug, che è uno strumento fantastico per capire tutti i selettori che sono attivi nell'elemento corrente.

Una volta installato, puoi premere F12 o fare clic con il tasto destro del mouse in qualche punto della pagina e selezionare "Ispeziona elemento". Vedrai una nuova finestra con la pagina corrente HTML e CSS (e molte altre schede che sono utili, forse possiamo parlarne in seguito).

Nella casella CSS vedrai dall'alto verso il basso tutte le regole CSS applicate all'elemento corrente e la regola più "specifica" nella parte superiore. È bello, ma vediamo cosa puoi fare con queste informazioni

#2 Considera la specificità CSS (o peso del selettore)

Ogni regola CSS ha il suo selettore, le proprietà e i valori. Ma quando il browser trova 2 o più regole che influenzeranno lo stesso elemento, deve scegliere quale di esse è più adatto. Di solito abbiamo questa "regola" per capire cosa verrà considerato:

  • ! una dichiarazione importante sovrascriverà qualsiasi altra cosa
  • I CSS incorporati sovrascriveranno tutto tranne che! regole importanti
  • ID (#header, #footer, # container ...) per i punti 100
  • Classi (.main, .nav, .box) che valgono punti 10
  • Tag (body, div, p, a) che valgono il punto 1
  • Selettore universale e pseudo classi (*,: hover,: after) vale 0 ma si applicano se c'è un "pareggio"

Ok, vediamo un esempio per capire meglio questo. Fai clic con il pulsante destro del mouse sull'intestazione del tuo sito utilizzando i venti e vedrai che il primo CSS che appare è questo:

.site-header {padding: 1.71429em 0; } articolo, a parte, dettagli, figcaption, figure, footer, header, hgroup, nav, section {display: block; }

Il primo selettore ha punti 10 (dato che si tratta di una classe), e il secondo ha un punto 1 ciascuno (poiché le virgole separano solo diversi selettori) ecco perché appare in alto. Se avevi qualcosa come #header div lì quel selettore sarebbe sicuramente il primo a comparire.

Perché questo è così importante?

Perché per modificare il tema principale senza modificare i suoi file CSS è necessario SEMPRE utilizzare regole che hanno più punti rispetto alle regole definite nel tema principale. E puoi essere intelligente su questo e usare un codice semplice. Ad esempio per sovrascrivere questa proprietà:

.site-header {padding: 1.71429em 0; }

Puoi aggiungerlo nel tuo CSS a tema figlio, ma non dovresti:

.site-header {padding 15px 0! importante; }

Perché questo è un codice errato, ed è molto più difficile sovrascriverlo se è necessario cambiarlo in una singola pagina, per esempio. Quindi potresti semplicemente usarlo:

body .site-header {padding: 15px 0; }

Questo selettore ha punti 11, che è maggiore rispetto all'10 originale e quindi questo codice verrà applicato.

#3 Fai buon uso delle funzioni

Il file child functions.php è l'unico file che verrà caricato IN AGGIUNTA al file originale. Questa è una soluzione intelligente fatta dal team di WP, in modo da poter mantenere le funzioni originali e aggiungere le proprie funzioni. Il problema è che le funzioni del tema figlio verranno caricate per prime e lo sviluppatore del tema DEVE fare qualcosa del genere per evitare conflitti quando si dichiarano le funzioni:

if (! function_exists ('top_menu')) {function top_menu () {// codice cool qui} add_action ('wp_head', 'top_menu'); }

Questo perché se si definisce una funzione nel file del tema figlio, è possibile sovrascrivere quella originale. Se lo sviluppatore del tema non lo fa in questo modo finirai con un brutto errore PHP (poiché la stessa funzione viene creata due volte).

#4 Scopri alcune proprietà CSS

Sapevi che puoi nascondere e aggiungere cose usando i CSS? Dovrai installare Firebug per trovare il selettore giusto, ma puoi nascondere un elemento aggiungendo questo codice:

body a {display: none}

Per aggiungere è più complicato, dal momento che è possibile aggiungere solo piccoli testi, se si desidera un testo "In vendita!" Dopo un prezzo, ad esempio è possibile utilizzare questo codice:

. prezzo del: after {color: red; contenuto: "In vendita!"; }

Cosa ne pensi?

Cosa ne pensi di questa guida? Prenderesti in considerazione l'utilizzo di temi figlio? Lo stai già usando? Fateci sapere utilizzando la sezione commenti qui sotto!

A proposito di Rochester Oliveira

Sono un web designer e imprenditore di Itajubá (MG), Brasile. Adoro scrivere argomenti oscuri e fare cose interessanti.

Collegare: