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 WordPressKoľ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.

Ako prispôsobiť CSS vášho webu WordPress

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.

ako prispôsobiť webovú stránku css wordpress 1

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.

ako prispôsobiť webovú stránku css wordpress 1 1

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.

WordPress štýlov

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.

ako prispôsobiť webovú stránku css wordpress 2

Najprv musíte prejsť na stránku Témy »Prispôsobiť.

Prístup k nástroju na prispôsobenie WordPress na prispôsobenie témy

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.

zadajte ďalší css kód a zverejnite

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.

Jetpack-formy-plugin

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.

single-custom-css

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.

CSS Hero WordPress Plugin

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:

  1. detská téma.
  2. nástroj pre prispôsobenie.
  3. 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.

Adning Advertising WordPress plugin

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.

Správca súborov WP Správca súborov WordPress Médiá Knižnica médií Kategórie Nahrať doplnok

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.

Hero Menu Responzívny doplnok WordPress Mega Menu

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.

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.

...