Share
Abbiamo progettato il nostro sito e convertito in un file HTML statico nei due tutorial precedenti. Nell'ultima parte di questa serie, configureremo WordPress come CMS e convertiremo il nostro file HTML in un modello compatibile con WordPress.
Questo tutorial include uno screencast disponibile per i membri Tuts + Premium.
Vai su WordPress.org e scarica l'ultima versione di WordPress.
Decomprimi l'archivio e sposta tutti i file all'interno della cartella WordPress sul tuo server locale o web.
Crea un database MySQL vuoto e ricorda tutte le tue informazioni di accesso, ne avrai bisogno in circa 3 secondi.
Apri il browser e vai alla cartella che contiene tutto il tuo file WordPress. Ti verrà richiesto di creare un file di configurazione. Clic Crea file di configurazione
Ora è necessario inserire le informazioni del nostro database MySQL ed eseguire l'installazione.
Se tutto è andato bene con l'installazione, ti verrà presentato il tuo nuovo login. Copia la tua nuova password e accedi al backend di WordPress. Una volta effettuato l'accesso al back-end ti verrà suggerito di cambiare la tua password. Fallo ora!
Ora che siamo impostati con il nostro nuovo utente, possiamo iniziare a configurare WordPress per essere usato come CMS. Innanzitutto consentiremo ai permalink di rendere i nostri percorsi belli da vedere. Passa il mouse sopra impostazioni e fai clic sulla freccia a destra per visualizzare altre opzioni e fare clic su permalink.
Useremo le opzioni Day e name, quindi seleziona questa opzione e premi Salva I Cambiamenti.
WordPress ci fornisce un post fittizio e una pagina fittizia, quindi elimineremo quelli e aggiungeremo le pagine di cui abbiamo bisogno.
Passa il mouse sopra Messaggi e fare clic sulla freccia per visualizzare le opzioni. Clicca su modificare. Se passi il mouse sopra Hello World! appariranno altre opzioni di post, basta fare clic su Elimina e quindi confermare l'azione.
Nota: questo passaggio non è necessario, mi piace solo mantenere tutto pulito e in ordine.
Espandi il pagine opzioni e fare clic su modifica quindi eliminare il Di pagina.
Nel pagine fare clic sulla barra laterale sinistra Aggiungere nuova quindi possiamo aggiungere le nostre pagine.
Inserisci il titolo e qualsiasi contenuto desideri sulla tua pagina e poi una volta che hai finito premi Pubblicare sul lato destro della pagina.
Se non vuoi che la pagina sia visibile, puoi colpire Salva la bozza lavorarci più tardi.
Vogliamo creare alcune pagine figlio di Pricing & Signup, quindi quando si arriva a fare le pagine per questo è necessario modificare un'opzione nella pagina dell'editor di pagine.
Nello screenshot qui sopra ho evidenziato l'opzione che deve essere cambiata. Vogliamo che Cheap Plan sia una pagina per bambini di Prezzi e iscrizioni, quindi diremo a WordPress che Prices & Signup è il genitore di Cheap Plan. Questo ci permetterà di creare una navigazione specifica per il nostro tema.
Una volta create tutte le pagine create, la sezione Modifica di Pages dovrebbe apparire come nella schermata qui sotto.
Tutto ciò di cui abbiamo bisogno per l'installazione per ora è stato configurato, quindi ora possiamo passare alla conversione del nostro file HTML in un modello WordPress.
Apri il tuo editor e vai alla cartella principale di WordPress.
Vogliamo navigare verso wp-content> temi.
Cancelleremo il tema classico. Ancora una volta, questo è solo per mantenere tutte le nostre cartelle pulite e ordinate. Quindi elimina il classico e il duplicato di default. Rinomina predefinito in wordpress_cms.
Vai nella cartella wordpress_cms ed elimina rtl.css e la cartella images.
Quindi, apri style.css ed elimina tutto tranne la sezione principale del commento nella parte superiore del file.
Abbiamo creato il nostro style.css file che vive all'interno di una cartella. Questo style.css il file dice a WordPress alcune informazioni sul nostro modello così anche se ne abbiamo le nostre style.css file, dobbiamo ancora mantenere questo.
Modifica il style.css file per apparire qualcosa di simile al codice qui sotto. Cambia le mie informazioni per adattarle alle tue informazioni!
/ * Nome del tema: URI del tema di WordPress CMS: http://your-site.com Descrizione: Utilizzo di WordPress come CMS. NetTuts + Tutorial! Versione: 1 Autore: Matt Vickers Autore URI: http://envexlabs.com/ * /
Salva questo file e torna al tuo browser. Espandi il Aspetto barra laterale e fare clic su Temi. Dovresti vedere il tema WordPress CMS come opzione. Clic attivare per fare in modo che WordPress utilizzi il nostro nuovo tema.
WordPress è ora pronto ad accettare il nostro sito precodificato!
Se navighi nella root di WordPress nel tuo browser, dovresti vedere la pagina principale di WordPress senza gli stili applicati.
Copia le cartelle inc e img e tutto il contenuto in WordPress_cms.
Dobbiamo dire a WordPress che vogliamo usare i nostri fogli di stile anziché quelli vecchi, quindi aprilo header.php
Cancelleremo del codice non necessario. Ho commentato le aree che devi eliminare, quindi fai riferimento al codice qui sotto.
><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?> >/ ">
Puoi anche cancellare dal tag del corpo. Dovremmo avere un semplice file di intestazione ora, quindi aggiungiamo i nostri 2 file CSS nel nostro tema.
Proprio sotto il tag del titolo useremo il normale tag link.
Noterai che stiamo usando una funzione chiamata bloginfo (). Questa funzione è utilizzata per ottenere informazioni sul tuo blog corrente. Potremmo spostare i server o cambiare la struttura delle cartelle in futuro, quindi non vogliamo inserire percorsi difficili nei nostri fogli di stile, quindi passiamo un valore di template_url che restituisce il percorso del nostro modello corrente. Questo è molto potente se pianifichi di creare template che altre persone useranno perché non sai come è configurato il loro WordPress.
Se carichi il sito, dovresti vedere che alcuni dei nostri stili predefiniti dal nostro foglio di stile sono applicati al sito.
Quindi, apri footer.php ed elimina tutto tra i commenti e wp_footer ().
Inoltre, apri sidebar.php e cancella tutto dopo i commenti. Ora siamo pronti per copiare i nostri contenitori HTML nei nostri file WordPress.
Apri il index.html file dal nostro tutorial precedente e copiare tutto tra
tag. Incolla questo codice in header.php.Per semplificare le cose, consente di eliminare tutti i tag e il contenuto all'interno di ciascuno dei contenitori in modo da lasciare solo i div del contenitore.
Questo è dove può diventare un po 'complicato. Abbiamo bisogno di estendere questo codice tra 4 file. Ho commentato dove ogni pezzo deve andare, quindi vai avanti e copia e incolla ogni sezione nel file a cui appartiene.
Va bene, solo per assicurarti che tutto funzioni come dovrebbe, ricontrolla ogni file con il contenuto corretto. I tuoi file dovrebbero assomigliare agli esempi qui sotto.
header.php
><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?> sidebar.php
footer.php
Se le tue pagine hanno un bell'aspetto, lascia andare. Se non lo fanno, falli apparire come negli esempi sopra.
Se torni al tuo browser e aggiungi alla fine dell'indirizzo e premi invio. Questo dovrebbe portarti alla tua pagina.
Iniziamo con la creazione dei nostri elementi di intestazione e navigazione, quindi se non lo hai già aperto, apri header.php
All'interno di header_container dobbiamo aggiungere il nostro tag logo h1 #.
Stiamo usando il bloginfo () funzione di nuovo, ma questa volta stiamo afferrando il nome del nostro blog.
Se aggiorni, dovresti vedere il nostro fantastico logo! Ora dobbiamo aggiungere la nostra navigazione.
Invece di hard coding nei nostri elementi di navigazione, useremo una funzione WordPress integrata chiamata wp_list_pages (). Questo ci permetterà di controllare quali elementi della pagina vogliamo mostrare e di creare collegamenti a ciascuna di queste pagine.
Stiamo passando alcune opzioni alla funzione in modo che possiamo fare in modo che WordPress elenchi le pagine esattamente come vogliamo.
La prima opzione che stiamo inviando è title_li. Di default WordPress genera un titolo li che visualizza Pages. Non vogliamo questo, quindi inviamo semplicemente un valore vuoto.
La seconda opzione è la profondità. Di nuovo, per default, WordPress mostrerà un elenco di ogni pagina che viene inclusa, incluse le pagine secondarie. Non vogliamo che ciò accada, quindi passiamo una variabile di 1 in modo che WordPress visualizzi solo le pagine di livello superiore.
Il valore finale è include. Non vogliamo mostrare tutte le pagine che abbiamo creato, vogliamo solo mostrare Informazioni, prezzi e iscrizioni e contatti. Stiamo passando gli ID di ogni pagina che vogliamo mostrare. Gli ID dell'esempio non corrisponderanno all'ID della tua pagina, quindi ASSICURI DI CAMBIARLI PER I TUOI ID
Per ottenere l'ID delle pagine, vai alla sezione della pagina di modifica. Quando passi il mouse sul link della pagina, l'ID può essere trovato nel link. vale a dire: wp-admin / page.php? action = edit & post = 15
Tutte le opzioni disponibili sono disponibili su http://codex.WordPress.org/Template_Tags/wp_list_pages
Se aggiorni la pagina, dovremmo avere una navigazione di bell'aspetto.
Siamo fortunati, possiamo utilizzare questa funzione esatta per occuparci della nostra barra laterale e della nostra navigazione a piè di pagina. Dobbiamo solo apportare alcune modifiche alle opzioni che stiamo inviando per soddisfare ogni esigenza.
Aprire sidebar.php e scrivi un po 'di codice nel nostro sidebar_container.
post_parent) wp_list_pages ('title_li = & child_of ='. $ post-> post_parent); ?>
Vogliamo solo mostrare la navigazione nella barra laterale se la pagina corrente è una pagina secondaria. Lo facciamo controllando se la pagina corrente ha un valore assegnato a post_parent. Se la pagina non è un bambino, questo valore sarà 0.
Le informazioni su entrambi i post e le pagine sono ospitate nel $ postale variabile. Se print_r ($ post) sarai in grado di vedere tutte le informazioni sul post che è a tua disposizione.
Ora che stiamo controllando un post genitore, dobbiamo elencare tutti i figli dei nostri genitori. Per farlo, passiamo una variabile di child_of e passiamo l'attuale ID post_parent.
Se il nostro ID padre è 5, lo stiamo dicendo wp_list_pages () per elencare ogni pagina che ha un ID post_parent di 5. È molto utile quando si ha a che fare con la navigazione a più livelli.
Ora prepareremo rapidamente il nostro footer e poi passeremo alla visualizzazione di alcuni contenuti sulle nostre pagine. Questo collegherà l'intero sito e potremo iniziare a dare gli ultimi ritocchi sul nostro nuovo sito guidato da WordPress.
Aprire footer.php e per l'ultima volta aggiungi il wp_list_pages () funzione.
Copyright Gear'd © 2009
Questa funzione è identica alla nostra navigazione dell'intestazione, ma invece di usare include stiamo usando exclude per rimuovere tutti gli attuali elementi di navigazione principale dalla nostra navigazione a piè di pagina.
Gli ID dell'esempio non corrisponderanno all'ID della tua pagina, quindi ASSICURI DI CAMBIARLI PER I TUOI ID
Un ultimo file di template da modificare prima di aver finito. Aprire post.php e cancella tutto in mezzo get_header () e get_sidebar ().
Qui è dove aggiungeremo il nostro content_container
Quando si tratta di visualizzare il tuo post e il contenuto della pagina, WordPress utilizza un set di funzioni speciali chiamato The Loop. In poche parole, prende il tuo contenuto e lo formatta, preparandolo per essere mostrato all'utente finale.
All'interno del nostro contenitore di contenuti aggiungeremo un'istruzione if e un ciclo while.
Per prima cosa controlliamo se abbiamo dei post, se lo facciamo passiamo in rassegna ogni post e configuriamo varie funzioni che possiamo usare per visualizzare il contenuto.
All'interno del nostro ciclo while aggiungeremo tutto il nostro contenuto rimanente.
post_parent):?>post_parent); ?>
Stiamo usando alcune nuove funzioni per visualizzare il contenuto della nostra pagina. La cosa bella di WordPress è che molte delle funzioni usano l'inglese semplice per le convenzioni di denominazione.
Avevamo bisogno del titolo della pagina, quindi usiamo il titolo() per visualizzarlo. Possiamo anche prendere il titolo di qualsiasi post o pagina usando get_the_title ($ post_id) e passando l'ID del post in quanto è solo variabile.
Vogliamo solo mostrare la seconda intestazione se siamo su una pagina figlio, quindi usiamo il if ($ post-> post_parent) di nuovo per controllare se siamo su una pagina bambino, e se lo siamo otteniamo il titolo di quel post genitore usando get_the_title ().
Ultimo ma non meno importante, usiamo il contenuto() per visualizzare qualsiasi contenuto della pagina.
Aspetta, la nostra barra laterale sembra essere nel punto sbagliato della pagina, quindi prendi get_sidebar () e spostalo sotto get_header (). Ora la nostra barra laterale viene prima del nostro contenuto.
Legare le estremità sciolte
Se si carica la root della propria installazione di WordPress nel browser, si dovrebbe ricevere un errore non trovato.
Questo perché di default la pagina principale di WordPress è una lista di tutti i tuoi post. Non utilizziamo WordPress per i blog, quindi dobbiamo dire a WordPress di utilizzare una delle nostre pagine.
Torna al tuo backend WordPress e carica il Lettura pagina in impostazioni. La prima opzione è visualizzata nella Pagina iniziale e l'opzione selezionata dovrebbe essere I tuoi ultimi post. Vogliamo selezionare una pagina statica e utilizzare il menu a tendina per cambiare la nostra prima pagina per qualsiasi post che si desidera. Per questo esempio, lo indicherò alla nostra pagina Informazioni.
Salvare le modifiche e ricaricare la pagina di root durante l'installazione di WordPress. Dovrebbe reindirizzare alla pagina Informazioni.
La prossima cosa che noterete è che la nostra navigazione non mostra più uno stato attivo anche se siamo sulla pagina giusta. Questo perché per la nostra pagina statica stavamo usando una classe di attivi. wp_list_pages () assegna un valore diverso per gli stati attivi, quindi è sufficiente aggiungere alcune classi ai nostri fogli di stile. Le 2 classi che stiamo per aggiungere sono .current_page_item e .current_page_parent.
ul.nav li.active a, ul.nav li.current_page_item a, ul.nav li.current_page_parent a #sidebar_container ul li.active a, #sidebar_container ul li.current_page_item aVai avanti e usa il codice qui sopra per aggiungere le classi sia alla nostra navigazione principale che alla navigazione laterale. Aggiorna la pagina e dovresti avere uno stato attivo per qualsiasi pagina in cui ti trovi attualmente.
Altre due modifiche e possiamo concludere.
La nostra pagina Pricing & Signup è in realtà solo un titolo per le sue pagine figlio, ma WordPress lo tratta come se fosse una pagina personale. Vogliamo reindirizzare l'utente alla pagina del piano gratuito quando fa clic su Prezzo e iscrizione.
Una delle molte grandi cose di WordPress è la sua capacità di plugin. Esistono 1000 plug-in scritti per WordPress che aggiungono funzionalità infinite che non sono disponibili immediatamente. Stiamo per installare un plug-in di reindirizzamento che possiamo usare per reindirizzare l'utente.
Il plug-in che utilizzeremo può essere scaricato qui: http://WordPress.org/extend/plugins/redirect/. Scarica il plug-in e sposta la cartella di reindirizzamento in wp-content / plugins.
Ora dobbiamo attivare il plugin nel backend di WordPress in modo che possiamo usarlo. Fai clic sul tuo backend plugin e dovresti essere reindirizzato a una pagina con tutti i plugin disponibili.
Trova il nostro plugin di reindirizzamento e colpisci Attivare. Il nostro plugin è ora attivato.
Ogni plug-in funziona in modo diverso, quindi assicurati di leggere le istruzioni per ciascuno prima di iniziare a utilizzarli. Il nostro plugin di reindirizzamento usa campi personalizzati per dire a WordPress quali post vogliamo reindirizzare e dove. Vai a pagine e fai clic su modifica sotto la nostra pagina Prezzi e iscrizione.
Proprio sotto l'area di testo dell'editor c'è la sezione Campi personalizzati. Il primo input forniremo un valore di reindirizzamento in modo che WordPress sappia che vogliamo reindirizzare e il secondo input sarà l'indirizzo della nostra pagina di piano libero. Una volta che hai finito, colpisci Aggiungi campo personalizzato e sii sicuro di Pagina di aggiornamento in alto a destra.
Se torni al tuo browser e fai clic su Prezzi e iscrizione verrai reindirizzato alla pagina del piano gratuito.
Ordinamento di tutti fuori
La nostra navigazione su prezzi e iscrizioni sembra un po 'fuori uso. Il nostro piano gratuito si trova ultimo quando dovrebbe essere in cima. Possiamo impostare l'ordine dei post direttamente nel backed, quindi carica la sezione delle pagine principali e passa con il mouse su Free Plan e fai clic su Quick Edit.
Il campo che vogliamo aggiornare è Order. Cambia il valore da 0 a 1 e premi Pagina di aggiornamento. Fai lo stesso per i piani economici (ordine 2) e costoso (ordine 3) aggiornando di conseguenza l'ordine.
Aggiorna il nostro browser per vedere i nuovi aggiornamenti.
Questo vale anche per la navigazione di intestazione e piè di pagina, quindi se non ti piace l'ordine in cui si trovano, sentiti libero di cambiarli.
Mi piacciono le cose personalizzate
I campi personalizzati sono fantastici. Ci permettono di passare informazioni specifiche per ogni post. Possiamo aggiungere immagini al nostro post utilizzando il Media Uploader, ma per questo esempio useremo campi personalizzati per passare le informazioni al nostro file page.php.
Apri la tua pagina Informazioni nell'editor della pagina di WordPress.
Utilizzeremo Media Uploader per caricare un'immagine da utilizzare per la nostra intestazione, quindi a lato Upload / Insert fare clic sull'icona dell'immagine.
Ho intenzione di caricare il banner.gif che avevamo usato prima, quindi fare clic Seleziona i file e trovalo sul tuo computer.
Una volta che il file è stato caricato, dovresti ricevere alcune informazioni sulla tua immagine. Vicino alla parte inferiore di questa finestra modale dovresti vedere un input chiamato Link URL e il percorso della tua immagine. Vogliamo copiare questo URL. Se questo input è vuoto, puoi fare clic sul pulsante URL file qui sotto e aggiornerà l'input.
Una volta copiato questo percorso, possiamo chiudere questa finestra e andare alla sezione Campi personalizzati. Il primo input che useremo è header_image e il secondo valore è il percorso del nostro file.
Aggiungi il tuo campo personalizzato premendo Aggiungi campo personalizzato e Pagina di aggiornamento nell'angolo in alto a destra.
Aprire page.php e trova il div header_image.
Vogliamo verificare se c'è qualche immagine che deve essere mostrata e se ci sarà afferreremo il percorso e mostreremo l'immagine.
ID, 'header_image', true); se ($ immagine):?>
Per prima cosa usiamo get_post_meta () per assegnare il percorso della nostra immagine alla variabile $ image.
Il primo argomento che inviamo a get_post_meta () è l'ID della pagina in cui ci troviamo. Il secondo valore è il nome del campo personalizzato che nel nostro caso è header_image. L'ultimo argomento dice a WordPress che vogliamo solo restituire 1 campo personalizzato.
Quindi controlliamo per vedere se $ image è vuoto. Se non esiste un campo personalizzato denominato header_image non viene visualizzata l'immagine, altrimenti è possibile visualizzare sia l'immagine header_image che l'immagine all'interno di essa..
Eseguiamo il richiamo del valore di $ immagine come origine dell'immagine per visualizzare la nostra immagine.
Aggiorna il browser e visualizza il Contatto pagina. Non dovresti vedere alcuna immagine. Se carichi la pagina About, dovresti vedere la nostra immagine e la casella blu arrotondata che la contiene.
È così. L'abbiamo fatto! Prenditi un momento per congratularsi con te stesso per aver completato l'intero tutorial e aver affrontato il mio stile di insegnamento, spero, decente.
Abbiamo appena scartato a malapena la superficie di WordPress, ma ti ho dato una solida base per iniziare ad andare più in profondità in WordPress.
Se vuoi continuare ad imparare che tipo di funzioni ha da offrire WordPress ti suggerisco di dare un'occhiata al codice WordPress.
Quando ti imbatti in problemi o stai cercando di realizzare qualcosa che WordPress non offre, fai una ricerca veloce su Internet. È probabile che qualcuno abbia incontrato lo stesso problema e il 99% delle volte c'è un plugin per risolverlo!
Ancora una volta, grazie per aver letto il tutorial! Spero che tu abbia imparato molto e ora puoi iniziare a offrire ai tuoi clienti un solido CMS per rendere la tua vita più facile.
Accentsconagua
