Gå til hovedindhold

Sådan tilpasses CSS på dit WordPress-websted

Divi: Det nemmeste WordPress tema at bruge

Divi: Det bedste WordPress tema hele tiden!

mere 701.000 downloads, Divi er det mest populære WordPress tema i verden. Den er komplet, nem at bruge og leveres med mere end 62 gratis skabeloner. [Anbefalet]

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

Uanset hvilket WordPress-tema du vælger til dit websted, vil der være andre websteder, der bruger det. Og selv på trods af de mange tilpasningsmuligheder, som mange WordPress-temaer tilbyder i disse dage, kan du gøre dit websted endnu mere unikt.

For at vraiment for at røre ved det visuelle aspekt af dit WordPress-tema, skal du gå ud over standardtilpasningen, der tilbydes af indstillingerne for et WordPress-tema. CSS-tilpasning af din WordPress-blog giver dig mulighed for at ændre udseendet på dit websted for at gøre det virkelig unikt.

Denne tutorial vil se på de mange forskellige tilgængelige metoder til tilpasning af dit websted med CSS, oprette og tilpasse underordnede temaer ved hjælp af WordPress customizer plugins og CSS WordPress plugins.

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 

Lad os derefter vende tilbage til, hvorfor vi er her

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

De fleste WordPress-temaer bruger CSS-kode, der er tilgængelig i en fil, der hedder 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 har en bedre forståelse af, hvad CSS er, og hvordan WordPress-temaer bruger dem, ser vi på de muligheder, du kan bruge til at tilpasse din WordPress-blog, og vi diskuterer 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

Opret nemt dit websted med Elementor

Elementor giver dig mulighed for nemt at oprette ethvert webstedsdesign med et professionelt look. Stop med at betale dyre for hvad du selv kan gøre. [Gratis]

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

Leder du efter de bedste WordPress-temaer og plugins?

Download de bedste plugins og WordPress-temaer på Envato og nemt oprette dit websted. Allerede mere end 49.720.000 downloads. [EXCLUSIVE]

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 vil ændre CSS på din WordPress-blog fuldstændigt, men ikke ønsker at lære CSS, er CSS Hero en fantastisk allround 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 andre WordPress-plugins til at give et moderne look og optimere grebet på din blog eller dit websted.

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 et af de mest kraftfulde WordPress-filhåndterings-plugins 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

Opret nemt din online butik

Download gratis WooCommerce, de bedste e-handels-plugins til at sælge dine fysiske og digitale produkter på WordPress. [Anbefalet]

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 personalized name jewellery, 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.

... 

Denne artikel indeholder 1 kommentar

  1. Hej,

    Jeg vil gerne introducere dig til Anym Live Editor-plugin'et, der muliggør fuld redigering af CSS eller SCSS og Javascript fra enhver WordPress-side, og som tilbyder en live gengivelse af de foretagne ændringer! Derudover er pluginet udstyret med en række forskellige værktøjer, der giver dig mulighed for at interagere med den side, du vil ændre, og fungerer som enhver almindelig IDE (sublim tekststil), men denne gang dedikeret til dit websted WordPress.

Skriv en kommentar

Din e-mail-adresse vil ikke blive offentliggjort. Påkrævede felter er markeret med *

Dette websted bruger Akismet til at reducere uønskede. Få flere oplysninger om, hvordan dine kommentarer data bruges.

Tilbage til toppen
4 aktier
andel2
tweet
Tilmeld2