Ekzistojnë më shumë se një mënyrë për të shtuar kodin e personalizuar CSS në një blog WordPress.

Sot, unë do të shpjegoj pikat e forta dhe të dobëta të dy metodave të ndryshme që ju propozoj, në mënyrë që të jeni në gjendje të zgjidhni atë që ju përshtatet më së miri.

Por më parë, nëse nuk keni instaluar kurrë WordPress zbuloni Si të instaloj një WordPress blog hapa 7 et Si të kërkoni, instaloni dhe aktivizoni një temë WordPress në blogun tuaj 

Atëherë kthehu pse ne jemi këtu.

Si të gjeni artikujt që dëshironi të personalizoni

Pasi të keni izoluar pjesën e temën tuaj të WordPress që dëshironi të ndryshoni (për shembull titulli i një artikulli), do t'ju duhet përcaktoni vetitë CSS aplikuar në të në mënyrë që të mund të bëni ndryshimet e duhura. Për fat të mirë, ky proces nuk është i ndërlikuar.

CSS përdor selektorët për të përcaktuar se cilët elementë do të pësojnë ndryshime të ndryshme specifike. Zakonisht, kjo bëhet duke specifikuar një " klasë "I një elementi (ose elementi DOM). Sidoqoftë, CSS gjithashtu mund të përdoret për të përcaktuar paraqitjen e një elementi të tërë (për shembull, etiketën " ") ose duke përdorur identifikuesin e etiketës.

Për fat të mirë, shfletuesit e njohur na lejojnë të shohim zgjedhësit dhe deklaratat e ndryshme që aplikohen në elementet e faqes me vetëm disa klikime. Për shembull, në Google Chrome, thjesht duhet të theksosh një pjesë të veçantë të dokumentit dhe pastaj të klikosh me të djathtën, si në shembullin më poshtë.

Duke klikuar në Inspektoni elementin Në menunë drop-down që shfaqet, do të shihni kodin HTML të faqes në një dritare të re me artikullin e inspektuar të nxjerrë në pah në dritaren në të djathtë (ose më poshtë). Ju mund të shihni një shembull më poshtë.

Tekstet e këtyre elementeve (ose atributet) Theksuar në të kuqe ju tregojnë stilet e ndryshme specifike të aplikueshme për artikullin që keni theksuar duke inspektuar kodin.

Lexo gjithashtu: Si të shtoni një menu Drop-down me CSS Styles në Visual Editor tuaj

Për shembull, elementi " font-size Ju thotë se fonti i shfaqur në artikullin e theksuar është me madhësi në pixel 13. Përshkruesit janë të rrethuar me shirita dhe paraprinë nga selektorët. Emri i skedarit të fletëve përkatëse të stilit shfaqet vetëm në të djathtë të zgjedhësve.

Pasi të keni parasysh këtë informacion, ndryshimi i stilit bëhet i lehtë. Për shembull, nëse doni të ndryshoni fontin nga 13px në 14px, thjesht kërkoni skedarin tuaj të fletës së stilit, zgjedhësin që korrespondon me atë të artikullit të theksuar. Në përgjithësi është në këtë formë: (« # plugin-infos .block-content"). Pastaj mund të modifikoni vlera të ndryshme të atributeve.

Mund të bëni të njëjtën gjë në Firefox, thjesht nënvizoni një pjesë specifike të faqes, klikoni me të djathtën mbi artikullin, pastaj zgjidhni " Inspektoni elementin Në menunë që shfaqet.

Si WordPress dhe CSS punojnë së bashku

Është fakt se Temat e WordPress krijohen ndryshe. Pra, mbani në mend se juaj WordPress theme mund të mos përputhet 100% me atë që lexoni në seksionet e mëposhtme.

Thënë kjo, është më se e mundshme që CSS e përdorur në blogun tuaj WordPress të jetë e vendosur në një skedar të quajtur " style.css ". Ky është emri i zakonshëm për një fletë stili për çdo lloj uebsajti, jo vetëm WordPress.

Shih gjithashtu: Si të ndryshoni madhësinë e imazheve Gravatar në WordPress

Tani është koha për të kaluar nëpër proceset e ndryshme të redaktimit.

Metoda # 1: Redaktimi i skedarit stil të temës suaj të WordPress

Ekzistojnë dy mënyra për të hyrë në skedarin style.css të temës suaj.

E para është ta bëni atë nga pulti juaj WordPress. Në menunë e majtë, zgjidhni menunë " shfaqje "Dhe pastaj" botues '.

Pasi të jeni në faqen e redaktorit, do të shihni një listë të skedarëve në një shirit vertikal në anën e djathtë të faqes. Shkoni nëpër listën e skedarëve. Ju do të shihni një skedar të quajtur " Style.css stil fletë Në fund të faqes.

Nëse klikoni në emrin e kësaj skedari, ai do të ngarkohet dhe shfaqet në redaktues në mes. Ju mund ta përdorni këtë ekran për të modifikuar skedarin.

Mënyra tjetër për të gjetur fletën e stilit është të shfletoni sistemin operativ të ofruesit tuaj të pritjes dhe të gjeni skedarin në WordPress theme (duke përdorur një klient FTP). Vendndodhja e saktë do të ndryshojë në varësi të ofruesit tuaj të pritjes. Në shembullin e treguar më poshtë, emri i faqes në internet (në rastin tonë kujdesin) është një dosje nën dosjen public_html.

Meqenëse WordPress është instaluar, mund të shihni dosjen wp-content në "thecare". Nën-dosja me përmbajtje wp është një tjetër dosje e quajtur " wp-themes", që është ku të gjitha Temat e WordPress janë instaluar.

Nga kjo faqe interneti përdor një temë të quajtur " Gazete », Skedari i stilit« style.css Isshtë e vendosur në dosje " Newsletter Parent '.

Metoda # 2: Përdorimi i një shtojce për të modifikuar CSS

Ndoshta mënyra më e përshtatshme për të redaktuar CSS të blogut tuaj WordPress është përdorimi i një shtojce.

Një nga përparësitë kryesore të përdorimit të një shtojce është e ngjashme me atë të temave për fëmijë. po ju azhurnoni temën WordPress, ndryshimet tuaja nuk do të mbishkruhen, pasi ato do të ruhen veçmas dhe jo midis skedarëve të temës. Avantazhi tjetër, natyrisht, është se nuk keni pse krijoni një temë për fëmijë.

Këtu janë disa shtojca premium që mund t'i përdorni gjithashtu për të modifikuar kodin tuaj CSS WordPress theme :

1. Laps i Verdhë: Redaktori Visual i CSS

Lapsi i Verdhë është një redaktues i stilit vizual që mund ta përdorni me çdo temë për të personalizuar faqen tuaj në minuta (shkronja, ngjyra, animacione dhe më shumë).

Ce plugin WordPress premium do të krijojë stile CSS nga sfond ndërsa ju luani me ngjyrat sikur të ishte një lojë. designedshtë krijuar për të dy fillestarët dhe përdoruesit me përvojë.

Zbuloni edhe tonë Shtojcat 5 WordPress për të treguar njoftime

Nuk kërkohet njohuri për kodim. Megjithatë, të plugin WordPress ka një redaktues të mirë CSS për ata që duan të kodojnë. Mund të kodoni drejtpërdrejt me këtë redaktues dhe të personalizoni CSS-në tuaj.

Shkarko | DEMO | web hosting

2. Custom JS dhe CSS për Gutenberg

Le plugin WordPress Premium Custom JS dhe CSS për Gutenberg do t'ju lejojë të shtoni një numër të pakufizuar të stileve të personalizuara në redaktorin WYSIWYG për postimet dhe faqet tuaja në WordPress. Fullyshtë plotësisht në përputhje me versionin Gutenberg të WordPress.

Ju thjesht mund të krijoni një stil të ri me një redaktues CSS të lehtë për t'u përdorur. Kjo shtojcë WordPress shtrin tiparet e fushat me porosi të faqes suaj të internetit dhe ju jep mundësinë për të modifikuar fushat tuaja të personalizuara me një modul dinamik dhe të fuqishëm të personalizimit. dhe funksionalitetin e vrojtim në kohë reale e kësaj shtojce WordPress e bën atë shumë të rehatshëm dhe miqësor për përdoruesit.

Shkarko | DEMO | web hosting

3. CSS SiteOrigin

Byshtë larg shtojcës WordPress që ofron më shumë mundësi në këtë listë. Gjëja e mahnitshme për këtë të fundit është se është falas. Kjo shtojcë WordPress është e vetmja që nuk mund të gjendet në personalizues.

Pas instalimit dhe aktivizimit të shtojcës, duhet të lundroni në vendndodhjen e mëposhtme " Pamja> CSS e personalizuar Për të hyrë në edicionin CSS të shtojcës. Në këtë faqe, ju mund të shihni një redaktues teksti që nuk ofron pamje paraprake të drejtpërdrejtë. 

Lexoni gjithashtu artikullin tonë në Shtojcat 10 WordPress për të rritur shitjet e faqes suaj të internetit

Për të hyrë në këtë të fundit, duhet të klikoni në njërën nga dy butonat që shfaqen në të majtë, pak sipër editorit. Butoni me një ikonë të syrit do të sjellë një redaktues vizual të CSS që entuziastët do ta vlerësojnë. Ikona me shigjetat e shtrirjes do të shfaqë një redaktues teksti i cili do të nënkuptojë një zotërim të kodeve CSS.

Shkarko | DEMO | web hosting

4. Simple Custom CSS

Simple Custom CSS është një nga shtojcat më të njohura.

Zbuloni edhe tonë Si ta bëni blogun tuaj të shpejtë: menaxhimi i skedarëve CSS dhe JS.

Hasshtë instaluar mbi 100 herë dhe ka marrë një vlerësim me pesë yje.

Shkarko | DEMO | web hosting

5. WP Shto Custom CSS

WP Shto CSS me porosi është një plugin që ju lejon të ndryshoni paraqitjen e një blogu të WordPress artikuj të tërë ose thjesht individualë. Ky është një opsion i shkëlqyeshëm nëse jeni duke kërkuar fleksibilitet në rregullimin e sendeve.

Shtojca është shkarkuar mbi 10.000 herë dhe aktualisht gëzon një vlerësim me 4,3 yje.

Shkarko | DEMO | web hosting

6. Theme Junkie Custom CSS

Nëse jeni duke kërkuar për një zgjidhje që ofron një pamje paraprake të drejtpërdrejtë të ndryshimeve tuaja, mund të konsideroni ta përdorni Tema me porosi të Junkie CSS. 

Kjo zgjidhje shton një menaxher CSS me porosi në pultin tuaj, ku mund të shtoni stilet tuaja. Ajo gjithashtu ofron një alternative për duke përdorur një temë për fëmijë.

Shkarko | DEMO | web hosting

Burime të tjera të rekomanduara

Ne gjithashtu ju ftojmë të konsultoheni me burimet më poshtë për të vazhduar më tej në kontrollin dhe kontrollin e faqes dhe blogut tuaj.

• Shtojcat 10 WordPress që ndajnë në rrjetet sociale
• Si të shfaqni fushat e personalizuara nga loop në WordPress
• Shtojcat 5 WordPress për të fituar para me blogun tuaj me reklama
• Si për të mbrojtur blogun tuaj nga scrapers përmbajtje

Përfundim

Këtu! Kjo është e gjitha për këtë udhëzim, shpresoj se do të arrini të shtoni kodin e personalizuar CSS në blogun tuaj WordPress në 2 metoda, nëse keni ndonjë komente ose sugjerime, mos hezitoni të na tregoni në pjesën e rezervuar për këto.

Megjithatë, gjithashtu do të jeni në gjendje të konsultoheni me ne RESSOURCES, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.

Nëse ju pëlqeu ky artikull, nmos hezitoni ndajeni në rrjetet tuaja të preferuara sociale. 

...