Nwlapcug.com


Come modificare temi WordPress in Dreamweaver CS5

Come modificare temi WordPress in Dreamweaver CS5


WordPress offre una delle piattaforme di gestione dei contenuti online più personalizzabile disponibile gratuitamente. Modifica temi al fine di dare un layout il vostro proprio disegno grafico, o per migliorare la funzionalità attraverso l'aggiunta di script o plugin possa migliorare ulteriormente le funzionalità di base di un tema WordPress. WordPress è dotato di un proprio editor tema disponibile tramite il pannello di amministrazione; Tuttavia, se si preferisce modificare un tema utilizzando editor HTML di Dreamweaver di Adobe al fine di ottenere maggiore controllo sul processo di progettazione. Come si va sulla modifica del file dipenderà quanta familiarità sei con template di WordPress e se hai bisogno di vedere il design nella visualizzazione progettazione, come si va avanti.

Istruzioni

Modifica solo del codice

1

Scarica il tema di WordPress si desidera personalizzare e memorizzare da qualche parte che è facile da individuare. La cartella del tema avrà più file PHP all'interno che compongono il layout principale, che richiedono un header. php, index. php, footer. php, php e single. php come minimo. Oltre a questi file, un tema conterrà anche almeno un foglio di stile o file Style. CSS, che controlla l'aspetto gli elementi di layout. Script, immagini e cartelle di file incluso possono anche essere presenti nel tuo tema.

2

Avviare Dreamweaver e fare clic su "Apri". Spostarsi nel percorso del vostro tema WordPress e aprirlo. Selezionare il header. php e fare clic su "Apri". Il file header. php contiene il terzo superiore del layout di pagina. L'intestazione conterrà sempre sezione < head > del codice HTML e il tag di apertura < body >. Questo file è possibile aggiungere script, collegamenti a file css, jQuery iniziazioni o meta-tag.

3

Ripetere il passaggio 2 per aprire i file index. php e footer. php. Index. php contiene l'area di contenuto predefinita del layout del tema, tra cui il "loop" che elenca i post del tuo blog. A meno che una pagina speciale modello è chiamata, WordPress di default sempre l'index. php. Il footer. php contiene l'area di piè di pagina, che può contenere una barra dei widget orizzontale, o niente più che un menu di preavviso e pagina copyright. Il piè di pagina deve contenere sempre la chiusura < / body > e < / html > Tag.

4

Aprire Style. CSS del tema. Il nome del file non deve essere cambiato, come WordPress è configurato per cercare un "Style. css" identificare il tema nel menu a comparsa del pannello di amministrazione. Questo file contiene il tema nome e autore, come pure tutti gli stili. Alcuni temi potrebbero rimandare ad altri fogli di stile invece di mettere tutti i CSS in un unico documento. Se questo è il caso per il vostro tema, è necessario aprire e modificare i fogli di stile aggiuntive.

5

Aprire il file functions. php. Aggiungere eventuali funzioni aggiuntive quali barre laterali, plugin o codici brevi alla fine del file. Tenere d'occhio il contatore di riga a sinistra. Se una riga diventa rossa, significa che avete erroneamente formata una chiamata di funzione o perso una virgola o punto e virgola.

Codice e progettazione

6

Fare clic su "File" e "New" e creare un nuovo documento HTML. Fare clic sul pulsante "Codice" per immettere il codice di visualizzazione di modifica. Incollare il codice seguente nel file:

<!---> intestazione iniziale

<!---> fine intestazione

<!---> inizio contenuto

<!---> fine contenuto

<!---> sidebar

<!---> fine Sidebar

<!---> piè di pagina di start

<!---> fine piè di pagina

Questo ti aiuterà a suddividere il layout in modo facilmente è possibile ricostruire i file PHP più tardi.

7

Incollare il contenuto dal file header. php tra i commenti di "Avviare Header" e "Fine intestazione". Ripetere questa procedura per incollare il contenuto di index. php in area di contenuto, Sidebar. php..--se ce n'è uno..--nella zona di sidebar e footer. php nella zona di piè di pagina.

8

Rimuovere i tag di modello dall'area intestazione al fine di ottenere il codice JavaScript e fogli di stile per rilevare correttamente, consente di visualizzare la struttura del layout. Tag modello sarà simile a "<? php bloginfo('template_directory');? >" e loro rimozione può richiedere anche rimuovere lo slash subito dopo il tag. Difficoltà eventuali percorsi necessari e fare clic sul pulsante "Split" per visualizzare il layout finale. Modificare il modello di come si farebbe con qualsiasi layout di pagina Web HTML normale.

9

Sostituire i percorsi di file completo di tutti gli script o i fogli di stile con WordPress template tag dopo aver modificando il layout. Anche sostituire funzioni come ad esempio i widget di menu o barra laterale di navigazione con i tag di modello appropriato. Vedere il Codex di WordPress per un elenco completo dei tag dei template disponibili o fare riferimento ai file PHP originali per copiarli sopra.

10

Copiare ogni sezione del codice modificato nuovamente nella loro file PHP separati. Garantire che il tuo index. php include i tag di modello "get_header" e "get_footer". Caricare il tema alla vostra installazione di WordPress e provarlo attivandolo tramite il menu a comparsa. Si possono fare qualsiasi ulteriori piccoli aggiustamenti modificando direttamente il tema in "Aspetto" e "Editor".

Consigli & Avvertenze

  • È possibile utilizzare l'opzione "Ispeziona elemento" nel menu contestuale dell'Opera, disponibile anche in Firefox con il componente aggiuntivo "Firebug" installato, per vedere quali tag e stili CSS un'area specifica di un tema dal vivo usi. Questo aiuta a personalizzare del tema colori e immagini molto più veloce di lettura del codice da solo.
  • Sfoglia la cartella "Immagini" del tema con un programma di editing grafico, o con "Miniature grandi" abilitato in Windows Explorer, per avere un'idea delle quali immagini vengono fatto riferimento da una particolare dichiarazione di CSS.
  • Non rimuovere i tag dei template WordPress PHP nel vostro file di tema. WordPress ha bisogno di questi tag dei template per funzionalità specifiche in tema di tirare. Per ulteriori informazioni, visitare la pagina di Template di WordPress Codex.