Hvordan redigere WordPress CSS

Etter å ha lest denne opplæringen, vil du enkelt kunne implementere WordPress CSS -tilpasning. Metodene for å redigere CSS kan variere fra ett tema til et annet. Derfor inkluderer teknikkene som er beskrevet redigeringskode ved hjelp av tilleggsalternativet for CSS, redigering av koden fra temadaktøren og ved hjelp av plugins.

Alle instruksjoner forklart i denne opplæringen inkluderer skjermbilder, noe som gjør det enkelt for alle brukere å følge dem.

Viktig: Dette er ikke en CSS -kodingsopplæring, men en tutorial som viser deg hvordan du kan legge til tilpasset CSS i WordPress. Opplæringen er rettet til brukere med en grunnleggende ide om CSS -programmering, selv om du i den siste delen kan finne en plugin som lar deg redigere CSS på en visuell måte.

Redigering av CSS fra WordPress Customization -skjermen (ekstra CSS):

Den første metoden forklart i denne opplæringen er den mest konvensjonelle: redigering WordPress CSS fra det ekstra CSS -panelet som vises i tilpasningsskjermen.

Når du redigerer CSS ved hjelp av denne teknikken, vil utgaven din forbli selv etter å ha oppdatert temaet ditt uten behov for et barnetema (ennå, å bruke et barn -tema anbefales alltid). Selvfølgelig vil denne utgaven bli fjernet hvis du endrer temaet.

For å begynne å logge på WordPress -dashbordet ditt og på venstre meny, flytt musemarkøren over Utseende og trykk på Tilpasse Alternativ som vist på skjermbildet nedenfor (Utseende> Tilpass).

En gang i tilpasningsskjermen med en live forhåndsvisning av nettstedet ditt, bla nedover venstre meny for å finne den ekstra CSS -knappen og trykk på den.

Du vil se en tom boks der du kan skrive inn koden din; Du kan redigere nettstedet CSS.

Når du er ferdig med å redigere CSS -en, trykker du på publisere knapp for å bruke endringer.

Hvordan redigere CSS fra WordPress -dashbordet:

Du kan også redigere CSS -en din ved å endre .CSS -filer gjennom temaredigereren.

Når du bruker denne teknikken, er det bedre å bruke et barnetema og lagre en sikkerhetskopi av filene dine.

For å begynne, logg inn på WordPress -dashbordet ditt og på venstre meny, flytt musepekeren din Utseende Og trykk deretter Temafilredigerer Som vist i følgende bilde (Utseende> Temafilredigerer).

På høyre kolonne (Temafiler) Finn CSS -filen du vil redigere. Noen temaer inneholder en fil som heter Custom.CSS; Hvis temaet ditt inkluderer denne filen, er det der du trenger å plassere din tilpassede CSS -kode. Ellers rediger den tilgjengelige CSS -filen etter ditt behov.

Når du er redigert, husk å trykke på Oppdater Filknappen for å bruke endringer.

Slik redigerer du temafilene dine fra dashbordet; Selvfølgelig kan du også oppdatere filene via en FTP -klient som Filezilla.

Hvordan redigere WordPress CSS ved hjelp av en plugin:

Denne delen viser hvordan du redigerer WordPress CSS ved hjelp av en plugin. I noen tilfeller kan det hende at et tema ikke støtter CSS som standard; I slike tilfeller kan en plugin hjelpe.

For å begynne å logge på WordPress -dashbordet ditt og på venstre meny, flytt musemarkøren over Utseende og trykk deretter på Legg til ny alternativ (Plugins> Legg til nytt).

I installasjonsskjermen for plugins, bruk søkefeltet og skriv "CSS -redaktør”. Når tilgjengelige plugins dukker opp, trykker du på Installere nå knappen til SiteOrigin CSS Plugin, som vist på skjermbildet nedenfor.

Når du er installert, trykk på Aktivere knapp for å aktivere plugin.

Etter å ha installert plugin -en, på dashbordets venstre meny, trykk Utseende Og trykk deretter Tilpasset CSS (utseende> Tilpasset CSS).

Du vil se en tom boks der du kan legge til CSS -koden din; Etter å ha redigert CSS -koden din, trykk på Lagre CSS knapp for å bruke endringer.

Slik kan du redigere CSS -koden din i WordPress ved hjelp av en plugin.

Det er alternative plugins du kan bruke:

• Blokker CSS: CSS -redaktør for Gutenberg -blokker: Denne plugin lar deg redigere CSS -blokker fra Gutenberg Blocks Editor.
• Visual CSS Style Editor: Denne pluginen lar deg legge til din tilpassede CSS uten koding. Du kan redigere elementer visuelt ved å klikke på dem, inkludert farger, størrelser, posisjoner, skrifter osv.
• Enkel CSS: Denne CSS -redigeringsprogrammet inkluderer en live forhåndsvisning i Customizer. Du kan bruke tilpassede CSS på spesifikke innlegg eller sider gjennom en Metabox.
• Avansert CSS -redaktør: Denne pluginen lar deg legge til forskjellige tilpassede CSS -koder for forskjellige enheter (datamaskin, mobil og nettbrett) ved hjelp av live customizer. Pluginen lar deg også minifisere CSS -en din, optimalisere den for søkemotorer (SEO).
• Tilpasset CSS Pro: Denne CSS-redigereren inkluderer også sanntids live forhåndsvisning gjennom et enkelt brukergrensesnitt.
• Enkel tilpasset CSS og JS: Denne opplæringen lar deg legge til både tilpasset CSS og JS. Denne pluginen endrer ikke temafilene dine og lar deg eksportere koden din og oppbevare den selv etter å ha endret temaet.

Du kan installere alle plugins nevnt over ved å skrive navnet sitt på søkefeltet i installasjonsskjermen for plugins.

Konklusjon:

Som du kan se i instruksjonene ovenfor, er det ganske enkelt å redigere eller legge til den tilpassede WordPress CSS -koden.
Brukere må vurdere når de redigerer CSS at den tilpassede koden kan påvirke ytelsen til nettstedet; Å minifisere CSS -koden er alltid en god praksis, og det er flere plugins å gjøre det for deg automatisk.

Brukere kan alltid fjerne den tilpassede ekstra CSS, men når det gjøres gjennom dashbordet Temautgave alternativet, anbefales det å lage en sikkerhetskopi av filen for å redigere.

Husk at en temaoppdatering kan omskrive endringene dine, prøv alltid å finne tilpasset.CSS fil når den er til stede.

Denne artikkelen inneholder en liste over plugins du kan bruke; Markedet tilbyr flere plugins som ikke ble nevnt, og du kan utforske til du finner den som passer dine behov.

Tusen takk for at du leste denne artikkelen som forklarer hvordan du redigerer WordPress CSS. Jeg håper det var nyttig. Fortsett å følge Linuxhint for flere WordPress -opplæringsprogrammer og tips.