Ako prispôsobiť CSS vášho webu WordPress? Viac informácií nájdete v tomto článku.
Bez ohľadu na to, akú tému WordPress si vyberiete pre svoj web, budú existovať ďalšie webové stránky, ktoré ju budú používať. A to aj napriek mnohým možnostiam prispôsobenia, ktoré mnohí ponúkajú Témy WordPress v súčasnosti môžete urobiť svoju webovú stránku ešte jedinečnejšou.
Liať vraiment Ak sa chcete dotknúť vizuálneho aspektu svojej témy WordPress, musíte ísť nad rámec štandardného prispôsobenia, ktoré ponúkajú možnosti alebo nastavenia témy WordPress. Prispôsobenie CSS vášho blogu WordPress vám umožní upraviťvzhľad vašich webových stránok aby to bolo naozaj jedinečné.
Tento tutoriál sa pozrie na rôzne metódy, ktoré máte k dispozícii na prispôsobenie svojich webových stránok pomocou CSS, vytváranie a prispôsobovanie detských tém pomocou vstavaných doplnkov WordPress Customizer a WordPress pluginy CSS.
Ale skôr, ako začnete, urobte si čas na to pozrieť Ako nainštalovať motív WordPress, Koľko pluginy mám nainštalovať na WordPress.
Potom nájdite spolu náš zoznam.
CSS: Základy a spôsob, akým ich používa WordPress
V prvom rade: CSS znamená Cascading Style Sheets, ktorá nie je zreteľnejšia ako skratka. Poďme si to teda rozobrať.
Šablóna štýlov je dokument popisujúci štýly (ako je písmo, farby, atď..), ktoré sa majú použiť na predloženie iného dokumentu. V našom prípade máme do činenia so štýlom webových stránok.
ČasťkaskádovéNázov je súčasťou toho, čo ho robí skutočne silným. Webové stránky môžu byť navrhnuté s viacerými hárkami štýlov, napríklad kaskádovým vodopádom, pričom spodný hárok pridáva alebo nahrádza štýly z vyššej úrovne. Je to dôležité, pretože spôsob pridávania štýlov prepíše pôvodné zmeny.
Akokoľvek to znie jednoducho, pomocou CSS môžete zmeniť takmer všetko na webovej stránke (vrátane rozloženia, farieb, typov písma a dokonca aj animácií).
Zistite, ako spravovať svoje oznámenia objavovaním Ako spravovať e-mailové upozornenia na WordPress
väčšina Témy WordPress použite kód CSS dostupný v súbore s názvom style.css, Ak tento súbor otvoríte, zobrazí sa vám kompletný zoznam pravidiel štýlu pre vašu tému WordPress. Čokoľvek urobíte, nemeňte tento súbor! Aktualizácie prepíšu vaše zmeny.
Existuje niekoľko spôsobov, ako pridať a vlastný kód CSS k téme WordPress, aby vaše zmeny prežili aktualizáciu témy WordPress.
Ako prispôsobiť svoj web WordPress pomocou CSS
Teraz, keď lepšie pochopíte, čo je CSS a ako na to Témy WordPress ich použite, pozrieme sa na možnosti, ktoré môžete použiť na prispôsobenie svojho blogu WordPress, a prediskutujeme výhody a nevýhody každej metódy.
Na konci našej práce budete môcť určiť, ktorá metóda zodpovedá vašej téme WordPress.
Možnosť # 1: Prispôsobenie CSS pomocou podradenej témy
Ak používate un dieťa téma za účelom prispôsobenia vášho kódu CSS už nebude problém s aktualizáciami tém, o ktorých sme hovorili predtým. Aktualizácia témy WordPress ovplyvní tému "rodič», Ponechanie zmien témy vášho dieťaťa nedotknuté. Mnoho vývojárov tém WordPress rozumie užitočnosti podradenej témy.
Discover Kedy a ako nainštalovať WordPress v podadresári
Vytvorenie detskej témy je celkom jednoduché. Spočíva vo vytvorení priečinka na vašom webhostingu, ktorý obsahuje súbor style.css ktorý obsahuje nadradenú tému ako šablónu a importuje súbor style.css nadradenej témy (pamätáte si význam „kaskádových“ štýlov?).
kódex WordPress má viac informácií o vytváraní detských tém.
Po vytvorení detskej témy a jej správnej aktivácii môžete začať prispôsobovať svoju tému WordPress. Najrýchlejší spôsob bude úprava súboru style.css, ku ktorým máte prístup dvoma spôsobmi.
Vyskúšajte tento článok Ako komprimovať súbory CSS, HTML a Javascript
Prvým je použitie editora zahrnutého na paneli WordPress kliknutím na Vzhľad> Editor. L 'vydavateľ zobrazí zoznam súborov vpravo dostupných v téme (Zobrazia sa iba populárne súbory). Váš súbor style.css budete v spodnej časti zoznamu a kliknete na túto možnosť štýlov váš súbor style.css bude účtovať.
Na toto miesto môžete pridať svoje zmeny a uložiť zmeny.
Druhý spôsob prístupu k vášmu súboru style.css (jeden odporúčame) je prehliadať súbory vo vašom webhostingu prostredníctvom a FTP klient alebo správca súborov. Priečinok podradenej témy, ktorý ste vytvorili, bude v priečinku „ wp-content> témy« , Na úpravu súboru budete môcť použiť textový editor style.css.
2. možnosť: Prispôsobte si CSS z nástroja Customizer
Od verzie WordPress 4.7 môžu používatelia pridávať vlastné CSS priamo z oblasti správy WordPress. Je to super ľahké a svoje zmeny by ste videli v náhľade v reálnom čase.
Najprv musíte prejsť na stránku Témy »Prispôsobiť.
Týmto sa spustí rozhranie na prispôsobenie témy WordPress.
Napravo uvidíte ukážku svojho webu v reálnom čase s množstvom možností na ľavom paneli. Kliknite na kartu dodatočné CSS na ľavej table.
Karta sa vysunie a zobrazí vám jednoduchú oblasť, do ktorej môžete pridať svoje vlastné CSS. Hneď ako pridáte platné pravidlo CSS, uvidíte ho uplatnené na paneli ukážky vášho webu v reálnom čase.
Môžete pokračovať v pridávaní vlastného kódu CSS, kým nebudete spokojní s tým, ako vyzerá na vašom webe. Nezabudnite kliknúť na „ Uložiť a publikovať Keď ste hotoví, hore.
Poznámka: Všetky vlastné CSS, ktoré pridáte pomocou nástroja Customizer, sú k dispozícii iba s konkrétnou témou WordPress. Ak ju chcete použiť s inými motívmi, budete musieť skopírovať a prilepiť do novej témy rovnakou metódou.
Možnosť # 3: Prispôsobenie CSS pomocou doplnku
Výhodou použitia doplnku na prispôsobenie CSS je, že si doplnok ponecháte, aj keď urobíte zmenu témy WordPress. Toto má svoje kompromisy, pretože štýly sa nemôžu dobre zobraziť na všetkých témach WordPress.
Tu sú niektoré pluginy:
1. Vlastné CSS v Jetpack (zadarmo)
WordPress plugin jetpack je nainštalovaný na viac ako milióne webových stránok WordPress a pravdepodobne aj na vašich. Prináša funkcie dostupné na WordPress.com pre webové stránky s vlastným hosťovaním a tiež ponúka a Modul pre CSS prispôsobenie.
Po aktivácii modulu na ovládacom paneli Jetpack bude k dispozícii vlastný editor CSS, ktorý vám umožní prispôsobiť si tému WordPress bez vytvorenia podradenej témy. Do editora sa dostanete po tejto ceste " Vzhľad> Upraviť CSS« .
2. Jednoduché vlastné CSS (zadarmo)
Ak namiesto toho chcete možnosť samostatný, Jednoduché Custom CSS je dobrá voľba. Tento bezplatný doplnok, ktorý sa používa na viac ako 200.000 webových stránkach s hodnotením hviezd 4,9, vám určite pomôže prispôsobiť si váš blog CSS WordPress.
Tento doplnok nevyžaduje žiadnu konfiguráciu, stačí ho nainštalovať a aktivovať. Ak chcete upraviť svoj kód CSS, prejdite na „ Vzhľad> Vlastné CSS« na hlavnom paneli WordPress. Použite svoje zmeny CSS do textového poľa a po dokončení uložte svoje nastavenia.
3. CSS Hero (od 14 dolárov ročne)
Poslednou možnosťou doplnku WordPress, na ktorú sa dnes pozeráme, je prémiový doplnok WordPress s názvom CSS Hero, Z 14 $ ročne pre jeden web vám tento doplnok umožňuje prispôsobiť si tému WordPress pomocou intuitívneho rozhrania.
Navrhnuté tak, aby čo najlepšie fungovali desiatky kompatibilných tém WordPress , CSS Hero vám dáva úplnú kontrolu nad všetkými prvkami vašej témy WordPress. Pre témy, ktoré nie sú na ich zozname, môžete použiť rocket fashion povoliť prispôsobenie CSS Hero.
CSS Hero odstraňuje potrebu porozumieť syntaxi CSS zjednodušením interakcie s kódom prostredníctvom rozhrania, čo platí aj pre animácie a prechody. Môžete tiež zobraziť ukážku svojich zmien v reálnom čase a vrátiť sa k predchádzajúcej verzii.
Zistiť Ako presúvať komentáre z jedného článku do druhého na WordPress
Ak chcete úplne zmeniť CSS svojho blogu WordPress, ale nechcete sa učiť CSS, CSS Hero je skvelá voľba na prispôsobenie vašej webovej stránky, najmä ak používate jednu z ich WordPress tém.
Aj keď viete, že obsah je dôležitý, budete chcieť, aby váš web vyčnieval z davu, aj keď používate obľúbenú tému WordPress. Pomocou CSS môžete prispôsobiť vzhľad svojej webovej stránky tak, aby bola úplne jedinečná.
Choďte ďalej objavovaním Ako umožniť používateľom upravovať niektoré stránky
Existuje teda niekoľko spôsobov, ako prispôsobiť CSS vašej témy WordPress:
- detská téma.
- nástroj pre prispôsobenie.
- CSS plugin.
Objavte aj niektoré prémiové doplnky WordPress
Môžete použiť iné WordPress pluginy poskytnúť moderný vzhľad a optimalizovať prácu s vaším blogom alebo webovou stránkou.
Ponúkame vám tu niekoľko prémiových doplnkov WordPress, ktoré vám to pomôžu.
1. Inzerovanie reklamy
WP PRO Advertising System je doplnok pre správu reklamy WordPress, ktorý ponúka strategické umiestnenia 18, ktoré vám pomôžu zobrazovať reklamy na vašom webe. Obsahuje aj podrobnú štatistickú sekciu, v ktorej uvidíte výkonnosť každej reklamy.
Táto funkcia je zásadná, pretože vám pomôže vylepšiť kampaň a maximalizovať zisky. Tento doplnok WordPress Adsense tiež prichádza s jedinečnou funkciou nazývanou reklamy na pozadí. Umožňuje vám zobrazovať reklamy ako pozadie vášho obsahu.
Navyše, pretože je kompatibilný s doplnkami, ako sú WPBakery et slider Revolution, môžete svoje reklamy zobrazovať vo forme posuvníkov alebo ich umiestniť kamkoľvek na svoj web.
Stiahnuť | demo | web hosting
2. Správca súborov WP
WP Media File Manager je doplnok WordPress, ktorý uľahčuje usporiadanie knižnice médií vo forme hierarchie pomocou funkcie Drag and Drop. Je to jeden z WordPress pluginy najvýkonnejší správca súborov na CodeCanyon. Nebudete dokonca musieť vytvárať priečinky ručne.
Tento doplnok WordPress vám umožňuje nahrávať tisíce súborov zo správcu súborov vášho počítača na webovú stránku automatickým kopírovaním hierarchie zdrojového priečinka. Ak chcete mať rovnaký súbor v rôznych priečinkoch, vedzte, že teraz máte skutočnú knižnicu médií, ktorá poskytuje túto funkciu.
Dajte zbohom problémom so sťahovaním konkrétnych typov súborov, teraz si stačí nainštalovať tento doplnok WordPress a nechať ho, aby vám pomohol spravovať súbory.
Stiahnuť | demo | web hosting
3. menu Hero
Hero Menu je mega ponuka doplnku WordPress. Aj keď to nerobí príliš hrdinsky, má všetky potrebné funkcie len za 19 dolárov. Trochu ako Mega Main Menu, je to doplnok, ktorý obsahuje aj produkty uvádzané na serveri CodeCanyon a momentálne má na svojom konte takmer 4500 XNUMX predajov.
V sekcii funkcií si rýchlo uvedomíte, že vytvorenie a Megamen, Tento proces trvá iba niekoľko krokov. Okrem toho si všimnete, že je doplnok kompatibilný WooCommerce, ponúka responzívny dizajn a rozhranie „drag and drop“ na vytvorenie ponúk.
Nástroj na tvorbu ponuky vylepšuje použitie doplnku a výrazne zjednodušuje prácu kupujúceho. Integrácia používateľského rozhrania je tiež skvelá práca a používateľské rozhranie sa správa perfektne s ostatnými doplnkami.
Stiahnuť | demo | web hosting
Odporúčané zdroje
Zistite ďalšie odporúčané zdroje, ktoré vám pomôžu pri vytváraní a správe vašich webových stránok.
- Ako chrániť heslom formulár vo WordPress
- Ako vytvoriť krásne prechody stránok na WordPress
- Ako používať rozhranie WordPress REST API
- Ako prepojiť svoju webovú stránku WordPress s telegramom
- Ako vyčistiť WordPress v niekoľkých krokoch
záver
To je ono! To je pre tento návod všetko. Dúfame, že vám tento výukový program ukázal, ako prispôsobiť CSS vášho webu WordPress. Neváhaj zdieľať so svojimi priateľmi na obľúbených sociálnych sieťach.
Môžete sa však poradiť aj s našimi zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress.
Ak máte nejaké návrhy alebo pripomienky, nechajte ich v našej sekcii Komentáre.
...
Dobrý deň,
Rád by som vám predstavil doplnok Anym Live Editor, ktorý umožňuje úplnú úpravu CSS alebo SCSS a Javascript z ľubovoľnej stránky WordPress a ktorý ponúka živé vykreslenie vykonaných zmien! Doplnok je navyše vybavený rôznymi nástrojmi, ktoré vám umožňujú komunikovať so stránkou, ktorú chcete upraviť, a funguje ako každý bežný IDE (štýl textu Sublime), tentokrát však určený pre váš web. WordPress.