Det er mer enn en måte å legge til tilpasset CSS-kode til en WordPress-blogg.
I dag vil jeg forklare styrkene og svakhetene ved de to forskjellige metodene som jeg foreslår for deg, slik at du kan velge den som passer deg best.
Men før, hvis du aldri har installert WordPress Discover Hvordan installere en WordPress blogg 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din
Så tilbake til hvorfor vi er her.
Slik finner du varene du vil tilpasse
Når du har isolert delen av ditt WordPress-tema du vil endre (for eksempel tittelen på en artikkel), må du gjøre det bestemme CSS-egenskaper brukt på den slik at du kan gjøre de nødvendige endringene. Heldigvis er ikke denne prosessen komplisert.
CSS bruker velgere for å bestemme hvilke elementer som vil oppleve de forskjellige spesifikke endringene. Vanligvis gjøres dette ved å spesifisere en " klasse "Av et element (eller DOM-element). Imidlertid kan CSS også brukes til å definere utformingen av et helt element (for eksempel merkelappen " ") eller ved å bruke identifikatoren til taggen.
Heldigvis tillater populære nettlesere oss å se de forskjellige velgerne og deklarasjonene som brukes på sideelementer med noen få klikk. På Google Chrome, for eksempel, trenger du bare å markere en bestemt del av dokumentet og deretter høyreklikke, som i følgende eksempel.
Ved å klikke på Inspiser elementet I rullegardinmenyen som vises, vil du se HTML-koden til siden i et nytt vindu med det inspiserte elementet uthevet i vinduet til høyre (eller under). Du kan se et eksempel nedenfor.
Tekstene til disse elementene (eller attributter) Uthevet med rødt viser deg de forskjellige spesifikke stilene som gjelder for varen du hadde fremhevet ved å inspisere koden.
Les også: Hvordan legge til en rullegardinmeny med CSS i Visual Editor
For eksempel elementet " skriftstørrelse Forteller deg at skriften som vises i det uthevede elementet er størrelse til 13 piksler. Beskriverne er omgitt av seler og er gitt av selgere. Navnet på den tilsvarende stilarkfilen vises til høyre for velgerne.
Når du har denne informasjonen i tankene, blir det enkelt å endre stilen. Hvis du for eksempel vil endre skrifttypen fra 13px til 14px, leter du bare etter stilarkfilen, velgeren som tilsvarer den av det uthevede elementet. Det er generelt i denne formen: (« # .block-plugin-innhold informasjon"). Deretter kan du endre de forskjellige verdiene til attributtene.
Du kan gjøre det samme på Firefox, bare markere en bestemt del av siden, høyreklikk på elementet og velg deretter " Inspiser elementet I menyen som vises.
Hvordan WordPress og CSS fungerer sammen
Det er et faktum at WordPress-temaer skapes annerledes. Så husk at din WordPress tema samsvarer kanskje ikke 100 % med det du leser i de følgende avsnittene.
Når det er sagt, er det mer enn sannsynlig at CSS som brukes på WordPress-bloggen din ligger i en fil som heter " style.css ". Dette er det vanlige navnet på et stilark for alle typer nettsteder, ikke bare WordPress.
Se også: Hvordan endre størrelsen på Gravatar-bilder på WordPress
Nå er det på tide å gå gjennom de forskjellige redigeringsprosessene.
Metode # 1: Redigere stilfilen til ditt WordPress-tema
Det er to måter å få tilgang til temaets style.css-fil.
Den første er å gjøre det fra WordPress-oversikten. På menyen til venstre velger du menyen " Apparence "Og da" Publisher '.
Når du er på redigeringssiden, vil du se en liste over filer på en loddrett linje på høyre side av siden. Bla gjennom listen over filer. Du vil se en fil som heter " stilark style.css Nederst på siden.
Hvis du klikker på navnet til denne filen, blir den lastet inn og vises i redigeringsprogrammet i midten. Du kan bruke dette skjermbildet til å redigere filen.
Den andre måten å finne stilarket på er å bla gjennom vertsleverandørens operativsystem og finne filen i WordPress tema (bruker en FTP-klient). Den nøyaktige plasseringen vil variere avhengig av hostingleverandøren din. I eksemplet vist nedenfor, navnet på nettstedet (i vårt tilfelle thecare) Er en mappe under public_html mappen.
Siden WordPress er installert, kan du se wp-content-mappen i "thecare". Undermappen wp-content er en annen mappe som heter " wp-temaer", som er hvor alle WordPress-temaer er installert.
Fra dette nettstedet bruker et tema kalt " Nyhetsbrev », Stilfilen« style.css Ligger i mappen " Parent Nyhetsbrev '.
Metode nr.2: Bruke et plugin for å endre CSS
Kanskje den mest praktiske måten å redigere CSS på WordPress-bloggen din er bruk av en plugin.
En av de viktigste fordelene ved å bruke et plugin ligner på temaet for barn. Ja du oppdaterer WordPress-temaetendringene dine blir ikke overskrevet, da de lagres separat og ikke blant temafilene. Den andre fordelen er selvfølgelig at du ikke trenger å lage et barnetema.
Her er noen premium plugins som du også kan bruke til å endre CSS-koden til din WordPress tema :
1. Gul blyant: Visual CSS Style Editor
Yellow Pencil er en redaktør for visuell stil som du kan bruke med hvilket som helst tema for å tilpasse nettstedet ditt på få minutter (skrifter, farger, animasjoner og mer ...).
Ce WordPress Plugin premium vil lage CSS-stiler av bakgrunn mens du spiller med fargene som om det var et spill. Det var designet for både nybegynnere og erfarne brukere.
Oppdag også vår 5-plugins WordPress for å vise varsler
Ingen kodekunnskap er nødvendig. Imidlertid WordPress Plugin har en god CSS-editor for de som liker å kode. Du kan kode live med denne editoren og tilpasse CSS.
2. Tilpasset JS og CSS for Gutenberg
Le WordPress Plugin premium Custom JS og CSS for Gutenberg vil tillate deg å legge til et ubegrenset antall tilpassede stiler i WYSIWYG-redigereren for WordPress-innlegg og sider. Den er fullt kompatibel med Gutenberg-versjonen av WordPress.
Du kan ganske enkelt lage en ny stil med en brukervennlig CSS-editor. Denne WordPress-pluginen utvider funksjonene til tilpassede felt av nettstedet ditt og gir deg muligheten til å endre dine tilpassede felt med en dynamisk og kraftig personaliseringsmodul. og funksjonaliteten til forhåndsvisning av sanntid av dette WordPress-plugin gjør det veldig behagelig og brukervennlig.
3. SiteOrigin CSS
Det er uten tvil WordPress-pluginet som tilbyr de fleste alternativene i denne listen. Det mest fantastiske med det siste er at det er gratis. Dette WordPress-pluginet er det eneste som ikke finnes i tilpasseren.
Etter å ha installert og aktivert plugin-en, må du navigere til følgende plassering " Utseende> Egendefinert CSS For å få tilgang til CSS-utgaven av pluginet. På denne siden kan du se et tekstredigeringsprogram som ikke tilbyr forhåndsvisning i sanntid.
Les også artikkelen vår om 10 WordPress plugins for å øke salget av nettstedet ditt
For å få tilgang til sistnevnte må du klikke på en av de to knappene som vises til venstre, rett over redigeringsprogrammet. Knappen med et øyeikon vil få frem en visuell CSS-editor som entusiaster vil sette pris på. Ikonet med utvidelsespilene viser en tekstredigerer som vil innebære en mestring av CSS-koder.
4. Enkelt Custom CSS
Enkelt Custom CSS er en av de mest populære plugins.
Oppdag også vår Hvordan gjøre bloggen din rask: administrere CSS- og JS-filer.
Den er installert over 100 000 ganger og har fått en femstjerners rangering.
5. WP Legg til egendefinert CSS
WP Legg til tilpasset CSS er en plugin som lar deg gjøre det endre utformingen av en WordPress-blogg hele eller bare enkeltartikler. Dette er et flott alternativ hvis du er ute etter fleksibilitet i å tilpasse elementer.
Programtillegget har blitt lastet ned over 10.000 4,3 ganger og har for øyeblikket en XNUMX-stjernes rangering.
6. Theme Junkie Custom CSS
Hvis du leter etter en løsning som tilbyr en forhåndsvisning av endringene dine, kan du vurdere å bruke Tema Junkie Custom CSS.
Denne løsningen legger en tilpasset CSS-manager til dashbordet ditt, der du kan legge til dine egne stiler. Det tilbyr også et alternativ til ved hjelp av et barnetema.
Andre anbefalte ressurser
Vi inviterer deg også til å konsultere ressursene nedenfor for å komme videre i grepet og kontrollen av nettstedet og bloggen din.
- 10 WordPress plugins deling på sosiale nettverk
- Hvordan vise egendefinerte felt ut av loopen på WordPress
- 5 WordPress-plugin for å tjene penger på bloggen din med annonser
- Hvordan du kan beskytte dine blogginnhold skrapere
konklusjonen
Her! Det er det for denne opplæringen, jeg håper du vil klare å legge til tilpasset CSS-kode til WordPress-bloggen din på to måter, hvis du har noen commentaires eller forslag, ikke nøl med å fortelle oss i avsnittet forbeholdt disse.
Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Hvis du likte denne artikkelen, nikke nøl med å del på dine favoritt sosiale nettverk.
...
Tusen takk for alle de forskjellige artiklene på siden din !! Det er alltid veldig eksplisitt og forståelig for en nybegynner som meg ... Jeg tror jeg kommer veldig ofte tilbake !!