WordPress blir raskt et husholdningsnavn hvis det ikke allerede er det. Det er overalt, denne godartede skjønnheten, som driver noen av de beste nettstedene og webappene verden noensinne har sett. Det er en premiere CMS- og bloggplattform som ikke bare er utrolig allsidig, men også utrolig enkel å lære og bruke. Hvorfor ellers ville WordPress vokse i popularitet hver dag som går?


Men det du ser på overflaten når du setter opp og lanserer WordPress er bare en liten brøkdel av det som skjer bak kulissene. Faktisk er det vakre brukergrensesnittet vi alle elsker, ikke noe i forhold til aktiviteten bak kulissene. Det jeg mener er at WordPress kjører på to noe kompliserte webteknologier kjent som PHP og MySQL.

Andre teknologier som spiller inn inkluderer JavaScript, det er nær kusine jQuery, CSS og HTML. WordPress-temaer (og til og med plugins) er hovedsakelig skrevet i PHP, og er avhengige av at MySQL-databaser kjøres. De er også avhengige av de nevnte webteknologiene. Alle disse teknologiene må fungere sammen.

Nå som nybegynner, forstår du kanskje ikke at for at WordPress-plattformen, temaene og pluginene skal fungere unisont, bruker utviklere et sett med standardiserte koder, ellers kjent som PHP-koder. Det er disse kodene vi beskriver i dagens innlegg, og viser deg hvordan de er nyttige. Vi vil presse inn noen eksempler et sted her inne for godt mål, så gjør deg klar til å ta deg en tur på temabyggeturen din!

Tema Anatomi

anatonmy-of-a-wordpress-tema

Et WordPress-tema er rett og slett ikke noe mer enn bare flere PHP-filer som er koblet sammen. Den leveres med en CSS-stilarkfil som er ansvarlig for hvordan temaet ditt (og nettstedet) ser ut. Tilbake til det grunnleggende er et WordPress-tema bare et par PHP-filer. Over er et øyeblikksbilde av et flott tuts + jukseark for anatomi av et WordPress-tema. For å lage et WordPress-tema, trenger du følgende filer:

  • header.php– Denne malfilen inneholder overskriftsinformasjonen, som vises i seksjonen, og før åpningen stikkord. Her legger du til metadata, nettstedstittel og lenker til CSS stilark blant andre.
  • index.php – Dette er hoveddelen mal for WordPress-temaet (eller nettstedet). Dets eneste formål er å sette sammen de andre filene ved å inkludere dem ved hjelp av malkoder (mer om malkoder på et øyeblikk).
  • sidebar.php – Dette er sidefeltet. Du kan plassere widgets, kategorier, ekstra menyer, søkeskjema og alt annet du liker
  • footer.php – Dette er bunntekstdelen. Legg til informasjon om copyright, RSS-lenker, widgeter, koblinger, sosiale ikoner osv
  • page.php – Hver gang du oppretter en side på ditt WordPress-baserte nettsted, er dette malen som er ansvarlig
  • single.php – Denne malfilene inneholder et enkelt blogginnlegg
  • comments.php – Malen som er ansvarlig for dem kommenterer
  • 404.php – Malen som vises når leseren din møter den beryktede 404-feilen
  • search.php –  Tilbyr leserne dine sjansen til å finne innhold på ditt WordPress-nettsted
  • searchform.php – Du trenger et søkeskjema for å tilby ovennevnte funksjonalitet, nå vil du ikke?
  • archive.php – Fordi å finne innhold du publiserte i 2008, ikke burde være noe problem
  • features.php – Plasser alle spesialfunksjoner, og til og med tilpassede plugins her. For kompatibilitet på tvers av temaer anbefales det imidlertid å legge til tilpasset kode som frittstående plugins. Du kan legge til ekstra menyer, aktivere widgets og så mye mer. Denne filen gir deg så mye kraft til å snu WordPress-nettstedet / temaet, uansett hvilken måte du vil.
  • style.css – Dette er ikke en PHP-malfil som sådan. Men det er filen der du legger til CSS-stiler for å kontrollere estetikken. Det følger også med informasjonsoverskriften for WordPress-temaet ditt.

Uten tvil kan du bygge et tema med færre maler, men vi vil ikke anbefale å gjøre en vane ut av det. Tross alt trenger du bare de over ti filene for å lage et standard WP-tema. Tretten er ikke en stor figur, er det vel? I et nøtteskall kan din index.php se ut som:



// Sett inn hovedinnhold her, inkluder loopen



Når vi går videre, la oss snakke om et kjipt kodebit som heter løkken.

Sløyfen

I noen av våre forrige innleggsserier, for eksempel den populære WordPress-opplæringen: Hvordan lage et WordPress-tema fra HTML, har vi nevnt løkken, om enn i forbifarten. Så hva gjør sløyfen til det populære utdraget det er? Uten dette spesielle koden, må du kode inn hvert innlegg, sammen med utdragene, i WordPress-temaet. Du vil gjøre dette hver gang du la ut en ny artikkel.

Innsatsen og tiden du kaster bort ville gjort deg blå og stiv. Det karbonavtrykket du ville etterlate deg – etter å ha jobbet ditt unnskyldte liv i hjel – ville rive et hull på størrelse med tolv Yankee-stadioner i ozonlaget. Vel, jeg strekker fakta (eller mangel på dem) for mye, men du ville tenkt deg hvis du skulle kode hvert innlegg på ditt WordPress-nettsted manuelt.

Sløyfen er en livredder. Bare kast følgende kodestykket uansett hvor i WordPress-malfilene dine, så viser den alle innlegg du noen gang har opprettet:

Vi bruker vanligvis sløyfen i index.php for å vise en liste over innlegg, men gjerne eksperimentere; legg det til der du vil liste innleggene dine. Legg til egendefinerte HTML- og PHP-koder i løkka for å tilpasse innleggene dine som du synes passer. Apropos koder, hva som er tilgjengelig i WordPress?

Inkluder tagger

wordpress-tags

Mal inkluderer tagger er ganske enkelt PHP-koder du bruker i en hvilken som helst malfil for å inkludere (eller rettere sagt) andre malfiler fra WordPress-temamappen. Dette er hva vi snakker om:

  • – Bruk dette i index.php for å ringe (eller inkludere) header.php-filen. Den vil hente header.php og vise innholdet i index.php – det er det å inkludere en fil handler om.
  • – Inkluderer sidebar.php
  • – Inkluderer footer.php-malfilen
  • – Rask quiz: Hva tror du dette inkluderer taggen??

Mal Bloginfo Tagger

Det er en annen kategori maler-koder som vi ganske enkelt vil kalle bloginfo-koder. De spiller en rolle, som er å hente informasjon om WordPress-nettstedet ditt fra databasen. Dette er hovedsakelig informasjonen du leverer til WordPress-nettstedet ditt i administrasjonsområdet ditt via Brukerprofil og Innstillinger -> Generelt. Når informasjonen er hentet fra databasene dine, vil disse kodene vise den samme på nettstedet ditt som du plasserer dem.

Du kan endre strukturen på bloginfo litt, slik at du i stedet for bare å vise informasjonen som er hentet, kan bruke den (informasjonen) andre steder i PHP-koden. Hvor praktisk? Mer om det om et øyeblikk. Her er de vanligste bloginfo-kodene:

  •  – Dette viser tittelen på WordPress-bloggen / nettstedet ditt
  • – Denne malkoden viser nettadressen til bloggen din
  •  – Dette viser beskrivelsen, eller rettere sagt taglinjen, til bloggen din.
  •  – Viser tegnsettet som brukes til å kode nettstedet ditt. Standard er UTF-8
  •  – Dette viser URL til CSS-stilarket til det aktive temaet ditt
  •  – Viser WordPress-versjonen du bruker
  •  – Viser språket i WordPress
  •  – Viser URL for RSS 0.92-strømmen
  • – Viser URL for RSS 2.0-feeden

Det er flere andre bloginfo-tagger du kan bruke til å forbedre WordPress-temaet. Nå om den lille bloginfo-modifikasjonen vi snakket om for et par sekunder siden. Så langt har vi brukt La oss endre dette til: . Tillat meg å fordele parametrene:

  • $ showet  Dette er nøkkelordet du bruker for å navngi informasjonen du vil hente fra databasen. Eksempler inkluderer ‘navn’, ‘url’, ‘beskrivelse’, ‘admin_email’ osv
  • $ filter – Dette lar deg bare filtrere informasjonen som er hentet. Som standard er den satt til “rå”, som bare betyr at verdien til $ show returneres som den er. Hvis du setter dette til “visning”, vil verdien av $ show føres først gjennom wptexturize () -funksjonen. Ikke svette om dette for øyeblikket.

Her er et eksempel: La oss anta at vi vil hente og vise taglinjen din (nettstedsbeskrivelsen) som ser ut som “Beste Premium WordPress-temaer”. Vi vil først hente denne informasjonen ved å bruke denne taggen …

… som laster nettstedbeskrivelsen til $ site_description. For å vise nettstedbeskrivelsen på nettstedet ditt, bruk denne:

Dette gir deg: Taglinjen din er: Beste Premium WordPress-temaer

Merk: Det er mange andre typer mal tagger som lar deg oppnå så mye mer med WordPress-nettstedet ditt. De er klassifisert i forskjellige sett, nemlig generelle koder, forfatter tags, legg inn miniatyrkoder, kategorikoder, og link tags blant andre. Du kan til og med bruke dem inne i løkken, så ja, du burde ha det moro.

Tema stilark

Vi nevnte style.css tidligere. Igjen, hvorfor er style.css-fil viktig? For det første gir den detaljer om temaet ditt. Denne informasjonen går inn på stilarkhodet, som hjelper deg med å identifisere temaet under valg i administratorområdet. Som sådan skal ingen to temaer ha de samme detaljene i stilartitteloverskriftene. Her er et eksempel på en stilarkhode:

/ *
Tema Navn: Tema Navn
Tema URI: https://www.yoursite.com/yourtheme
Forfatter: Ditt navn
Forfatter URI: https://www.yoursite.com/
Beskrivelse: Dette WordPress-temaet er 100% responsivt bla bla...
Versjon: 1.0
Lisens: GNU General Public License V2 eller nyere
Lisens URI: http://www.gnu.org/licenses/gpl-2.0.html
Merkelapper: gull, en-kolonne, venstre sidefelt, responsivt rutenett osv
Tekstdomene: ditt navnet
* /

Denne informasjonen kommer først (eller helt øverst) i style.css. Annet enn det, sørg for at du:

  • Følg CSS-kodingsstandarder
  • Bruk gyldig CSS
  • Minimer CSS
  • Legg til utskriftsvennlige stiler
  • Style alle HTML-elementer

Siste tanker

Dette juksearket er bare en rask ressurs som kan hjelpe deg å komme i gang når du lærer WordPress temautvikling. Ved å bruke taggene og kodebitene vi har delt her, kan du raskt utvikle et standardtema og forbedre det uten å brekke svette. Selvfølgelig må du fortsette å lære WordPress temautvikling, og for det anbefaler vi WordPress Codex, Tuts+, Threehouse, og ThemeShaper blant anerkjente ressurser.

Annet enn det, kan du gjerne dele dine tips, juksekoder, tekstutdrag eller noe annet du har i bakhodet i kommentarene nedenfor. Vi vil gjerne finne ut hvor eller hvordan du lærer om WordPress. Ser deg rundt!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me