Accentsconagua

Utvikle ditt første WordPress Theme Dag 2 av 3

Kode
Share

Temaer er en stor del av det som gjør WordPress så populært som det er, og i denne tredelte serien tar vi deg gjennom en trinnvis prosess som resulterer i et ferdig, fungerende WordPress-tema. I del to, dyper vi inn i kodingen hoveddelen av temaet vårt!

Ser etter ajagratis WordPress temaя å komme i gang raskt? Vi har noen flotte for deg å velge mellom!

Del to

Velkommen til del to av denne tredelte serien om å utvikle et WordPress-tema fra bunnen av. Sist gang vi så på hva som gjør et "godt tema", så vel som de generelle komponentene som kreves for et tema å jobbe. Denne uken skal vi dykke rett inn og begynne å lage vårt aller første tema.

  • Utvikle ditt første WordPress-tema: Dag 1 av 3
  • Utvikle ditt første WordPress Theme: Dag 2 av 3
  • Utvikle ditt første WordPress Theme: Dag 3 av 3 (Kommer snart)

Vårt tema

Jeg vil gjerne understreke at hvis du har ditt eget layout å jobbe med, bruk det - sjansen er at du lærer mer ved å eksperimentere, og du får et resultat som vil skreddersys etter din smak. Hvis du ikke har et oppsett å jobbe med, gir vi et enkelt personlig layout for at du skal jobbe med.

Denne utformingen er noe jeg gjorde en stund tilbake som en av mange ubrukte design for en venns personlige blogg. I den nedlastbare koden som følger med denne opplæringen finner du to mapper; bftheme og bffiles. I bffiles-mappen er oppsettet i pre-WordPress-tilstand, den andre mappen inneholder det ferdige temaet.

Åpne temaet i en nettleser for å få en ide om hva vi skal for, det skal se litt ut som dette:

Bryte den opp

Mens det ville være mulig å lage et temaarbeid med bare en fil, er det veldig dårlig praksis og ikke noe du vil se i det hele tatt i naturen. Det er godt å holde fast i standardfilstrukturen, fordi den gjør temaendring enklere nedover linjen, og lar deg bruke de innebygde WordPress-funksjonene til å inkludere filer enkelt (for eksempel get_header ()).

Først av alt, la oss forberede vårt arbeidsområde. I temaer-katalogen i WordPress-installasjonen lager du en ny mappe som heter blindfaith. Inne i den mappen, opprett følgende filer:

  • index.php
  • single.php
  • page.php
  • comments.php
  • functions.php
  • header.php
  • footer.php
  • sidebar.php

Nå har vi våre stilark og bilder på plass, også et temaskjelett, vi kommer til å hoppe rett inn. Først må vi få frem temaet vårt på WordPress dashboard - for å gjøre dette må vi endre stilen vår. Css fil.

WordPress vil automatisk se etter en fil kalt style.css i et temakatalog for å trekke ut informasjon om temaet. Lim inn følgende kode i toppen av style.css:

/ * Tema navn: Blind Faith Theme URI: http://www.danwalker.com/ Beskrivelse: Et minimalistisk, enkelt tema for WordPress - støtter widgets i sidepanelet, alle manorer av post / sideformatering og kommer med en enkel å tilpass stilark. Forfatter: Dan Walker Versjon: 1.0 Tags: minimalistisk, enkel, widgets, sidebar, elegant * /

Hvis vi sjekker WordPress nå, bør temaet vises i endringstemaene på oversikten. Aktiver vårt nye tema og last opp forsiden av WordPress. Ser ingenting? Flink. Når WordPress har gjort sin magi å finne ut hvilken side brukeren ønsker og har utarbeidet resultatene, kalles det index.php fra vårt tema katalog - unntatt akkurat nå er filen tom.

Først og fremst må vi kutte opp HTML-en vår i sine fire respektive deler; header, body, sidebar, footer. Hvis du åpner indeksen.html som følger med denne opplæringen, bør du se dette:

   Blind tro      
 
 
Blind tro
 Bare et annet tema av Dan Walker 
 
  
 
 
 
 
 
  • Hjem
  • Handle om
  • typografi
 
 
 
 
 
Hei Verden!
 
 
 postet på 6. februar 2011 av Dan under Uncategorized 
 
 1 kommentar 
 
 
Kjæresten er dum og sitter, og er en avgjørende forfatter. Etiam malesuada som i orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Ikke noe annet. Praesent på dolor arcu. Nulla porttitor dukker bare på kjøretøy fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi Nulla Nisl, blandet med deg selv, selvfølgelig. Nulla lectus ante, pellentesque tempor pretium eu, porttitor vitae mi. Nunc et dolor eget purus ultricies sollicitudin. Phasellus luctus tincidunt lobortis. Nunc ac aliquam leo. I tortor orci, auktor non condimentum ultricies, hendrerit et nunc. Nam neque est, laoreet at rhoncus vitae, porttitor at nulla. Maecenas dignissim sagittis massa non ultrices. Kras eros quam, ultrices eu iaculis eu, egestas eget justo. Vivamus diam sapien, volutpat egen luktus nec, lacinia non quam. Duis suscipit nunc eget neque congue pretium. Det er ikke mulig å utelukke dette. Nunc en ligula non metus luctus molestie.
 
 Les mer
 
 
 
Ingen nyere / eldre innlegg
 
 
 
 Opphavsrett ? 2011 Dan Walker
 Ikke stjele noe osv 
 
 
 
 litt om meg 
 
 
Kjæresten er dum og sitter, og er en avgjørende forfatter. Etiam malesuada som i orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Ikke noe annet. Praesent på dolor arcu. Nulla porttitor dukker bare på kjøretøy fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi Nulla Nisl, blandet med deg selv, selvfølgelig.
 
 
 
 Siste innlegg
 
     
  • Hei Verden!
    •

Hvis vi laster opp denne HTML-en i en nettleser for øyeblikket, ser vi grunnleggende layout. Når vi ser på dette oppsettet, er det første som vi må gjøre, å bestemme hva overskriften skal inneholde. Siden vi ønsker tittelen, søkefeltet og navigasjonen øverst på hver side, er det det vi legger inn i vår headerfil.

Hovedinnholdsområdet vil variere, noe som betyr at det kan være index.php, page.php, etc. Sidebjelken er alt innholdet utenfor innholdsruten til høyre for layouten og bunnteksten vil rett og slett være opphavsrettsmeldingen. Vårt tema vil bli gjort slik:

Så kopier koden fra index.html hele veien fra doktypen til innholdsdelingen og lim den inn i vår headerfil, vi burde nå ha en header.php-fil som ser slik ut:

   Blind tro      
 
 
Blind tro
 Bare et annet tema av Dan Walker 
 
  
 
 
 
 
 
  • Hjem
  • Handle om
  • typografi

For nå vil vi hoppe over innholdsdelen som det er den største og mest komplekse delen (består av mange forskjellige filer) og flytte rett fram til bunnteksten. Vanligvis kommer en bunntekst sist i et layout, men siden sidebjelken kommer etter bunnteksten i koden, vil vi bare ringe sidebar etter bunntekst. Derfor bør footer.php inneholde følgende kode;

 
 Opphavsrett ? 2011 Blind Tro av Dan Walker

Du vil merke at vi bruker vår første WordPress-funksjon over; get_sidebar () ;. Denne funksjonen er omtrent det samme som nødvendig (? Sidebar.php?); og siden vi alltid vil kreve sidebjelken etter bunnteksten, er det fornuftig å ringe sidebjelken i bunntekstfilen på slutten.

Til slutt må vi inkludere sidefeltet. Siden bunnteksten kommer foran sidebjelken, er sidebjelken den siste filen inkludert, og det bør også lukke designet (ved å lukke de resterende kodene, wrapper, body og html).

 
 
 litt om meg 
 
 
Kjæresten er dum og sitter, og er en avgjørende forfatter. Etiam malesuada som i orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Ikke noe annet. Praesent på dolor arcu. Nulla porttitor dukker bare på kjøretøy fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi Nulla Nisl, blandet med deg selv, selvfølgelig.
 
 
 
 Siste innlegg
 
     
  • Hei Verden!
    •

For nå, åpne index.php og skriv inn følgende;

Hvis vi navigerer til vår installasjon av WordPress, bør vi få noe sånt

For øyeblikket synes innholdet på nettstedet (eller hva vi har gjort hittil) å laste, men stilarkene er ikke. Dette skyldes at i vår headerfil bruker anropene til stilarkene nå en sti som ikke eksisterer. De bor nå i / wp-innhold / temaer / blindfaith /, men det er en enklere måte å lime på at overalt er det nødvendig - en mer dynamisk måte.

Bloginfo () Funksjonen

WordPress kommer med en innebygd funksjon kalt bloginfo () som er flott for å få alle slags nyttig lokal informasjon som; blogg navn, beskrivelse, stilark URL, stilark katalog og mer. For mer informasjon om hva vi kan få med bloginfo, les denne siden i WordPress codex.

La oss åpne vår headerfil og endre noen ting for å bruke den dynamiske informasjonen som tilbys av WordPress, i stedet for den statiske informasjonen i temaet. Vår nåværende header.php-fil ser slik ut til nav-bar-tile-taggen:

   Blind tro      
 
 
Blind tro
 Bare et annet tema av Dan Walker

Først av alt, la oss fikse de manglende stilarkene. Vi bruker to verdier fra bloginfo; stylesheet_directory og stylesheet_url. Nettadresseværdien er en direkte kobling til style.css, mens katalogen lister katalogen style.css ligger i. Det er viktig å huske at WordPress-funksjoner som dette ikke legger til et skråstrek til verdier.

Erstatt stilarklinjene med følgende:

Vårt tema har nå riktig sammenhengende stilark. Neste opp, mens vi er i topptekstfilen, la oss endre bloggtitlen, slagordet og lenken.

De tag har ikke bare bloginfo-egenskapen som representerer navnet på bloggen, vi kan også legge til en annen funksjon; wp_title (). Denne funksjonen returnerer tittelen på siden eller innlegget som for øyeblikket blir vist, prepended med ". For å slå av" før sidens navn, endre bare parentesene til wp_title () til wp_title (??, true);</p> <pre><title><?php bloginfo('name'); ?> <?php wp_title(); ?>

Dette vil produsere noe i tråd med;

Lokal test blogg >> Hei verden

Nå kan vi bare endre logo / titteltekst, slagord og URL ved hjelp av følgende bloginfo () egenskaper;

">

Vår side skulle nå se slik ut;

Nå tar vi en titt på index.php-filen. Dette er filen som kalles som standard og skal kunne vise lister over innlegg på forsiden, kategorier, arkiver og søkeresultater - eller en feilmelding hvis ingen finnes. Åpenbart kan hver av disse forskjellige lister inneholde variable mengder innlegg, vi kan jobbe med dette ved å bruke noe i WordPress kjent som "The Loop".

The Loop

WordPress viser ut hvilke innlegg som skal vises før indeksfilen utføres - etter hvert lager vi et tema, og temaet kommer sist, da det bare er en måte å vise utdata på. Ved hjelp av noen innebygde funksjoner kan vi unngå å gjøre komplekse PHP-løkker med konstant kontroll for gyldige data - dette aspektet av WordPress-temautvikling gjør prosessen mye lettere og forårsaker mindre hodepine.

Først av alt, la oss se på vår poststruktur;

 
 
Hei Verden!
 
 
 postet på 6. februar 2011 av Dan under Uncategorized 
 
 1 kommentar 
 
 
Kjæresten er dum og sitter, og er en avgjørende forfatter. Etiam malesuada som i orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Ikke noe annet. Praesent på dolor arcu. Nulla porttitor dukker bare på kjøretøy fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi Nulla Nisl, blandet med deg selv, selvfølgelig. Nulla lectus ante, pellentesque tempor pretium eu, porttitor vitae mi. Nunc et dolor eget purus ultricies sollicitudin. Phasellus luctus tincidunt lobortis. Nunc ac aliquam leo. I tortor orci, auktor non condimentum ultricies, hendrerit et nunc. Nam neque est, laoreet at rhoncus vitae, porttitor at nulla. Maecenas dignissim sagittis massa non ultrices. Kras eros quam, ultrices eu iaculis eu, egestas eget justo. Vivamus diam sapien, volutpat egen luktus nec, lacinia non quam. Duis suscipit nunc eget neque congue pretium. Det er ikke mulig å utelukke dette. Nunc en ligula non metus luctus molestie.
 
 Les mer

Siden vi vet hvordan strukturen i et innlegg ser ut og vi har en kopi med dummyinformasjon, kan vi erstatte dummyinformasjonen med noen funksjoner som returnerer faktiske postverdier. Det er flere opplysninger du kan vise med hvert innlegg, for eksempel;

Når noen av disse funksjonene kalles i sløyfen, viser de de riktige opplysningene for at den nåværende posten sløyfes gjennom.

Bruk koblingen ovenfor (eller bare funksjonene som følger med før lenken), og prøv å erstatte dummyinnholdet selv med de riktige utskiftingsfunksjonene før du går på.

Den riktige koden skal se slik ut;

 
 
">
 
 
 postet på  av  under  
 
 яя ',''); ?>

Det er noen biter du kanskje ikke har vært i stand til å gjøre, la oss se på dem.

Først av alt, når du viser kategorier, liker WordPress å skrive ut en standardstil med en liste. For å overstyre dette kan vi gi vår egen separator, som i vårt tilfelle er bare et komma og et mellomrom.

 
Neste opp for å vise en redigeringslink, etterfulgt av hvor mange kommentarer et innlegg har, kan vi bruke en funksjon som lager koblingen og kan skrive ut tre forskjellige stater for; ingen kommentarer, enkeltkommentar og flere kommentarer (hvor prosentandelstegnet er plassholderen for kommentartellingen).
 
 
Endelig har vi en enkel om setning for å bestemme hvilken type innhold som skal vises. Hvis vi bruker the_excerpt (), vises bare et utdrag av innholdet, hvis vi bruker the_content (), så vises alt innholdet (eller til en <--more--> vises i innholdet). På en søke- eller arkivside er det ikke viktig å vise hele artikkelen - akkurat nok til å få kjernen - så vi bruker the_excerpt ().
 
Nå for å få denne koden til å fungere, må vi levere det med innlegg, og for å gjøre det må vi sette det inn i løkken. Vår index.php-fil bør for tiden ligne dette;
 
 
 
">
 
 
 postet på  av  under  
 
 яя ',''); ?>

Sett denne koden etter header-funksjonen;

 
Ikke funnet
 
Unnskyld, men det ble ikke funnet noen resultater for det forespurte arkivet. Kanskje søker vil hjelpe deg med å finne et relatert innlegg

og denne rett før bunntekstfunksjonen;

Laster opp WordPress-bloggen, bør nå se noe slikt ut;

Nå vil vårt tema vise en liste over WordPress-innlegg i henhold til hvor mange skal vises (endret under generelle innstillinger i Dashboard). Men hva om det er flere innlegg? Hva om bloggen inneholder 6 innlegg, men bare viser 5? For å bekjempe dette må vi legge til enkle neste / forrige eller nye / gamle linker.

Selvfølgelig er det ikke noe poeng å vise disse linkene hvis det ikke er noen nyere eller eldre innlegg å hoppe til da det er misvisende, derfor bruker vi følgende kode etter løkken;

max_num_pages> 1):?> 
 
  
Ingen nyere / eldre innlegg

Next_posts_link () og previous_posts_link () vises bare når de trengs, ved hjelp av teksten som er oppgitt i den første parameteren. Selvfølgelig er det mulig å fjerne if-setningen og bare bruke følgende to linjer;

Men ved å bruke if-setningen ovenfor, har vi muligheten til å vise en melding hvis det ikke er noen sider å hoppe over til, noe som kan gjøre ting mindre forvirrende for brukeren (noe som alltid er bra).

Vår fullførte index.php-fil skal se slik ut;

   
Ikke funnet
 
Unnskyld, men det ble ikke funnet noen resultater for det forespurte arkivet. Kanskje søker vil hjelpe deg med å finne et relatert innlegg
   
 
">
 
 
 postet på  av  under  
 
 яя ',''); ?> 
 
      
 
  max_num_pages> 1):?> 
 
  
Ingen nyere / eldre innlegg

Enkelt innlegg

Vi har nå en arbeidsindeks, men nå trenger vi en måte å vise enkelt innlegg på. På grunn av enkelheten i vårt design er vår single.php-fil og index.php nesten like, forskjellen er at vi ikke trenger neste / forrige koblinger i single.php, men vi trenger kommentarer. Koden for single.php er som følger;

   
Ikke funnet
 
Unnskyld, men det ble ikke funnet noen resultater for det forespurte arkivet. Kanskje søker vil hjelpe deg med å finne et relatert innlegg
   
 
">
 
 
 postet på  av  under  
 
 яя ',''); ?>

Som du kan se, har ikke mye endret seg, bortsett fra rundt bunnen av filen. Vi har rett og slett fjernet koden for koblingene og lagt til en ny funksjon kalt comments_template (). Parametrene for denne funksjonen er bare filen som skal lastes (comments.php hvis den er tom eller som standard), og om du vil sortere kommentarer etter type (standard til falsk).

Som du sikkert har gjettet, er filen som håndterer kommentarer, comments.php - den er lagret i en egen fil, slik at vi kan bruke den på både single.php og page.php alike.

Side

Filen for å vise en side er nesten identisk med den enkelte postfilen, med unntak av at informasjon om tidspunktet for innlegg, forfatter og så videre blir fjernet. Dette betyr at sidefilen ser slik ut;

   
Ikke funnet
 
Unnskyld, men det ble ikke funnet noen resultater for det forespurte arkivet. Kanskje søker vil hjelpe deg med å finne et relatert innlegg
   
 
">

Navigasjon

Den siste delen vi legger til i dag er navigasjonen oppe (som det er så enkelt)! Åpne opp header.php og erstatt nav-bar-flis divisjon med dette;

  'main_navigation' = '' nav-bar-content ',' menu_id '=>' navigasjon ',' container '=> false,' theme_location '=>' primærmeny ',' show_home '=>' 1')); ?>

Funksjonen wp_nav_menu spytter ut en liste over sider, men det tar også argumenter i form av en matrise. Argumentene vi har gitt, i rekkefølge, er;

CSS vi bruker er kodet for å tilpasse seg hvordan WordPress spytter ut en navigasjonsliste, er det viktig å vurdere hvordan en liste vil bli utgitt i kode ved WordPress når du koder et design.

Vår WordPress-installasjon burde nå se slik ut;

Neste gang?

Neste gang vil vi se på å legge til et funksjonelt sidebar som er widget klar, dynamiske posttyper, egendefinerte felt og innpakning av de siste få elementene i temaet!

Hvis det er noe du var usikker på i dette innlegget, eller hvis du bare har spørsmål, vær så snill å legge igjen en kommentar nedenfor. For de med spørsmål eller bare de som ønsker å vite mer, er WordPress Codex gullmine av informasjon for alle funksjonene og så videre som WordPress bruker.

Kode
×