Kā pielāgot savu WordPress vietni, izmantojot CSS: 3 vienkāršas metodes

WordPress ir attīstījies gadu gaitā, un šodien tā ir diezgan elastīga un viegli pielāgojama platforma, izmantojot bloku redaktoru Gutenberg. Tomēr būs gadījumi, kad jums būs nepieciešams nedaudz vairāk sasniedzamības, nekā nodrošina Gūtenberga redaktors.

Šeit noder pielāgotais CSS. CSS stils ļauj rediģēt WordPress vietnes krāsas, atstarpes, fontus, izkārtojumus un būtībā visus citus vizuālos elementus, ļaujot tai izskatīties tieši tā, kā vēlaties.

Šajā rakstā mēs sniegsim jums informāciju par WordPress vietnes pielāgošanu, izmantojot CSS.

Kāpēc pielāgot savu vietni, izmantojot CSS?

Pielāgota CSS pievienošana ir tikai viena no metodēm, ko varat izmantot, lai precizētu savas vietnes izskatu. Citas metodes ietver a labi nodrošināts premium WordPress motīvsvai instalējot lapu veidotāju.

Lai gan šīs divas metodes ir nedaudz vieglāk izmantot iesācējiem, un tām nav nepieciešamas kodēšanas zināšanas, pielāgotā CSS izmantošana ir izdevīgāka divos galvenajos veidos:

Nulles izmaksas

Premium motīvi un WordPress lapu veidotāji var būt noderīgi, taču par tiem ir jāmaksā — dolāros un centos. No otras puses, apbruņojoties ar zināšanām par to, kā rakstīt pielāgotu CSS, jūs varat sasniegt tādus pašus efektus, neradot papildu izdevumus.

Minimāls uzpūšanās

Lapu veidotāji un labi piedāvātie motīvi ir izstrādāti, lai sniegtu lietotājiem lielāku elastību un plašu iespēju klāstu savu vietņu pielāgošanai. Šī iemesla dēļ viņi mēdz palielināt vietnes uzpūšanos, iespējams, palēninot to darbību.

No otras puses, rakstot pielāgotu CSS, jūs pievienosit tikai nepieciešamās funkcijas, kā rezultātā vietnes parasti ir vieglākas un ielādes ātrums ir lielāks.

3 vienkāršas metodes, kā pielāgot savu WordPress vietni, izmantojot CSS

Cerams, jūs jau zināt kā rakstīt CSS. Kad esat iepazinies ar pamatiem, varat izmantot jebkuru no šīm metodēm, lai savai WordPress vietnei pievienotu pielāgotu CSS:

1. metode: izmantojiet WordPress pielāgotāju

Izmantojot WordPress 4.7 vai jebkuru versiju pēc tās, varat pievienot pielāgotu CSS tieši no administratora apgabala. Šī ir visvienkāršākā metode, un, tā kā ir pieejams tiešraides priekšskatījums, jūs varat redzēt visas veiktās izmaiņas reāllaikā.

Tas ir arī visieteicamākais, jo visas veiktās izmaiņas tiek saglabātas pašā WordPress. Tas nozīmē, ka pat mainot vai atjauninot motīvu, jūs nezaudēsit savu pielāgoto CSS.

Tālāk ir norādītas darbības, kas jāveic.

1. darbība: dodieties uz Izskats > Pielāgot.

Tiks atvērts WordPress motīva pielāgotājs, kas labajā pusē parāda jūsu vietnes tiešo priekšskatījumu, kā arī dažas pielāgošanas opcijas kreisajā pusē. Ritiniet uz leju līdz kreisā paneļa apakšdaļai, un jūs atradīsit Papildu CSS cilne.

2. darbība: noklikšķiniet uz Papildu CSS Tab.

Tas atvērs nelielu lodziņu kreisajā rūtī, kur varēsit pievienot savu pielāgoto CSS. Varat ievadīt tik daudz CSS koda rindiņu, cik vēlaties. Lieliskā šī redaktora priekšrocība ir tā, ka tas apstiprina jūsu kodu, brīdinot, ja ir kādas kļūdas.

3. darbība: publicējiet izmaiņas.

Jebkura derīga CSS kārtula, ko pievienosit, tiks parādīta tiešā priekšskatījuma apgabalā labajā pusē. Lai lietotu izmaiņas savā vietnē, noklikšķiniet uz Publicēt pogu kreisās rūts augšdaļā, kad esat apmierināts. Ja nevēlaties, lai izmaiņas stātos spēkā nekavējoties, varat arī ieplānot publicēšanu vēlāk vai saglabāt savu darbu kā melnrakstu.

Ir svarīgi ņemt vērā, ka visas izmaiņas, ko veicat, izmantojot pielāgotāju, ir saistītas ar jūsu pašreizējo motīvu. Ja kādreiz pārslēgsieties uz citu motīvu, izmaiņas tiks zaudētas, ja vien nekopēsiet savu pielāgoto CSS un nepievienosiet to jaunajam motīvam. Laba prakse ir visas pielāgotās CSS, ko pievienojat motīvam, saglabāt piezīmju grāmatiņā. Tādā veidā varat vienkārši nokopēt kodu un ielīmēt to sadaļā “Papildu CSS” citam motīvam.

Ja tas izklausās pēc pārāk liela darba un jūs dodat priekšroku risinājumam, kas ļauj piemērot pielāgoto CSS jebkuram izmantotajam WordPress motīvam, nākamā metode ir paredzēta jums.

2. metode. Izmantojiet spraudni

Pielāgotie CSS spraudņi saglabā jūsu pielāgoto CSS atsevišķi no motīva, ļaujot piemērot izmaiņas neatkarīgi no izmantotā motīva. Šiem spraudņiem ir arī papildu funkcijas, piemēram, automātiskā pabeigšana, kas var atvieglot CSS pievienošanu.

Vienīgais trūkums ir tas, ka tā ir trešās puses programmatūra, kas nozīmē, ka tās var palēnināt vietnes darbību. Tomēr lielākā daļa šo spraudņu ir viegli, tāpēc tie parasti maz ietekmē jūsu vietnes veiktspēju. Šeit ir daži no labākajiem pielāgotajiem CSS spraudņiem, ko varat izmantot:

• Vienkāršs pielāgots CSS

Vienkāršs pielāgots CSS ir viens no populārākajiem pielāgotajiem CSS spraudņiem. Tas ir viegls, viegli lietojams un piedāvā lieliskas funkcijas. Iestatīšana ir vienkārša. Viss, kas jums jādara, ir instalēt un aktivizēt spraudni. Pēc tam dodieties uz Izskats sadaļu informācijas paneļa kreisajā rūtī.

Jūs redzēsit jaunu opciju Pielāgots CSS. Noklikšķinot uz tā, tiks atvērts redaktors, kurā varat pievienot savu pielāgoto CSS. Noklikšķiniet uz Atjauniniet pielāgoto CSS pogu, lai saglabātu izmaiņas. Lai skatītu izmaiņas, vienkārši atsvaidziniet savu vietni.

• Vienkāršs pielāgots CSS un JS

Ja vēlaties vēl vairāk funkciju, Vienkāršs pielāgots CSS un JS spraudnis ir lieliska iespēja. Papildus CSS pievienošanai tas ļauj pievienot JavaScript ierakstus.

• CSS varonis

Ja nevēlaties rakstīt vienu koda rindiņu, CSS Hero spraudnis ir ideāli piemērots jums. Šis spraudnis piedāvā vizuālu CSS redaktoru ar nolaižamajām izvēlnēm un ievades laukiem, kas ļauj rediģēt gandrīz jebkuru CSS stilu jūsu vietnē, nerakstot nekādu kodu.

3. metode. Rediģējiet neapstrādāto kodu

Divas iepriekš aprakstītās metodes ļauj vietnei pievienot pielāgotu CSS, nepieskaroties nevienam no motīva failiem. Taču dažos gadījumos, iespējams, vēlēsities rediģēt motīva CSS vai tieši pievienot pielāgotu CSS sava motīva kodam.

Lai to izdarītu, jums būs jāpiekļūst savas vietnes stila lapai. Vienkāršs veids, kā piekļūt šai stila lapai, ir Tēmas redaktors savā WordPress informācijas panelī.

Tomēr, pirms mēs ejam tālāk, jums ir jāievieš daži drošības pasākumi. Pirmkārt, dublējiet savu vietni. Rediģējot motīvu failus, ir viegli pieļaut kļūdas, kas var izraisīt vietnes avāriju.

Dublējums nodrošina, ka jums ir funkcionāla vietne, kurā atgriezties. Nākamais, izveidot bērnu tēmu. Ja veiksit tiešus labojumus savā vecākmotīvā, izmaiņas tiks zaudētas ikreiz, kad motīvs tiks atjaunināts.

Kad šie aizsardzības pasākumi ir ieviesti, piesakieties savā WordPress aizmugursistēmā. Iet uz Izskats > Motīvu redaktors. Noklikšķinot uz motīva redaktora opcijas, jūs redzēsit uznirstošo lodziņu, kas brīdina jūs neveikt tiešas izmaiņas motīvu failos. Ja veicat iepriekš minētās darbības, viss ir kārtībā.

Klikšķis Es saprotu lai turpinātu.

Pēc noklikšķināšanas pēc noklusējuma jums vajadzētu redzēt savas vietnes stila lapu. Ja nē, vienkārši skatieties labajā rūtī un noklikšķiniet uz stils.css saskaņā Stila lapa opciju.

Šeit varat veikt tiešas izmaiņas motīvu failos. Vienkārši neaizmirstiet noklikšķināt Saglabāt un atjaunināt kad esat pabeidzis.

Pārvaldiet savas vietnes izskatu, izmantojot pielāgotu CSS

Iesācējiem var būt nepieciešams zināms laiks, lai iemācītos rakstīt pielāgotu CSS saglabāšanu pakalpojumā WordPress, taču tas ļaus jums patiesi kontrolēt savas vietnes izskatu. Un tas ir bez maksas un ar minimālu ietekmi uz jūsu vietnes veiktspēju.

Tomēr, ja nevēlaties veikt manuālu noformēšanu, ir arī citi veidi, kā paveikt darbu, piemēram, izmantojot vienu no populārākajiem WordPress lapu veidotājiem.

5 WordPress lapu veidotāji, kas var palīdzēt jums izveidot pārsteidzošas vietnes

Vai vēlaties, lai jūsu WordPress vietne izskatītos lieliski, bet nevarat atļauties izstrādātāju? Tā vietā izmēģiniet šos WordPress lapu veidotājus.

Lasiet Tālāk

Par autoru