Der er mere end en måde at tilføje tilpasset CSS-kode til en WordPress-blog.

I dag vil jeg forklare styrker og svagheder ved de to forskellige metoder, som jeg foreslår dig, så du er i stand til at vælge den, der passer bedst til dig.

Men før, hvis du aldrig har installeret WordPress-opdagelse Sådan installeres en WordPress blog 7 trin et Hvordan at finde, installere og aktivere et WordPress tema på din blog 

Så tilbage til, hvorfor vi er her.

Sådan finder du de emner, du vil tilpasse

Når du har isoleret den del af dit WordPress-tema, du vil ændre (for eksempel titlen på en artikel), skal du bestem CSS egenskaber anvendt på det, så du kan foretage de relevante ændringer. Heldigvis er denne proces ikke kompliceret.

CSS bruger vælgere til at bestemme, hvilke elementer der vil opleve de forskellige specifikke ændringer. Normalt gøres dette ved at specificere en " klasse "Af et element (eller DOM-element). CSS kan dog også bruges til at definere layoutet for et helt element (for eksempel tagget " ") eller bruger identifikatoren for tagget.

Heldigvis tillader populære browsere os at se de forskellige vælgere og erklæringer, der anvendes på sideelementer med blot et par klik. I Google Chrome skal du for eksempel bare fremhæve en bestemt del af dokumentet og derefter højreklikke som i eksemplet nedenfor.

Ved at klikke " Kontroller elementet I den rullemenu, der vises, ser du HTML-koden på siden i et nyt vindue med det inspicerede emne fremhævet i vinduet til højre (eller under). Du kan se et eksempel nedenfor.

Teksterne til disse elementer (eller attributter) Fremhævet med rødt viser dig de forskellige specifikke stilarter, der gælder for det emne, du havde fremhævet ved at inspicere koden.

Læs også: Sådan tilføjes en drop down menu med CSS i dit Visual Editor

For eksempel er elementet " skriftstørrelse Fortæller dig, at skrifttypen, der vises i det fremhævede emne, er størrelse til 13 pixels. Descriptorerne er omgivet af seler og efterfulgt af vælgere. Navnet på den tilsvarende stilarkfil vises lige til højre for vælgerne.

Når du har disse oplysninger i tankerne, bliver det let at ændre stilen. Hvis du f.eks. Ønsker at ændre skrifttypen fra 13px til 14px, kigger du blot efter din typografiarkfil, vælgeren, der svarer til den af ​​det fremhævede emne. Det er generelt i denne form: (« # .block-plugin-indhold information"). Du kan derefter ændre de forskellige værdier for attributterne.

Du kan gøre det samme på Firefox, bare fremhæve en bestemt del af siden, højreklik på emnet, og vælg derefter " Kontroller elementet I den menu, der vises.

Hvordan WordPress og CSS arbejder sammen

Det er et faktum, at WordPress-temaer skabes anderledes. Så husk at din WordPress tema overholder muligvis ikke 100 % det, du læser i de følgende afsnit.

Når det er sagt, er det mere end sandsynligt, at CSS, der bruges på din WordPress-blog, er placeret i en fil kaldet " style.css ". Dette er det almindelige navn på et typografiark til enhver type websted, ikke kun WordPress.

Se også: Sådan ændres størrelsen af ​​Gravatar-billeder på WordPress

Nu er det tid til at gennemgå de forskellige redigeringsprocesser.

Metode # 1: Redigering af stilfilen til dit WordPress-tema

Der er to måder at få adgang til dit temas style.css-fil.

Den første er at gøre det fra dit WordPress-dashboard. I menuen til venstre skal du vælge menuen " apparence "Og så" Publisher '.

Når du er på redigeringssiden, vil du se en liste over filer på en lodret bjælke til højre på siden. Rul gennem listen over filer. Du vil se en fil, der hedder " Style.css stilark Nederst på siden.

Hvis du klikker på navnet på denne fil, indlæses den og vises i editoren i midten. Du kan bruge denne skærm til at redigere filen.

Den anden måde at finde stilarket på er at gennemse din hostingudbyders operativsystem og finde filen i WordPress tema (ved hjælp af en FTP-klient). Den nøjagtige placering vil variere afhængigt af din hostingudbyder. I eksemplet vist nedenfor er webstedsnavnet (i vores tilfælde thecare) Er en mappe under public_html mappe.

Da WordPress er installeret, kan du se mappen wp-indhold i "denne pleje". Wp-indholds undermappe er en anden mappe kaldet " WP-temaer", som er hvor alle WordPress-temaer er installeret.

Fra dette websted bruger et tema kaldet " Nyhedsbrev », Stilfilen« style.css Findes i mappen " Forældre Nyhedsbrev '.

Metode nr. 2: Brug af et plugin til at ændre CSS

Måske er den mest bekvemme måde at redigere CSS på din WordPress-blog på brugen af ​​et plugin.

En af de største fordele ved at bruge et plugin svarer til det for børnetemaer. Ja du opdaterer WordPress-temaet, dine ændringer overskrives ikke, da de lagres separat og ikke blandt temafilerne. Den anden fordel er selvfølgelig, at du ikke behøver at oprette et børnetema.

Her er nogle premium plugins, som du også kan bruge til at ændre din CSS-kode WordPress tema :

1. Gul blyant: Visual CSS Style Editor

Yellow Pencil er en redaktør for visuel stil, som du kan bruge med ethvert tema til at personliggøre dit websted på få minutter (skrifttyper, farver, animationer og mere ...).

Ce WordPress plugin premium vil skabe CSS-stile ved baggrund mens du spiller med farverne som om det var et spil. Det var designet til begyndere såvel som erfarne brugere.

Oplev også vores 5-plugins WordPress for at vise underretninger

Ingen kodningsviden er påkrævet. Imidlertid WordPress plugin har en god CSS-editor til dem, der kan lide at kode. Du kan kode live med denne editor og tilpasse din CSS.

Downloade | demo | Web-hosting

2. Brugerdefineret JS og CSS til Gutenberg

Le WordPress plugin premium Custom JS og CSS til Gutenberg giver dig mulighed for at tilføje et ubegrænset antal brugerdefinerede stilarter til WYSIWYG-editoren til dine WordPress-indlæg og sider. Det er fuldt kompatibelt med Gutenberg-versionen af ​​WordPress.

Du kan blot oprette en ny stil med en brugervenlig CSS-editor. Dette WordPress-plugin udvider funktionerne i brugerdefinerede felter på dit websted og giver dig mulighed for at ændre dine brugerdefinerede felter med et dynamisk og kraftfuldt personaliseringsmodul. og funktionaliteten af forhåndsvisning af realtid af dette WordPress-plugin gør det meget behageligt og brugervenligt.

Downloade | demo | Web-hosting

3. CSS SiteOrigin

Det er langt fra WordPress-pluginet, der tilbyder de fleste muligheder på denne liste. Det mest fantastiske ved det sidstnævnte er, at det er gratis. Dette WordPress-plugin er det eneste, der ikke kan findes i tilpasningen.

Efter installation og aktivering af plugin skal du navigere til følgende placering " Udseende> Brugerdefineret CSS For at få adgang til CSS-udgaven af ​​pluginet. På denne side kan du se en teksteditor, der ikke tilbyder live preview. 

Læs også vores artikel om 10 WordPress plugins til at øge salget af dit websted

For at få adgang til sidstnævnte skal du klikke på en af ​​de to knapper, der vises til venstre lige over editoren. Knappen med et øjeikon åbner en visuel CSS-editor, som entusiaster vil sætte pris på. Ikonet med udvidelsespilene viser en teksteditor, som antyder en beherskelse af CSS-koder.

Downloade | demo | Web-hosting

4. Simple Brugerdefineret CSS

Simple Brugerdefineret CSS er et af de mest populære plugins.

Oplev også vores Sådan gør du din blog hurtig: administration af CSS- og JS-filer.

Det er installeret over 100 gange og har modtaget en femstjernet bedømmelse.

Downloade | demo | Web-hosting

5. WP Tilføj brugerdefineret CSS

WP Tilføj tilpasset CSS er et plugin, der giver dig mulighed for det ændre layoutet på en WordPress-blog hele eller bare individuelle artikler. Dette er en fantastisk mulighed, hvis du leder efter fleksibilitet i tilpasning af varer.

Pluginet er downloadet over 10.000 gange og har i øjeblikket en 4,3-stjerneklassificering.

Downloade | demo | Web-hosting

6. Tema Junkie Brugerdefineret CSS

Hvis du leder efter en løsning, der tilbyder en direkte forhåndsvisning af dine ændringer, kan du overveje at bruge Tema Junkie Custom CSS. 

Denne løsning tilføjer en tilpasset CSS-manager til dit dashboard, hvor du kan tilføje dine egne stilarter. Det tilbyder også et alternativ til ved hjælp af et barn tema.

Downloade | demo | Web-hosting

Andre anbefalede ressourcer

Vi inviterer dig også til at konsultere nedenstående ressourcer for at komme videre i grebet og kontrollen af ​​dit websted og blog.

• 10 WordPress-plugins, der deler på sociale netværk
• Sådan viser du tilpassede felter uden for loop på WordPress
• 5 WordPress-plugins til at tjene penge på din blog med annoncer
• Sådan beskytter din blog indhold skrabere

Konklusion

Her! Det er det til denne vejledning, jeg håber, at du formår at tilføje tilpasset CSS-kode til din WordPress-blog på 2 metoder, hvis du har nogen kommentarer eller forslag, tøv ikke med at fortælle os i det afsnit, der er reserveret til disse.

Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

Hvis du kunne lide denne artikel, skal du ntøv ikke med at gøre det del på dine foretrukne sociale netværk. 

...