Share
L'anno scorso ho fatto un piccolo (e sicuramente molto poco scientifico) sondaggio tra gli altri sviluppatori di WordPress.
Quello che volevo sapere era questo: quando hanno creato il loro primo tema WordPress, come hanno fatto? Hanno hackerato un tema esistente o hanno iniziato con il loro HTML statico e lo hanno trasformato in un tema?
La maggior parte delle persone con cui ho parlato utilizzava il secondo approccio: tutti erano esperti di frontend che avevano costruito siti usando HTML e CSS e trovavano più semplice prendere i loro file HTML esistenti e convertirli in un tema. Due delle persone con cui ho parlato erano docenti o insegnanti e mi hanno detto che questo è l'approccio che usano con gli studenti.
Quindi in questa serie ti mostrerò come fare proprio questo.
Inizierai con un singolo file HTML (con un foglio di stile separato) e trasformalo in un tema WordPress con più file modello e con una varietà di ganci, funzioni e tag modello inclusi per utilizzare loop, menu, widget e altro.
In questo primo tutorial, ti mostrerò come preparare il tuo HTML prima di convertirlo in PHP per creare un tema, che è quello che tratteremo più avanti nella serie.
Per questo tutorial, tutto ciò di cui hai bisogno sono gli strumenti di base per la modifica di HTML:
In teoria, puoi prendere qualsiasi codice HTML valido, aggiungere i tag modello corretti e un ciclo e trasformarlo in un tema, ma ti consigliamo di essere un po 'più completo di quello.
La ragione di questo è che WordPress aggiungerà elementi e classi HTML quando inizi ad aggiungere funzionalità come menu e widget, quindi è logico lavorare con quegli elementi e le classi in primo luogo. Ho delineato le classi e gli ID che WordPress genera in un precedente tutorial, quindi potresti voler familiarizzare con quelli prima di continuare.
Un altro motivo è garantire che il markup sia conforme agli standard e scritto in HTML5. Se stai convertendo un vecchio sito statico in WordPress, potresti lavorare con un vecchio codice che è in una versione precedente di HTML e che, francamente, ha bisogno di un po 'di riordino.
Non posso dirti come dovresti riordinare il tuo markup ma posso darti consigli sull'uso di HTML5 con WordPress e strutturare il tuo documento.
Esistono numerosi elementi HTML5 come e che hanno luoghi ovvi in cui dovrebbero andare in un tema WordPress - ne ho parlato in modo esplicito, ma il modo di pensare su come ognuno di questi dovrebbe essere usato è in costante sviluppo, quindi usa il tuo giudizio.
Nel file HTML con cui sto lavorando per questo tutorial, tuttavia, la struttura è la seguente:
Come puoi vedere, utilizza un numero di elementi HTML5 e alcuni che precedono l'HTML5. Nella prossima parte di questo tutorial, ti mostrerò come suddividere questa struttura in file di modello, ma per ora basta tenere tutto in un unico file chiamato index.html.
Se il tuo markup non è già strutturato in modo simile e non è scritto in HTML5, prenditi del tempo per apportare le modifiche rilevanti. L'importante è avere le seguenti aree della pagina chiaramente definite:
Accentsconagua
. Qui sto deliberatamente usando un ID invece di una classe, in modo che io possa usare questa come un'ancora per gli screen reader per saltare il menu. - la barra laterale (se ne hai uno) - qui sto usando
- il piè di pagina - nel
. Ciò significa che posso applicare un colore di sfondo a tutta larghezza al footerelemento pur mantenendo il .fatfooter elemento centrato nella pagina.
3. Aggiunta di classi e ID generati da WordPress
Il prossimo passo è quello di lavorare attraverso il tuo markup e aggiungere alcune classi e ID che saranno emessi dal tuo tema finito.
Questo stage non influisce sul tuo tema finale, in quanto le classi e gli ID verranno aggiunti automaticamente tramite le funzioni PHP che verranno aggiunte in seguito. Tuttavia, se ora aggiungi le classi e gli ID corretti, li utilizzerai nel tuo foglio di stile e così il tuo stile continuerà a funzionare una volta convertito il tuo HTML in un tema WordPress.
Lavora attraverso ciascuna parte del markup in ordine.
L'intestazione
WordPress non aggiunge automaticamente classi e ID al nome e alla descrizione del sito, ma ha senso usare quelli che sono coerenti con la terminologia di WordPress. Il lato sinistro dell'intestazione contiene un div elemento con il nome del sito e la descrizione in esso come segue:
Edificio tematico WordPress
Creazione di un tema WordPress da html statico
Sul lato destro del mio disegno c'è uno spazio per l'indirizzo o il numero di telefono o forse una casella di ricerca. Puoi dare agli utenti del tuo tema completa flessibilità su ciò che viene mostrato impostandolo come un'area di widget. Ti mostrerò come creare aree widget più avanti nella serie, ma per ora basta aggiungere le classi rilevanti:
immagini
La cosa più importante da aggiungere ai tuoi contenuti sono le classi per le immagini. WordPress genera classi per immagini in base a come li aggiungi al Media Manager, quindi devi assicurarti che siano tutti inclusi nel tuo tema.
Nel markup della mia pagina dummy ci sono due immagini: una è grande e l'altra è media e fluttuante a destra.
Per il primo aggiungo:
E per il secondo, aggiungo:
Tieni presente che nel tema finale rimuovi il codice per queste immagini poiché verranno automaticamente aggiunte da WordPress, ma aiuta a includerle in modo da poter impostare correttamente lo stile.
Dopo aver aggiunto le classi al tuo markup, devi assicurarti di aver seguito le classi di immagini nel tuo foglio di stile, quindi aggiungi quanto segue:
/ * Immagini * / img larghezza massima: 100%; #content img margin: 0; altezza: auto; larghezza: auto; #content .alignleft, #content img.alignleft float: left; margine: 4px 4% 4px 0; #content .alignright, #content img.alignright float: right; margine: 4px 0 4px 4%; #content .aligncenter, #content img.aligncenter clear: both; blocco di visualizzazione; margin-left: auto; margin-right: auto; #content img.alignleft, #content img.alignright, #content img.aligncenter margin-bottom: 12px;
Se guardi la mia pagina di esempio vedrai che la prima immagine è al 100% della larghezza del contenuto, e la seconda immagine è flottata a destra con i margini:
Barra laterale e piè di pagina
La barra laterale e il piè di pagina contengono anche le aree dei widget, quindi è necessario aggiungere le classi pertinenti al markup e allo stile utilizzando quelli del foglio di stile.
Il markup della barra laterale è il seguente:
Il markup per il footer contiene quattro aree widget, ognuna delle quali può contenere più di un widget. Come puoi vedere qui sotto, aggiungo una classe a ciascuno che dice al browser qual è, quindi posso scegliere come target ciascuno di essi per lo styling in un secondo momento.
Sommario
Il tuo file HTML è ora pronto e pronto per essere convertito in un set di file di temi. Nel prossimo tutorial ti mostrerò come dividerlo e aggiungere alcuni PHP di base.
risorse
- Lavorare con Classi e ID generati da WordPress (tutorial)
- Sviluppo di temi (dal codice WordPress)
- WordPress e HTML5: come si integrano (dal mio blog)
- Specifiche HTML5 (dal W3C)
- Sviluppo di temi WordPress Guida per principianti di Tessa Blakeley Silver e Rachel McCollin (sì, io!)
