Hvordan tilpasser du CSS på WordPress-nettstedet ditt? Finn ut i denne artikkelen.

Uansett hvilket WordPress-tema du velger for nettstedet ditt, vil det være andre nettsteder som vil bruke det. Og selv til tross for de mange tilpasningsalternativene som tilbys av mange WordPress-temaer i dag kan du gjøre nettstedet ditt enda mer unikt.

Hell vraiment For å berøre det visuelle aspektet av WordPress-temaet ditt, må du gå utover standardtilpasningen som tilbys av alternativene eller innstillingene til et WordPress-tema. CSS-tilpasning av WordPress-bloggen din vil tillate deg å endreutseendet til nettstedet ditt for å gjøre det virkelig unikt.

Denne opplæringen vil se på de forskjellige metodene som er tilgjengelige for deg for å tilpasse nettstedet ditt med CSS, lage og tilpasse barnetemaer, ved å bruke innebygde WordPress Customizer-plugins og WordPress plugins av CSS.

Men før du begynner, ta deg tid til å ta en titt på Hvordan installere en WordPress tema, Hvor mange plugins bør jeg installere på WordPress.

Finn deretter sammen listen vår.

CSS: Grunnleggende og hvordan WordPress bruker dem

Først av alt: CSS står for Cascading Style Sheets, som ikke er tydeligere enn forkortelsen. Så la oss bryte det ned.

Et stilark er et dokument som beskriver stiler (slik som font, farger, etc..) som skal brukes til presentasjon av et annet dokument. I vårt tilfelle har vi å gjøre med en stil på websidene.

DelenbrusAv navnet er en del av det som gjør det virkelig kraftig. Nettsider kan utformes med flere stilark, som en foss, med det nederste arket som legger til eller erstatter stiler fra et høyere nivå. Dette er viktig fordi måten du legger til stilene dine vil overskrive de opprinnelige endringene.

Så enkelt som det høres ut, kan CSS brukes til å endre omtrent hva som helst på en webside (inkludert layout, farger, skrifttyper og til og med animasjoner).

Lær hvordan du administrerer varslene dine ved å oppdage Hvordan håndtere e-postvarsler om WordPress

De fleste WordPress-temaer bruk en CSS-kode tilgjengelig i en fil som heter style.css. Hvis du åpner denne filen, vil du se en fullstendig liste over stilregler for ditt WordPress-tema. Uansett hva du gjør, ikke endre denne filen! Oppdateringene vil overskrive endringene dine.

Det er flere måter å legge til en tilpasset CSS-kode til ditt WordPress-tema, slik at endringene dine overlever en oppdatering av WordPress-temaet.

Hvordan tilpasse du WordPress-nettstedet ditt med CSS

Nå som du bedre forstår hva CSS er og hvordan WordPress-temaer bruke dem, tar vi en titt på alternativene du kan bruke for å tilpasse WordPress-bloggen din, og vi vil diskutere fordeler og ulemper ved hver metode.

På slutten av vårt arbeid vil du kunne bestemme hvilken metode som tilsvarer WordPress-temaet ditt.

Alternativ # 1: Tilpass CSS ved hjelp av et barn-tema

Hvis du bruker un barnet tema For å tilpasse CSS-koden din, vil ikke oppdateringer til temaene vi snakket om før lenger være et problem. En oppdatering av et WordPress-tema vil påvirke temaet "forelder», La endringene i barnetemaet ditt være intakte. Mange WordPress-temautviklere forstår nytten av et barnetema.

Oppdag Når og hvordan du installerer WordPress i en underkatalog

Å lage et barnetema er ganske greit. Den består av å lage en mappe på webhotellet som inkluderer en fil style.css som lister opp overordnet tema som mal, og importerer fil style.css av foreldretemaet (husker du betydningen av 'cascading' stilark?).

Kodeksen WordPress har mer informasjon om å lage barnetemaer.

Når du har opprettet barnetemaet ditt og aktivert det riktig, kan du begynne å tilpasse WordPress-temaet ditt. Den raskeste måten vil være å redigere filen style.css, som kan nås på to måter.

Sjekk ut denne artikkelen for å oppdage Hvordan komprimere CSS, HTML og Javascript-filer

Den første er å bruke redigeringsprogrammet som er inkludert i WordPress-dashbordet, ved å klikke på Utseende> Editor. L 'editor viser en liste over filer til høyre tilgjengelig i temaet (Bare populære filer vises). Din fil style.css vil være helt nederst på listen, og klikke på alternativet stilark filen din style.css vil belaste.

Du kan legge til endringene dine på dette stedet og lagre endringen.

Den andre måten å få tilgang til filen din style.css (vi anbefaler) er å bla gjennom filene i webhotellet ditt via a FTP-klient eller en filbehandling. Barnetema-mappen du opprettet, vil være i " wp-innhold> temaer« . Du vil kunne bruke en tekstredigerer til å redigere filen style.css.

Alternativ nr. 2: Tilpass CSS fra Customizer

Fra og med WordPress 4.7 kan brukere legge til tilpasset CSS direkte fra WordPress-administrasjonsområdet. Det er veldig enkelt, og du vil kunne se endringene dine med forhåndsvisning i sanntid.

Først må du gå til siden Temaer »Tilpass.

Dette starter WordPress-tilpasningsgrensesnittet.

Du vil se sanntidsforhåndsvisning av nettstedet ditt til høyre med en rekke alternativer i venstre rute. Klikk på fanen Tilleggs CSS på venstre rute.

Fanen vil gli ut for å vise deg et enkelt område der du kan legge til din tilpassede CSS. Så snart du legger til en gyldig CSS-regel, vil du kunne se den brukes i sanntidsruten på nettstedet ditt.

Du kan fortsette å legge til tilpasset CSS-kode til du er fornøyd med hvordan den ser ut på nettstedet ditt. Ikke glem å klikke på " Lagre og publiser På toppen når du er ferdig.

Merk: Enhver tilpasset CSS som du legger til ved hjelp av Customizer, er bare tilgjengelig med det aktuelle WordPress-temaet. Hvis du vil bruke den med andre temaer, må du kopiere og lime inn i det nye temaet ditt ved hjelp av samme metode.

Alternativ # 3: Tilpass CSS ved hjelp av en plugin

Fordelen med å bruke et plugin for CSS-tilpasning er at du beholder pluginet selv om du foretar en WordPress-temendring. Dette har sine kompromisser, ettersom stiler ikke kan vises godt på alle WordPress-temaer.

Her er noen plugins:

1. Tilpasset CSS i Jetpack (gratis)

WordPress plugin jetpack  er installert på over en million WordPress-nettsteder, og sannsynligvis også dine. Det gir funksjoner tilgjengelig på WordPress.com for selvhostede nettsteder, og tilbyr også en modul for CSS tilpasning.

Når modulen er aktivert i Jetpack-dashbordet, vil en tilpasset CSS-editor være tilgjengelig, slik at du kan tilpasse WordPress-temaet ditt uten å lage et underordnet tema. Du får tilgang til redaktøren ved å følge denne banen " Utseende> Rediger CSS« .

2. Enkel tilpasset CSS (gratis)

Hvis stedet du ønsker en frittstående alternativet, Enkelt Custom CSS er et godt valg. Denne gratis plugin-en, brukt på mer enn 200.000 nettsteder med en rangering på 4,9-stjerner, vil definitivt hjelpe deg med å personalisere CSS WordPress-bloggen din.

Dette pluginet krever ingen konfigurasjon, du trenger bare å installere og aktivere pluginet. For å endre CSS-koden, gå til " Utseende> Egendefinert CSS«  i WordPress-dashbordet. Bruk CSS-endringene i tekstboksen, og lagre innstillingene når det er gjort.

3. CSS Hero (fra $ 14 per år)

Det siste WordPress-plugin-alternativet vi ser på i dag er et premium WordPress-plugin som heter CSS Hero. Fra 14 $ per år for ett nettsted lar denne plugin-en deg tilpasse WordPress-temaet ditt ved hjelp av et intuitivt grensesnitt.

Designet for å jobbe best mulig dusinvis av kompatible WordPress-temaer , CSS Hero gir deg total kontroll over alle elementene i WordPress-temaet. For temaer som ikke er på listen deres, kan du bruke Raketmodus for å aktivere tilpasning av CSS Hero.

CSS Hero fjerner behovet for å forstå CSS-syntaks ved å forenkle interaksjon med kode gjennom et grensesnitt, og dette gjelder animasjoner og overganger. Du kan også forhåndsvise endringene dine i sanntid og gå tilbake til en tidligere versjon.

Finn ut Slik flytter du kommentarer fra en artikkel til en annen på WordPress

Hvis du vil endre CSS-en til WordPress-bloggen din fullstendig, men ikke vil lære CSS, er CSS Hero et flott alternativ for å tilpasse nettstedet ditt, spesielt hvis du bruker et av WordPress-temaene deres.

Mens du vet at innhold er viktig, vil du imidlertid at nettstedet ditt skal skille seg ut fra mengden, selv om du bruker et populært WordPress-tema. Med CSS kan du tilpasse utformingen av nettstedet ditt slik at det er helt unikt.

Gå videre ved å oppdage Hvordan å tillate brukere å redigere enkelte sider

Så det er flere måter å tilpasse CSS til ditt WordPress-tema:

1. et barnetema.
2. den Customizer.
3. CSS plugin.

Oppdag også noen premium WordPress-plugins  

Du kan bruke andre WordPress plugins for å gi et moderne utseende og for å optimalisere håndteringen av bloggen eller nettsiden din.

Vi tilbyr deg her noen premium WordPress-plugins som vil hjelpe deg å gjøre det.

1. Adning Advertising

WP PRO Advertising System er et WordPress-annonseringsadministrasjonsplugin, som tilbyr 18 strategiske lokasjoner for å hjelpe deg med å vise annonser på nettstedet ditt. Den har også en detaljert statistikkavdeling hvor du vil se resultatene til hver annonse.

Denne funksjonen er avgjørende fordi den vil hjelpe deg med å forbedre kampanjen og maksimere fortjenesten. Dette WordPress Adsense-pluginet kommer også med en unik funksjon som kalles bakgrunnsannonser. Det lar deg vise annonser som bakgrunn for innholdet ditt.

I tillegg, siden den er kompatibel med plugins som WPBakery et Slider Revolution, kan du vise annonsene dine i form av glidebrytere eller plassere dem hvor som helst på nettstedet ditt.

Last ned | dEMO | Webhotell

2. WP Media File Manager

WP Media File Manager er et WordPress-plugin som gjør det enkelt å organisere mediebiblioteket i en form for hierarki, ved hjelp av dra og slipp-funksjonaliteten. Det er en av WordPress plugins den kraftigste filbehandleren på CodeCanyon. Du trenger ikke engang å lage mapper manuelt.

Dette WordPress-pluginet lar deg laste opp tusenvis av filer fra PC-ens filbehandling til nettstedet ved automatisk å kopiere hierarkiet til kildemappen. Hvis du vil ha den samme filen i forskjellige mapper, vet du at du nå har et ekte mediebibliotek som gir denne funksjonaliteten.

Si farvel til problemene med å laste ned spesifikke filtyper, nå er det bare å installere dette WordPress-pluginet og la det følge deg i administrasjonen av filene dine.

Last ned | dEMO | Webhotell

3. meny Hero

Hero Menu er et mega-meny WordPress-plugin. Og selv om det ikke gjør mye heroisk, har det alle nødvendige funksjoner for bare $ 19. Litt som Mega Main Menu, det er et plugin som også inneholder produkter omtalt på CodeCanyon, og det har nesten 4500 salg til kreditt for øyeblikket.

I funksjonsseksjonen vil du raskt innse at det er ganske enkelt å lage en megamenu. Prosessen tar bare noen få trinn. Men i tillegg vil du legge merke til at pluginen er kompatibel med WooCommerce, tilbyr et responsivt design og et "dra og slipp" -grensesnitt for å lage menyene.

Menybyggeren forbedrer bruken av pluginet, og forenkler kjøperens jobb. UI-integrasjon er også en god jobb, og UI oppfører seg perfekt med andre plugins.

Last ned | dEMO | Webhotell

Anbefalte ressurser

Finn ut om andre anbefalte ressurser for å hjelpe deg med å bygge og administrere nettstedet ditt.

• Hvordan passordbeskytte et skjema i WordPress
• Hvordan lage flotte overganger av sider på WordPress
• Slik bruker du WordPress REST API
• Slik knytter du WordPress-nettstedet ditt til Telegram
• Hvordan rengjøre WordPress på noen få trinn

konklusjonen

Det! Det er det for denne opplæringen. Vi håper denne veiledningen har vist deg hvordan du tilpasser CSS på WordPress-nettstedet ditt. Ikke nøl med å del med vennene dine på dine favoritt sosiale nettverk. 

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.

Hvis du har forslag eller kommentarer, kan du la dem ligge i seksjonen vår commentaires.

...