Hvordan tilpasser du CSS på dit WordPress-websted? Find ud af i denne artikel.

Uanset hvilket WordPress-tema du vælger til din hjemmeside, vil der være andre hjemmesider, der vil bruge det. Og endda på trods af de mange tilpasningsmuligheder, som mange tilbyder WordPress-temaer i dag kan du gøre din hjemmeside endnu mere unik.

For at vraiment For at røre ved det visuelle aspekt af dit WordPress-tema skal du gå ud over den standardtilpasning, der tilbydes af mulighederne eller indstillingerne for et WordPress-tema. CSS-tilpasning af din WordPress-blog giver dig mulighed for at ændreudseendet af dit websted for at gøre det helt unikt.

Denne tutorial vil se på de mange forskellige metoder, der er tilgængelige for dig til at tilpasse dit websted med CSS, oprette og tilpasse børnetemaer ved hjælp af indbyggede WordPress Customizer-plugins og WordPress plugins af CSS.

Men inden du starter, skal du tage dig tid til at tage et kig på Sådan installeres en WordPress temaHvor mange plugins skal jeg installere på WordPress.

Find derefter ud sammen vores liste.

CSS: Det grundlæggende og hvordan WordPress bruger dem

Først og fremmest: CSS står for Cascading Style Sheets, som ikke er klarere end akronymet. Så lad os nedbryde det.

Et typografiark er et dokument, der beskriver stilarter (såsom skrifttype, farver osv.), der skal bruges til præsentation af et andet dokument. I vores tilfælde har vi at gøre med en stil på websiderne.

DelencascadingAf navnet er en del af, hvad der gør det virkelig magtfuldt. Websider kan designes med flere typografiark, som et kaskende vandfald, hvor bundarket tilføjer eller erstatter typografier fra et højere niveau. Dette er vigtigt, fordi den måde, du tilføjer dine stilarter på, overskriver de originale ændringer.

Sådan tilpasses CSS på dit WordPress-websted

Så simpelt som det lyder, kan CSS bruges til at ændre næsten alt på en webside (inklusive layout, farver, skrifttyper og endda animationer).

Lær, hvordan du administrerer dine underretninger ved at opdage Hvordan til at administrere e-mail-meddelelser på WordPress

mest WordPress-temaer bruge en CSS-kode tilgængelig i en fil kaldet style.css. Hvis du åbner denne fil, vil du se en komplet liste over stilregler til dit WordPress-tema. Uanset hvad du gør, rediger ikke denne fil! Opdateringerne overskriver dine ændringer.

Der er flere måder at tilføje en brugerdefineret CSS-kode til dit WordPress-tema, så dine ændringer overlever en opdatering af WordPress-temaet.

Sådan tilpasser du dit WordPress-websted med CSS

Nu hvor du bedre forstår, hvad CSS er, og hvordan WordPress-temaer bruge dem, tager vi et kig på de muligheder, du kan bruge til at tilpasse din WordPress-blog, og vi vil diskutere fordele og ulemper ved hver metode.

hvordan man tilpasser css website wordpress 1

I slutningen af ​​vores arbejde vil du være i stand til at bestemme, hvilken metode der svarer til dit WordPress-tema.

Valgmulighed # 1: Tilpas CSS ved hjælp af et underordnet tema

Hvis du bruger un barn tema for at tilpasse din CSS-kode vil opdateringer til de temaer, vi talte om før ikke længere være et problem. En opdatering af et WordPress-tema vil påvirke temaet "forælder»At lade ændringerne i dit barns tema være intakte. Mange WordPress-temaudviklere forstår nytten af ​​et børnetema.

Oplev Hvornår og hvordan du installerer WordPress i en undermappe

Oprettelse af et børnetema er ret ligetil. Det består i at oprette en mappe på din webhosting, der inkluderer en fil style.css der viser overordnet tema som en skabelon og importfil style.css af overordnet tema (kan du huske betydningen af ​​'cascading' stilark?).

Den codex WordPress har flere oplysninger om oprettelse af børnetemaer.

hvordan man tilpasser css wordpress website 1 1

Når du har oprettet dit barnetema og aktiveret det med succes, kan du begynde at tilpasse dit WordPress-tema. Den hurtigste måde er at redigere din fil style.css, der kan fås på to måder.

Tjek denne artikel for at finde ud af Sådan komprimerer du CSS, HTML og Javascript-filer

Den første er at bruge editoren, der er inkluderet i WordPress-dashboardet, ved at klikke på Udseende> Editor. L 'redaktør viser en liste over filer til højre tilgængelig i temaet (Kun populære filer vises). Din fil style.css vil være helt nederst på listen og klikke på indstillingen stylesheet din fil style.css opkræver.

Du kan tilføje dine ændringer til denne placering og gemme ændringen.

WordPress stilarket

Den anden måde at få adgang til din fil på style.css (en vi anbefale) er at gennemse filerne i din webhosting via a FTP-klient eller en filhåndtering. Undertema-mappen, du oprettede, vil være i " wp-indhold> temaer« . Du vil kunne bruge en teksteditor til at redigere filen style.css.

Mulighed nr. 2: Tilpas CSS fra Customizer

Fra og med WordPress 4.7 kan brugere tilføje tilpasset CSS direkte fra WordPress-adminområdet. Det er super nemt, og du vil kunne se dine ændringer med forhåndsvisning i realtid.

hvordan man tilpasser css website wordpress 2

Først skal du gå til siden Temaer »Tilpas.

Adgang til WordPress-tilpasningen for at tilpasse temaet

Dette starter WordPress-tilpasningsgrænsefladen.

Du vil se forhåndsvisning i realtid af dit websted til højre med en masse muligheder i venstre rude. Klik på fanen Yderligere CSS i venstre rude.

Fanen glider for at vise dig et simpelt område, hvor du kan tilføje din tilpassede CSS. Så snart du tilføjer en gyldig CSS-regel, vil du være i stand til at se den anvendes i realtidsruden på dit websted.

indtast yderligere css-kode og udgiv

Du kan fortsætte med at tilføje tilpasset CSS-kode, indtil du er tilfreds med, hvordan den ser ud på dit websted. Glem ikke at klikke på " Gem og offentliggøre Øverst, når du er færdig.

Bemærk: Enhver tilpasset CSS, som du tilføjer ved hjælp af Customizer, er kun tilgængelig med det pågældende WordPress-tema. Hvis du vil bruge det med andre temaer, skal du kopiere og indsætte i dit nye tema ved hjælp af samme metode.

Valgmulighed # 3: Tilpas CSS ved hjælp af et plugin

Fordelen ved at bruge et plugin til CSS-tilpasning er, at du beholder pluginet, selvom du foretager en WordPress-temaændring. Dette har sine kompromiser, da stilarter ikke kan vises godt på alle WordPress-temaer.

Her er nogle plugins:

1. Brugerdefineret CSS i Jetpack (gratis)

WordPress plugin jetpack  er installeret på over en million WordPress-websteder, og sandsynligvis også din. Det bringer funktioner tilgængelige på WordPress.com til selvhostede websteder, og tilbyder også en modul til CSS tilpasning.

jetpack-former-plugin

Når modulet er aktiveret i Jetpack-instrumentbrættet, vil en tilpasset CSS-editor være tilgængelig, så du kan tilpasse dit WordPress-tema uden at oprette et underordnet tema. Du får adgang til editoren ved at følge denne sti " Udseende> Rediger CSS« .

2. Enkel brugerdefineret CSS (gratis)

Hvis du i stedet vil have en stand-alone løsning, Simple Brugerdefineret CSS er et godt valg. Dette gratis plugin, der bruges på mere end 200.000 websteder med en bedømmelse af 4,9 stjerner, vil helt sikkert hjælpe dig med at personalisere din CSS WordPress-blog.

single-custom-css

Dette plugin kræver ingen konfiguration, du skal bare installere og aktivere pluginet. Gå til "for at ændre din CSS-kode Udseende> Brugerdefineret CSS«  i WordPress-dashboardet. Anvend dine CSS-ændringer i tekstboksen, og gem dine indstillinger, når den er færdig.

3. CSS Hero (fra $ 14 pr. År)

Den sidste mulighed for WordPress-pluginet, som vi ser på i dag, er et premium WordPress-plugin kaldet CSS Hero. Fra 14 $ pr. År for et websted giver dette plugin dig mulighed for at tilpasse dit WordPress-tema ved hjælp af en intuitiv interface.

CSS Hero WordPress Plugin

Designet til at arbejde bedst med snesevis af kompatible WordPress-temaer , CSS Hero giver dig total kontrol over alle elementerne i dit WordPress-tema. For temaer, der ikke er på deres liste, kan du bruge Rocket mode for at aktivere CSS Hero-tilpasning.

CSS Hero fjerner behovet for at forstå CSS-syntaks ved at forenkle interaktion med kode gennem en grænseflade, og dette gælder animationer og overgange. Du kan også få vist dine ændringer i realtid og vende tilbage til en tidligere version.

Find ud Sådan flyttes kommentarer fra en artikel til en anden på WordPress

Hvis du helt vil ændre CSS på din WordPress blog, men ikke ønsker at lære CSS, er CSS Hero en fantastisk mulighed for at tilpasse dit websted, især hvis du bruger et af deres WordPress-temaer.

Mens du ved, at indhold er vigtigt, vil du dog have, at dit websted skiller sig ud fra mængden, selvom du bruger et populært WordPress-tema. Med CSS kan du tilpasse designet af dit websted, så det er helt unikt.

Gå videre ved at opdage Hvordan at give brugerne mulighed for at redigere visse sider

Så der er flere måder at tilpasse CSS til dit WordPress-tema:

  1. et barn tema.
  2. den Customizer.
  3. CSS-plugin.

Oplev også nogle premium WordPress-plugins  

Du kan bruge andet WordPress plugins for at give et moderne udtryk og for at optimere håndteringen af ​​din blog eller hjemmeside.

Vi tilbyder dig her nogle premium WordPress-plugins, der hjælper dig med det.

1. Adning Advertising

WP PRO Advertising System er et WordPress-annoncehåndteringsplugin, der tilbyder 18 strategiske placeringer, der hjælper dig med at vise annoncer på dit websted. Det har også et detaljeret statistikafsnit, hvorfra du kan se effektiviteten af ​​hver annonce.

Tilføjelse af reklame WordPress-plugin

Denne funktion er afgørende, fordi den hjælper dig med at forbedre din kampagne og maksimere din fortjeneste. Dette WordPress Adsense-plugin leveres også med en unik funktion kaldet baggrundsannoncer. Det giver dig mulighed for at vise annoncer som baggrund for dit indhold.

Plus, da det er kompatibelt med plugins som f.eks WPBakery et Slider revolution, kan du vise dine annoncer i form af skydere eller placere dem hvor som helst på dit websted.

Downloade | demo | Web-hosting

2. WP Media File Manager

WP Media File Manager er et WordPress-plugin, der gør det let at organisere mediebiblioteket i en form for hierarki ved hjælp af funktionerne Træk og slip. Det er en af WordPress plugins den mest kraftfulde filhåndtering på CodeCanyon. Du behøver ikke engang at oprette mapper manuelt.

WP Media File Manager WordPress Media Library Mapper Kategorier Upload plugin

Dette WordPress-plugin giver dig mulighed for at uploade tusindvis af filer fra din pcs filhåndtering til webstedet ved automatisk at kopiere hierarkiet i kildemappen. Hvis du vil have den samme fil i forskellige mapper, skal du vide, at du nu har et rigtigt mediebibliotek, der giver denne funktionalitet.

Sig farvel til problemer med at downloade specifikke filtyper, nu skal du bare installere dette WordPress-plugin og lade det hjælpe dig med at administrere dine filer.

Downloade | demo | Web-hosting

3. Menu Hero

Hero Menu er et mega-menu WordPress-plugin. Og selvom det ikke gør meget heroisk, har det alle de nødvendige funktioner til kun $ 19. Ligesom Mega Main Menu er det et plugin, der også indeholder produkter, der findes på CodeCanyon og har i øjeblikket næsten 4500 salg til sin kredit.

Hero Menu Responsive WordPress Mega Menu Plugin

I sektionen med funktioner vil du hurtigt indse, at det er ret nemt at oprette en megamenu. Processen tager kun et par trin. Men derudover vil du bemærke, at plugin er kompatibelt med WooCommerce, tilbyder et responsivt design og en "træk og slip" -grænseflade til at oprette menuerne.

Menubyggeren forbedrer brugen af ​​pluginet og forenkler købers job i høj grad. UI-integration er også et godt stykke arbejde, og UI opfører sig perfekt med andre plugins.

Downloade | demo | Web-hosting

Anbefalede ressourcer

Find ud af om andre anbefalede ressourcer, der hjælper dig med at opbygge og administrere dit websted.

Konklusion

Der! Det er det til denne tutorial. Vi håber, at denne vejledning har vist dig, hvordan du tilpasser CSS på dit WordPress-websted. Tøv ikke med at del med dine venner på dine foretrukne sociale netværk

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.

Hvis du har forslag eller bemærkninger, skal du lade dem stå i vores afsnit kommentarer.

...