WordPress Tutorial: Sviluppare un tema WordPress da zero

Conosci HTML, CSS e JavaScript. Puoi creare bellissimi siti web. Forse avete sentito parlare di WordPress, ma non sono del tutto sicuro di come implementarlo, o perché potrebbe essere necessario. Forse un cliente ha chiesto WordPress, ma non sei veramente familiarità con esso. Forse hai lavorato con esso prima, ma non so come fare il proprio tema da zero. In ogni caso, questo articolo è per te.

Prerequisiti

Tutto ciò che serve per iniziare è un sito web. Qualsiasi sito web farà., Non è necessario conoscere alcun PHP, o avere alcuna esperienza precedente con WordPress. Il tuo sito web può essere personalizzato o costruito su Bootstrap/qualche altro framework.

È necessario sapere come impostare un ambiente server locale. Fortunatamente, se non si sa come, ho scritto una breve, articolo dolce su come ottenere istituito con uno. Ci vorranno solo pochi minuti, quindi vai avanti e fallo prima.,

Obiettivi

• Installa WordPress localmente
• Prendi un sito web HTML esistente e convertilo in un tema WordPress personalizzato

Parti

Ho fatto ulteriori tutorial da aggiungere a questo.

Cosa può fare WordPress per me?

WordPress è stato originariamente costruito come piattaforma di blogging, ma ora è quello che è noto come un sistema di gestione dei contenuti CMS.

Qualsiasi sito web a cui si intende effettuare aggiornamenti può beneficiare di un CMS. Se si tratta di un blog, si vuole essere in grado di aggiungere messaggi. Se si tratta di un sito web ristorante, si vuole essere in grado di aggiungere e aggiornare i menu., Se si tratta di un sito web aziendale, si vuole essere in grado di aggiornare i prezzi, pacchetti, e così via.

Se qualcuno ti sta pagando per fare un sito web, è perché non sanno come o non hanno il tempo di trattare con il codice. Deve essere il più semplice possibile per il cliente. WordPress può aiutare con tutto questo e altro ancora.

Per iniziare: Il design

Non posso sottolineare abbastanza quanto non importa ciò che usi per il tuo design – Bootstrap, Foundation, Skeleton, custom CSS. Il punto è che hai un sito web e ti piace come appare.,

Ho intenzione di prendere un modello di avviamento semplice esistente e convertirlo in WordPress per questo articolo. Ecco il modello di blog Bootstrap. Questo è uno dei temi predefiniti sul sito ufficiale di Bootstrap.L

Ho comodamente impostato un repository GitHub del codice che puoi estrarre in una directory locale e seguire insieme a me.

Non sai come usare Git / GitHub? Puoi rimediare leggendo il mio articolo Introduttivo con Git., Se vuoi solo iniziare senza avere a che fare con Git, crea una directory sul tuo computer con index.html e blog.css e si è pronti ad andare.

Installazione di WordPress

Ci sono un sacco di articoli là fuori su come installare WordPress. Fanno sembrare il processo lungo e spaventoso, e la prima volta che lo fai, può sicuramente essere un po ‘ confuso. Ecco la guida ufficiale per ottenere istituito.

Dato che stiamo usando un server locale e MAMP, so già che hai tutti i prerequisiti per l’installazione e FTP non è necessario.,

Crea un posto in cui WordPress possa vivere

Crea una directory vuota sul tuo computer da qualche parte e punta il tuo localhost o host virtuale su quella directory.

Scarica WordPress

Vai alla pagina di download di WordPress e scarica l’ultima versione di WordPress.

Decomprimere WordPress

Decomprimere WordPress e inserire il contenuto della cartella nella directory.

Crea un database

Aggiornamento 2017: Le ultime versioni di MAMP non vengono fornite con phpMyAdmin preinstallato., Anziché, si scarica SequelPro su un Mac, o SQLYog su Windows, entrambi i programmi gratuiti. Per accedere al database dopo il download, accedere all’host locahost (o 127.0.0.1), con nome utente root e password root. Il resto delle istruzioni sarà lo stesso.

Ora, se vai al tuo server locale nel browser, supponendo che i server siano attivi e che tutto sia puntato nella giusta direzione, riceverai questo messaggio.

Imparerai ad amare quel messaggio., In MAMP, fare clic su Open WebStart page. Trova questo vicino all’inizio:

Clicca su phpMyAdmin. Fare clic su Databases > create database. Ho intenzione di chiamare il mio startwordpress. Questo è tutto quello che devi fare in phpMyAdmin!

Configura WordPress

Va bene, passo finale. Trova wp-config-sample.php nella tua directory.

Sarà esattamente come questo.

Non essere nervoso. Cambia il nome del database, il nome utente e la password, da questo:

a questo:

Trova questo:

E cambialo letteralmente con qualsiasi altra cosa con numeri e lettere. Per sicurezza. xyz_ o 735hjq9_, ecc.

Salva il file come wp-config.php nella tua directory.

Ora, quando torni al tuo sito web e aggiorni, dovresti vedere questa schermata.

Dovrai inserire alcune cose: nome utente, password, indirizzo e – mail e poi hai finito. Congratulazioni, hai installato con successo WordPress!, Verrai reindirizzato a / wp-login.php, dove è possibile inserire le credenziali per accedere al backend. Se vai al tuo URL principale, vedrai il blog WordPress predefinito e ” Ciao, Mondo!” post.

Creazione del tema personalizzato

Al di fuori della configurazione di WordPress, quasi tutto ciò che fai in WordPress sarà nella cartellawp-content; tutto il resto è il codice principale e non vuoi scherzare con quello.

Da questo punto in poi, il Codice WordPress e StackOverflow diventeranno i tuoi migliori amici., Ti mostrerò come costruire un tema di base, ma come si sceglie di personalizzare i temi al di là che è totalmente a voi.

Nel Finder, seguire il percorso di wp-content> temi per arrivare alla cartella temi. Vedrai i temi predefiniti di WordPress-twentyfifteen, twentyfourteen, twentythirteen-e index.PHP. Crea una nuova directory per il tuo tema; Ho chiamato il mio startwordpress.

Un tema WordPress ha bisogno solo di due file di esistere – stile.css e indice.PHP.

Nella cartella del tema personalizzato, crea stile.CSS., Contiene semplicemente un commento che avvisa WordPress che esiste un tema qui. Modificare il nome, l’autore, la descrizione e così via.

Ricorda il codice sorgente del blog Bootstrap da prima nell’articolo? Sposta questi due file – index.htmleblog.css – nella cartella del tema personalizzata. Rinominare index.htmlaindex.php.

Il tema è stato creato. Vai alla dashboard di WordPress e fai clic su Appearance > Themes., Vedrete il tema nella collezione con tutti i temi di default.

Attiva il tema e torna all’URL principale. Sì, è così semplice. Hai tecnicamente creato un tema personalizzato già. Ovviamente, non fa nulla ancora al di là di ciò che un sito HTML statico può fare, ma sei tutto pronto ora.

C’è una cosa che potresti notare: blog.css non viene caricato. I principali file CSS e JS di Bootstrap vengono caricati tramite CDN, ma il mio file css locale non viene caricato. Perché?,

Il mio URL locale può esserestartwordpress.dev, ma è davvero tirando dawp-content/themes/startwordpress. Se mi collego al blog.css con<link href="blog.css">, tenta di caricarestartwordpress.dev/blog.css, che non esiste. Impara subito che non puoi mai collegarti a nulla in una pagina WordPress senza un po ‘ di PHP.

Nota: Chrome non consente più .dev URL locali. Questo esempio userà .dev, ma puoi usare .test o qualcos’altro a tua scelta.,

Fortunatamente, questo è facilmente risolvibile. Ci sono alcuni modi per farlo, ma ti mostrerò il modo più semplice per iniziare.

Individuare dove si è collegato al foglio di stile CSS nella testa dell’indice.PHP. Questo è quello che sembra in questo momento, ma dovremo cambiarlo.

Dobbiamo dirgli di collegarsi dinamicamente alla cartella themes. Sostituire il codice di cui sopra con il codice di seguito.

Se ricarichi la pagina, vedrai che CSS sta caricando., Se non si sta caricando, si prega di fare un aggiornamento duro. Il concetto sarà lo stesso per le immagini, javascript, e la maggior parte degli altri file che avete nella cartella temi, ad eccezione di file PHP.

Se non sei riuscito a caricare il CSS, fai clic su “Visualizza sorgente” e trova il percorso del tuo file CSS nel codice. Dovrebbe essere startwordpress.dev / wp-contenuto / temi / startwordpress / blog.CSS. Assicurarsi blog.css viene salvato nella posizione corretta.

Nota che questo non è il modo più corretto per caricare gli script nel tuo sito., E”il più facile da capire e funziona, quindi è come lo faremo per ora.

Dividendo la tua pagina in sezioni

In questo momento, tutto è nell’indice.PHP. Ma ovviamente vogliamo che l’intestazione, il piè di pagina e la barra laterale su tutte le pagine siano uguali, giusto? (Forse alcune pagine avranno una leggera personalizzazione, ma che viene dopo.)

Stiamo andando a dividere indice.php in quattro sezioni-intestazione.php, piè di pagina.php, barra laterale.php e contenuti.PHP.

Ecco l’indice originale.PHP. Ora iniziamo a tagliare e incollare.,

Tutto da <!DOCTYPE html> all’intestazione del blog principale sarà nel file di intestazione. L’intestazione di solito contiene tutti gli stili di testa necessari e la navigazione superiore al sito web. L’unica aggiunta che farò al codice è aggiungere<?php wp_head(); ?> subito prima della chiusura</head>.

La maggior parte dei siti Web, in particolare i blog, avrà un’area laterale per includere contenuti come archivi, tag, categorie, annunci e quant’altro. (Contenuto rimosso per brevità.)

Se la barra laterale è dove vanno tutte le informazioni secondarie, il contenuto è dove vanno tutti gli articoli e il contenuto principale del sito web. (Contenuto rimosso per brevità.)

Index

Il file indice dovrebbe essere piuttosto scarso ora. In effetti, dovrebbe essere solo questo:

Ora stiamo per aggiungere tutto di nuovo. Ecco il tuo nuovo index.php.

Anche se non hai mai usato PHP prima, questo codice è tutto molto autoesplicativo., get_header();, get_sidebar();e get_footer(); sono tutte funzioni che cercano le rispettive .file php e inserire il codice. Naturalmente, tutti vanno all’interno dei propri tag<?php ?> per far sapere al server di analizzarli come HTML. La funzione content è leggermente diversa, ma fa la stessa cosa.

Se si ri-carica il tuo URL, l’intero sito è ora caricato, proprio come prima. Si noterà una barra in alto se si è effettuato l ” accesso al back-end.,

Impostazioni principali

Prima di iniziare a inserire post e pagine, dobbiamo configurare alcune impostazioni principali di WordPress. Ad esempio, il mio titolo in questo momento è “Il blog Bootstrap”, hard coded in HTML. Voglio che <title> e <h1> del mio sito siano modificabili attraverso il back-end.

Nella dashboard, vai a Settings > General. Imposta il tuo titolo.

Nell’intestazione.,php, cambia il contenuto del tag title e del tag h1 principale in questo codice:

E la descrizione in questo.

Infine, voglio che il titolo mi riporti sempre alla pagina principale del blog. bloginfo("wpurl"); è il codice che lo farà.

Ecco il codice completo nel caso in cui tu sia confuso.

Abbiamo finalmente fatto la prima modifica dinamica alla pagina. Il front-end dovrebbe riflettere ciò che si inserisce nelle impostazioni.,

Ora vai su Impostazioni > Permalink. Per impostazione predefinita, WordPress è impostato su Day e name, che è una struttura URL davvero brutta. Fare clic sul nome del post e applicare le modifiche.

Il ciclo

La parte più eccitante è essere in grado di inserire dinamicamente il contenuto, e in WordPress lo facciamo con il Ciclo. E ‘ la funzione più importante di WordPress. Tutti i tuoi contenuti vengono generati attraverso un ciclo.

Nella dashboard, se fai clic sui post, vedrai un “Ciao, mondo!”post lì per impostazione predefinita., Il nostro obiettivo è quello di visualizzare quel post nel blog.

Il ciclo stesso è abbastanza semplice.

Si spiega da solo – SE ci sono post, MENTRE ci sono post, VISUALIZZA il post. Qualsiasi cosa all’interno del ciclo verrà ripetuta. Per un blog, questo sarà il titolo del post, la data, il contenuto e i commenti. Dove ogni singolo post dovrebbe finire è dove finirà il ciclo. Stiamo per aggiungere il ciclo a index.php.

Ecco il tuo nuovo file indice.

indice.php

L’unica cosa all’interno del tuo ciclo è il contenuto.,php, che conterrà il contenuto di un singolo post. Quindi apri il contenuto.php e modificare il contenuto in questo:

Impressionante. Facciamo la barra laterale dinamica, pure. Ci dovrebbe essere una descrizione e un elenco di archivi nella barra laterale. Nel cruscotto, ho intenzione di modificare la mia descrizione utente per dire “Front end web developer e nerd professionale.”

Elimina tutti i <li> sotto gli Archivi e modificalo in questo codice.

Per la mia descrizione, ho intenzione di tirare in metadati dal mio account utente.

Ora anche questo contenuto viene inserito dinamicamente.

Ecco il mio blog finora.

Menu e pagine

Ok. Ora sappiamo come creare un blog e modificare alcuni contenuti della barra laterale. Rimane solo un aspetto principale di questa pagina: la navigazione e dove conduce. Bene, ci sono due aspetti principali di WordPress-Post e pagine., Sono molto simili in quanto entrambi usano il Ciclo. Però, pagine sono dove si mette il contenuto che non è un post sul blog. È qui che entra in gioco l’aspetto CMS di WordPress: ogni singola pagina può essere personalizzata come desideri.

Nel cruscotto, ho aggiunto una pagina in modo che possiamo vedere due. Primo, stiamo andando a modificare la barra di navigazione in modo che i collegamenti portano alle pagine. Torna nell’intestazione.php, trova e cambia questo codice.

intestazione.php

wp_list_pages(); elencherà tutte le pagine che hai in un elenco non ordinato., "title_li=" sta dicendo al codice di non aggiungere un titolo” Pagine ” prima dell’elenco. Purtroppo per noi, questo sembra terribile; il blog originale.css ha i collegamenti codificati nei taga, nonli.

Fortunatamente, questa è una soluzione molto semplice. Sto solo andando ad applicare lo stile da uno all ” altro. Aggiungi questo al blog.il nostro blog.css

Ora dovrebbe apparire correttamente., Tuttavia, se il CSS non si applica, si prega di visualizzare l’origine dell’output HTML e scoprire qual è l’URL del CSS. Dovrebbe esserestartwordpress.dev/wp-content/themes/startwordpress/blog.css. Assicurati di fare un aggiornamento duro.

Molto meglio.

Pages

Voglio che le pagine abbiano un layout diverso rispetto ai post del blog; non voglio barre laterali su di esse. Pensa a index.phpcome indice del blog e page.php come indice di pagina., Ho intenzione di creare page.php, che sarà molto simile all’indice tranne che avere una griglia completa di 12 invece di un contenuto di 8 e una barra laterale di 4.

pagina.php

Quando clicco sulla mia pagina di esempio, il layout è ora diverso dal layout del post del blog.

Conclusione

C’è molto, molto di più da imparare su WordPress. Spero sinceramente che questo articolo ti abbia aperto un mondo di possibilità. Ora sapete che qualsiasi sito web può essere convertito in un tema WordPress – senza l”utilizzo di plugin, widget, o il tema di qualcun altro.,

Se qualcosa non era chiaro, per favore fatemelo sapere. Se ho postato qualsiasi informazione palesemente errata, per favore fatemelo sapere! Qualsiasi feedback è molto apprezzato! Il mio obiettivo era quello di fare l’articolo che vorrei avere di fronte a me quando ho iniziato a imparare ad usare WordPress e PHP.

Se vuoi sapere come migrare questa istanza locale a un server live, guarda questo piccolo tutorial: