Að breyta stílsniði (e. theme) í WordPress

Fyrir þá sem eru með WordPress vef og vilja sérsníða stílsniðið (e. theme) enn frekar er Inspect Element eitt af þessum ómissandi tólum í verkfærakistunni. Með Inspect Element getum við breytt stílsniði á vefnum með því að breyta eða bæta við CSS kóða í því theme sem virkt er hverju sinni. Þannig er hægt að fikra sig áfram og sjá breytingarnarnar í vafranum án þess að eiga á hættu að skemma nokkuð.

Til að opna Inspect Element er nóg að hægri smella á vefsíðuna í vafranum og velja "Inspect Element".

Til að opna Inspect Element er nóg að hægri smella á vefsíðuna í vafranum og velja “Inspect Element”.

Einfalt er að afrita CSS breytingar  sem við prófum í Inspect Element yfir í stílsniðið (e. theme) þannig að breytingarnar skili sér alla leið yfir á vefinn okkar. Til að yfirskrifa ekki breytingarnar við uppfærslu á stílsniðinu er nauðsynlegt að vista CSS breytingarnar annarsstaðar en í stílsniðinu sem er virkt. En hvernig er best að bera sig að?

Leið 1 – Sérsníðum útlit með css

Einföld leið til að halda utan um CSS breytingar er að setja upp sérsniðið CSS sem heldur utan um breytingar á stílsniðinu. Þetta er til dæmis hægt að gera með Custom CSS sem fylgir með JetPack. Custom CSS gerir okkur mögulegt að búa til einskonar dóttursnið af CSS skránni af því stílsniði sem er virkt hverju sinni.

Þegar búið er að setja upp JetPack viðbótina getum við breytt og bætt við CSS undir Appearance > Edit CSS. Kosturinn við JetPack er að ekki þarf að setja upp dóttursnið fyrir stílsniðið sjálft (e. child theme) ef við þurfum einungis að gera breytingar í CSS skjalinu. JetPack viðbótin býður upp marga aðra möguleika sem ekki verður fjallað um hér en JetPack er í raun safn viðbóta sem fylgja vefjum sem hýstir eru á WordPress.com.

Þess má geta að Inspect Element nýtist ekki einungis við HTML og CSS breytingar. Með Inspect Element er hægt að sjá stærð kóðans á hverri síðu á vefnum, hvernig síðan hleðst niður, hvernig vefurinn lítur út í mismunandi snjalltækjum, við villuleit og Javascriptun o.fl.

leið 2 – Búum til dóttursnið (e. child theme)

Fyrri leiðin er sú leið sem ég myndi mæla með ef einungis er verið að gera breytingar á útliti. Um leið og við förum að gera breytingar á virkni er rétt að búa til svokallað dóttursnið (e. child theme) af stílsniðinu sem við viljum byggja á.

Kosturinn við að nota dóttursnið er þá eigum við ekki lengur á hættu að missa breytingarnar við uppfærslur á stílsniðinu. Til er fín viðbót (e. plugin) fyrir WordPress, sem heitir One Click Child Theme, er gerir okkur kleift að búa til dóttursnið með einum smelli. Dóttursniðið erfir alla eiginleika móðursniðsins en allar breytingar sem við gerum í dóttursniðinu taka yfir á meðan dóttursniðið er virkt. Auðvelt að bæta við breytingum í CSS skránna undir Appearance > Editor > Style.css.

Athugið að ekki má eyða út móðursniðinu (e. parent theme) á meðan dóttursniðið er virkt þar sem dóttursniðið (e. child theme) sækir enn grunnvirknina þangað.

Með dóttursniði er á sama hátt hægt að gera breytingar á .php skjölum sem fylgja stílsniðinu. Það er gert með því að afrita PHP skjalið úr móðursniðinu yfir í dóttursniðið og gera breytingarnar þar. PHP skjalið í dóttursniðinu mun eiga síðasta orðið á sama hátt og breytingarnar í CSS í dóttursniðinu.

Leave a Reply