Slik Tilpasser Du Et WordPress-Tema med CSS
når du vil lære å tilpasse Et WordPress-tema med CSS, er en av de første tingene du trenger å vite hvordan du redigerer filer i selve temaet.
prosessen for redigering av temafiler er effektivt det samme om du ønsker å tilpasse CSS eller HTML, og i tidligere opplæringsprogrammer i denne serien har vi allerede dekket denne prosessen, med det formål å endre HTML.
for å unngå å regummiere samme bakken, ta en titt på «Hvordan Redigere HTML i Et WordPress-Tema» og «Hvordan Installere WordPress Lokalt med XAMPP» for å lære om:
- Redigere filer gjennom tema editor
- Laste ned og laste opp filer via FTP eller ekstern tilkobling
- Hvorfor du bør vurdere å gjøre endringer i et barn tema
- Redigere offline via XAMPP
med metoder for redigering tema filer allerede dekket, i denne opplæringen vil vi holde fokus på hvordan du redigerer css I WordPress ved å lære om disse emnene:
- hvordan legge til tilpasset CSS gjennom theme customizer
- hvordan identifisere stilark(er) et tema bruker
- hvordan identifisere HVILKE CSS må endres, og hvor, for å tilpasse en bestemt del av et tema
Merk: denne artikkelen forutsetter at du har en grunnleggende kunnskap OM CSS, men ikke nødvendigvis OM HVORDAN DU kan TILPASSE CSS.rediger css i wordpress.
Premium WordPress Temaer Og Plugins
før vi begynner, ikke glem at du kan utforske tusenvis Av WordPress temaer På ThemeForest Og WordPress plugins På CodeCanyon. Kjøp Disse WordPress-temaene Og pluginene av Høy Kvalitet og forbedre nettstedopplevelsen for deg og dine besøkende.
Hvordan Redigere CSS I WordPress Theme Customizer
WordPress Har et eget område der Du kan legge TIL DIN egen CSS-kode. Denne koden vil bli lastet til rett tid for å sikre at den overstyrer standard styling av temaet, og ved hjelp av denne tilnærmingen gjør det ingen direkte endringer i temafiler.
i venstre sidemeny i WordPress admin panel gå Til Utseende > Tilpass:
Dette vil ta deg temaet tilpasning området, hvor du kan klikke På menyelementet Ekstra CSS:
et stort felt vil vises, der du kan legge til tilpasset CSS du liker:
Lagre endringene dine ved å klikke på Den blå Publiser-knappen øverst i venstre sidefelt når du er ferdig med å legge til egendefinert kode.
Hvordan Identifisere Et Tema Stilark (er)
Hvis du ikke vil bruke Additonal CSS-området i Theme Customizer, og i stedet vil redigere tema CSS direkte, trenger du en måte å finne ut hvilke filer et tema faktisk bruker til styling.
i de fleste tilfeller vil temaer bruke standardstrukturen For WordPress og ha en fil som heter » style.css » i temaets rotkatalog. Faktisk er dette et viktig tema fil slik at du alltid vil finne det i noen tema.
Men Når du åpner den for redigering, kan du finne den tom for kode, og utvikleren laster styling fra ellers hvor i temaet. Eller du kan til og med finne at de laster inn flere stilarkfiler.
det er to måter å sjekke hvilke stilark som brukes av et tema.
Inspeksjon Av Hodekode
den første metoden er å inspisere <head> koden til temaet. Du kan gjøre dette ved å høyreklikke hvor som helst på siden og velge Vis Sidekilde, og deretter finne <head>...</head> – kodene.
Mellom disse kodene, se etter <link>elementer som også har rel='stylesheet'. Så se for å se hvilke av dem som kommer fra temaets katalog. Nettadressene til stilarkene vil fortelle deg hvor i temastrukturen for å finne dem.
Merk at hvis du kjører et plugin som kombinerer og minifiserer alle nettstedets stilark i en fil, vil denne teknikken ikke fungere, fordi ALT du vil se ER NETTADRESSEN til den ene filen. I stedet bruker du teknikk to, sjekker funksjonsfilen.
Kontrollerer Funksjonsfilen
når et tema bruker et stilark, må Det fortelle WordPress hvilken fil Den vil bruke, gjennom en funksjon som heter wp_enqueue_style(). Dermed kan vi se nøyaktig hvilke stilark (er) temaet laster ved å finne bruken av denne funksjonen.
Hvert tema har en fil som heter » funksjoner.php » ligger i sin rotkatalog. Utnyttelse av funksjonen wp_enqueue_style() er vanligvis i denne filen, så åpne den og begynn å søke etter funksjonsnavnet.
når du finner forekomster av wp_enqueue_style() – funksjonen, ser du mellom parentesene etter den andre parameteren, dvs. tekstbiten etter det første kommaet. Denne teksten viser deg plasseringen av stilarket. Eksempelvis:
wp_enqueue_style('main-style', get_template_directory_uri() . '/css/mainstyle.css');
i koden ovenfor er den andre parameteren:
get_template_directory_uri() . '/css/mainstyle.css')
dette forteller oss at stilarket er i et tema underkatalog kalt «css», og at filnavnet er «mainstyle.css».
Hvordan Identifisere HVILKEN CSS Som Skal Endres
når du vet hvordan du legger til ELLER redigerer TEMA CSS, er den neste tingen å lære hvordan du finner ut hvilken kode du faktisk trenger å endre.
den beste måten å gjøre dette på er å bruke utviklerverktøyene i nettleseren din, ideelt Enten Chrome eller Firefox på grunn av kvaliteten på verktøyene sine.
La oss for eksempel si at du vil endre skriftstørrelsen på innleggstitlene dine. Høyreklikk på en av innleggstitlene og velg Inspiser-alternativet:
Dette vil åpne Utviklerverktøy-panelet. Se Etter en egenskap font-size i Kategorien Stiler.
hvis du ikke ser en, kan nettleseren vise deg et overordnet eller underordnet element, så prøv Å klikke på nærliggende elementer i Kategorien Elementer til du finner et element som både nøyaktig fremhever formen på posttittelteksten og har en egenskap font-size :
nå, i Kategorien Stiler, prøv å endre verdien for egenskapen font-size. Hvis du ser tekstendringsstørrelsen i nettleservinduet, vet du at DU har funnet riktig CSS.
for å lære hvor I stilarket DENNE CSS er, se øverst til høyre på stedet der du nettopp redigerte font-size – verdien. Du bør se et filnavn, deretter et kolon, deretter et tall.
filnavnet forteller deg hvilken stilark koden er i, og nummeret etter kolon forteller deg hvilken linje du vil finne den koden. For eksempel viser bildet ovenfor kode fra » stil.css » fil på linje 4054. Hvis du redigerer temaet stilark direkte, kan du nå åpne det, gå til linjenummeret i spørsmålet, og endre CSS.
hvis Du jobber I DET Ekstra CSS-feltet I Theme Customizer, eller i et barntema, må du også målrette mot samme velger som den opprinnelige CSS, slik at du kan overstyre den med din egen styling.
Tilbake i utviklerverktøyene for nettleseren, se etter velgeren som er over egenskapen font-size du nettopp endret. Det er til venstre for stilarkfilen og linjenummerspesifikasjonen vi nettopp så på.
Kopier hele velgeren og lim den inn i den egendefinerte koden, og bruk den til å målrette den endrede font-size – verdien riktig.
Sjekk Alltid For Bakt Inn Tema Alternativer
før du går til bryet med å tilpasse CSS, alltid sjekke I Tema Customizer for alternativer utvikleren kan ha allerede bakt inn i temaet.
Temaer har ofte ganske omfattende tilpasningsalternativer som ikke krever tilpasset kode. Så, før du redigerer NOEN CSS, kan du spare deg mye TID ved å se om det allerede er en trykknapp måte å gjøre endringen du trenger.
Slik Tilpasser Du Et WordPress-Tema Trinnvis
Nå som vi har snakket om hvordan du tilpasser ET WordPress-tema CSS og HTML, kan du føle deg litt usikker på hvor du skal begynne. Så la oss koke ting ned til en grunnleggende liste over trinn for å følge:
- Sjekk Theme Customizer for å se om det allerede er et alternativ tilgjengelig som kan lette endringen du vil gjøre
- Hvis Ikke, og du må legge til noen enkle tilpassede CSS, bruk EKSTRA CSS-feltet i Theme Customizer
- hvis du trenger å gjøre mer omfattende tilpasninger TIL HTML eller CSS, bør du vurdere å gjøre dem i et barntema
- for å gjøre små endringer direkte til tema editor
- for mer i dybden endringer direkte til et tema, bruke enten ftp, en ekstern tilkobling, eller arbeide helt offline MED XAMPP
- når du har valgt din redigeringsmetode, identifisere temaets stilark (er) ved å inspisere nettstedets
<head>kode eller ser i temaets «funksjoner.php » for bruk av funksjonenwp_enqueue_style() - Finn de spesifikke linjene I CSS du må endre, og deres relaterte velgere, ved Å Bruke Inspiser-funksjonen Til Chrome eller Firefox utviklerverktøy
når du graver inn i alt ovenfor og blir kjent, begynner Du å se hvor tilpassbar WordPress er.
før du vet ordet av det, vil du være å lage dine egne helt originale barn temaer og lage design alle dine egne.
og det skjer bare at læring «Hvordan Lage Et Barntema I WordPress» er neste opplæring som kommer opp i denne serien. Følg med!