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 tema, Hvor 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å 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.
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.
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.
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.
Først skal du gå til siden Temaer »Tilpas.
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.
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.
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.
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.
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:
- et barn tema.
- den Customizer.
- 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.
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.
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.
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.
- Sådan beskytter du en formular med adgangskode i WordPress
- Hvordan at skabe smukke overgange af sider på WordPress
- Sådan bruges WordPress REST API
- Sådan knytter du dit WordPress-websted til Telegram
- Sådan renses WordPress i et par trin
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.
...
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.