Hvordan redigere WordPress Temaer i Dreamweaver CS5

Hvordan redigere WordPress Temaer i Dreamweaver CS5


WordPress tilbyr en av de mest tilpass online content management plattformer tilgjengelig for gratis. Redigere temaer for å gi en layout din egen grafisk design, eller for å forbedre funksjonaliteten gjennom tilførsel av skript eller plugins kan ytterligere styrke de grunnleggende egenskapene til en WordPress Theme. WordPress har sitt eget tema redaktør tilgjengelig via administrasjonspanelet; men kan du foretrekker å redigere et tema ved hjelp av Adobes Dreamweaver HTML editor for å få mer kontroll over designprosessen. Hvordan du går om å redigere filene vil avhenge av hvor kjent du er med WordPress maler og hvis du trenger å se design i design Vis hvert.

Bruksanvisning

Bare kode redigering

1 Last ned WordPress tema du ønsker å tilpasse og lagre den et sted som er lett å finne. Temaet mappen vil ha flere PHP-filer inne som utgjør den viktigste layout, som krever en header.php, index.php, footer.php, page.php og single.php på et minimum. I tillegg til disse filene, vil et tema også inneholde minst ett stilark, eller style.css fil, som styrer hvordan layoutelementer ser. Scripts, bilder og inkluderte filmapper kan også være til stede i ditt tema.

2 Start Dreamweaver og klikk "Åpne". Naviger til plasseringen av din WordPress tema og åpne den. Velg header.php og klikk "Åpne". Header.php filen inneholder den øverste tredjedel av sideoppsettet. Overskriften vil alltid inneholde <head> delen av HTML og åpningen <body> -taggen. Denne filen er der du kan legge til skript, lenker til css filer, jQuery innvielser, eller metakoder.

3 Gjenta trinn 2 for å åpne index.php og footer.php filer. Index.php inneholder standardinnholdet område av temaet layout, inkludert "loop" som viser blogginnleggene. Med mindre en spesiell side mal kalles, vil WordPress alltid standard til index.php. Den footer.php inneholder bunntekstområdet, som kan inneholde en horisontal widget bar, eller noe mer enn en opphavsrett og side-menyen. Bunnteksten skal alltid inneholde den avsluttende </ body> og </ html> koder.

4 Åpne temaets style.css. Dette filnavnet må aldri endres, som WordPress er konfigurert til å se etter en "style.css" for å identifisere tema i Utseende-menyen i administrasjonspanelet. Denne filen inneholder temaet navn og forfatter, samt alle stilarter. Noen temaer kan koble til andre stilark i stedet for å plassere alle CSS i ett dokument. Hvis det er tilfelle for temaet, må du åpne og redigere de ytterligere stilark.

5 Åpne functions.php filen. Legg noen ekstra funksjoner som sidebars, plugins, eller kortkoder til slutten av filen. Hold et øye på linjen teller til venstre. Hvis en linje blir rød, betyr det at du har feil form et funksjonskall eller savnet et komma eller semikolon.

Kode og design

6 Klikk på "File" og "New" og opprette en ny HTML-dokument. Klikk på "Code" -knappen for å taste inn koden redigering visning. Lim inn følgende kode i filen:

<! - Start-Header ->

<! - End Header ->

<! - Start-innhold ->

<! - Slutt Innhold ->

<! - Sidebar ->

<! - End Sidebar ->

<! - Start-bunntekst ->

<! - End bunntekst ->

Dette vil hjelpe deg dele opp oppsettet slik at du enkelt kan rekonstruere dine PHP-filer senere.

7 Lime inn innholdet fra header.php fil mellom "Start Header" og "End Header" kommentarer. Gjenta denne prosessen for å lime inn innholdet i index.php i innholdsområdet, sidebar.php - hvis det er én - i sidefeltet området og footer.php inn i bunntekstområdet.

8 Fjern malkodene fra topptekstområdet for å få Javascript og stilark for å oppdage riktig, slik at du kan se utformingen av layout. Malkodene vil se ut "<php ​​bloginfo ( 'template_directory');?>" Og fjerne dem kan også kreve at du fjerner slash rett etter koden. Fikse eventuelle stier nødvendig og klikk på "Split" for å se den endelige utformingen. Redigere malen som du ville en vanlig HTML nettside layout.

9 Bytt ut de fulle filbaner til noen skript eller stilsett med WordPress mal tag når du er ferdig med å redigere layout. Også erstatte funksjoner som navigasjonsmenyen eller sidebar widgets med de riktige malkodene. Se WordPress Codex for en fullstendig liste over tilgjengelige malkodene eller henvise til de opprinnelige PHP-filer for å kopiere dem over.

10 Kopier hver del av redigerte kode tilbake til sine egne PHP-filer. Sørg for at index.php inneholder "get_header" og "get_footer" malkodene. Last opp temaet til din WordPress installasjon og teste det ut ved å aktivere det gjennom Utseende menyen. Du kan gjøre ytterligere mindre tilpasninger ved direkte å redigere tema under "Utseende" og "Editor".

Hint

  • Du kan bruke "Inspiser Element" i Operas høyreklikkmenyen, også tilgjengelig i Firefox med "Firebug" add-on installert, for å se hvilke tag og CSS-stiler et bestemt område i et levende tema bruker. Dette bidrar til å tilpasse temaets farger og bilder mye raskere enn å lese koden alene.
  • Bla temaet er "Bilder" mappe med et grafisk redigering program, eller med "Large Thumbnails" aktivert i Windows Utforsker, for å få en idé om hvilke bilder som blir referert til av en bestemt CSS erklæring.
  • Ikke fjern WordPress PHP malkodene i dine tema filer. WordPress trenger disse malkodene for å trekke spesifikk funksjonalitet inn i temaet. For mer informasjon, besøk Mal siden av WordPress Codex.