Jak přizpůsobit téma WordPress pomocí CSS
pokud se chcete dozvědět, jak přizpůsobit téma WordPress pomocí CSS, je jednou z prvních věcí, které potřebujete vědět, jak upravovat soubory v samotném tématu.
proces úpravy souborů motivů je v podstatě stejný, ať už chcete přizpůsobit CSS nebo HTML, a v předchozích tutoriálech v této sérii jsme již tento proces pokryli za účelem úpravy HTML.
abyste se vyhnuli protektorování stejného důvodu, podívejte se na „jak Upravit HTML v tématu WordPress“ a „jak nainstalovat WordPress lokálně pomocí XAMPP“, o kterých se dozvíte:
- úpravy souborů pomocí editoru motivů
- stahování a nahrávání souborů přes FTP nebo vzdálené připojení
- proč byste měli zvážit provedení změn v rámci podřízeného motivu
- úpravy offline pomocí XAMPP
s metodami úpravy souborů motivů, které již byly pokryty, se v tomto tutoriálu zaměříme na to, jak upravit css ve WordPressu tím, že se dozvíte o těchto tématech:
- jak přidat vlastní CSS přes téma customizer
- jak identifikovat styly téma používá
- jak zjistit, které CSS je třeba změnit a kde, aby bylo možné přizpůsobit konkrétní část motivu
Poznámka: Tento článek předpokládá, že máte základní znalosti CSS, ale ne nutně o tom, jak upravit CSS v WordPress.
Premium WordPress Témata a pluginy
než začneme, nezapomeňte si můžete prohlédnout tisíce WordPress témata na ThemeForest a WordPress pluginy na CodeCanyon. Kupte si tato vysoce kvalitní témata a pluginy WordPress a vylepšete své webové stránky pro vás a vaše návštěvníky.
jak upravit CSS v WordPress Téma Customizer
WordPress má vyhrazenou oblast, ve které můžete přidat svůj vlastní kód CSS. Tento kód bude načten ve správný čas, aby bylo zajištěno, že přepíše výchozí styl motivu a použití tohoto přístupu neprovádí žádné přímé změny v souborech motivů.
v levém postranním panelu panelu Správce WordPress Přejděte na vzhled > přizpůsobit:
tím se dostanete do oblasti přizpůsobení motivu, kde můžete kliknout na položku nabídky Další CSS:
objeví se velké pole, do kterého můžete přidat libovolný vlastní CSS, který se vám líbí:
uložte změny kliknutím na modré tlačítko Publikovat v horní části levého postranního panelu, až budete hotovi s přidáním vlastního kódu.
jak identifikovat šablony stylů motivu
pokud nechcete používat doplňkovou oblast CSS v Přizpůsobovači motivů a místo toho chcete přímo upravovat CSS motivů, budete potřebovat způsob, jak zjistit, které soubory motiv skutečně používá pro styling.
ve většině případů budou témata používat standardní strukturu pro WordPress a budou mít soubor s názvem “ styl.css “ v kořenovém adresáři motivu. Ve skutečnosti se jedná o základní soubor motivu, takže jej vždy najdete v jakémkoli tématu.
ale když jej otevřete pro úpravy, můžete zjistit, že je prázdný kód a vývojář načítá styl z jiného místa, kde je v tématu. Nebo můžete dokonce zjistit, že se načítají do více souborů stylů.
existují dva způsoby, jak zkontrolovat, které styly jsou používány motivem.
kontrola kódu hlavy
první metodou je kontrola kódu <head> motivu. To lze provést kliknutím pravým tlačítkem kdekoli na stránce a výběrem Zobrazit zdroj stránky a poté vyhledáním značek <head>...</head>.
mezi těmito značkami vyhledejte <link> prvky, které mají také rel='stylesheet'. Pak se podívejte, které z nich pocházejí z adresáře vašeho motivu. Adresy URL stylů vám řeknou, kde je ve struktuře motivu najít.
Všimněte si, že pokud používáte plugin, který kombinuje a minifikuje všechny styly vašich stránek do jednoho souboru, tato technika nebude fungovat, protože vše, co uvidíte, je adresa URL tohoto jediného souboru. Místo toho použijte techniku dvě a zkontrolujte soubor funkcí.
kontrola souboru funkcí
kdykoli motiv používá stylesheet, musí WordPress sdělit, který soubor chce použít, pomocí funkce s názvem wp_enqueue_style(). Můžeme tedy přesně vidět, který styl (styly) se téma načte tím, že najde jeho použití této funkce.
každé téma má soubor s názvem “ funkce.php“ se nachází v kořenovém adresáři. Použití funkce wp_enqueue_style() je typicky v tomto souboru, takže ji otevřete a začněte hledat název funkce.
když najdete instance funkce wp_enqueue_style(), vyhledejte mezi závorkami druhý parametr, tj. bit textu za první čárkou. Tento text vám ukáže umístění šablony stylů. Příklad:
wp_enqueue_style('main-style', get_template_directory_uri() . '/css/mainstyle.css');
ve výše uvedeném kódu je druhý parametr:
get_template_directory_uri() . '/css/mainstyle.css')
to nám říká, že stylesheet je v podadresáři motivu s názvem „css“, a že jeho název souboru je “ mainstyle.element“.
jak zjistit, který CSS se má změnit
jakmile víte, jak přidat nebo upravit CSS motivu, další věc, kterou se naučíte, je, jak zjistit, který kód skutečně potřebujete změnit.
nejlepší způsob, jak toho dosáhnout, je použití vývojářských nástrojů ve Vašem prohlížeči, ideálně Chrome nebo Firefox kvůli kvalitě jejich nástrojů.
řekněme například, že chcete změnit velikost písma titulů příspěvků. Klepněte pravým tlačítkem myši na jeden z titulů příspěvků a vyberte možnost zkontrolovat:
tím se otevře panel nástrojů pro vývojáře. Na kartě styly vyhledejte vlastnost font-size.
pokud žádný nevidíte, prohlížeč vám může zobrazovat Nadřazený nebo podřízený prvek, takže na kartě prvky zkuste kliknout na blízké prvky, dokud nenajdete prvek, který oba přesně zvýrazní tvar textu názvu příspěvku a má vlastnost font-size :
nyní na kartě styly zkuste změnit hodnotu vlastnosti font-size. Pokud vidíte velikost změny textu v okně prohlížeče, víte, že jste našli správný CSS.
Chcete-li zjistit, kde v šabloně stylů je tento CSS, podívejte se vpravo nahoře na místo, kde jste právě upravili hodnotu font-size. Měli byste vidět název souboru, pak dvojtečku, pak číslo.
název souboru vám řekne, ve kterém stylu je kód, a číslo za dvojtečkou vám řekne, na kterém řádku tento kód najdete. Například výše uvedený obrázek ukazuje kód z „stylu“.css “ soubor na řádku 4054. Pokud přímo upravujete šablonu stylů motivu, můžete ji nyní otevřít, přejít na příslušné číslo řádku a změnit CSS.
pokud pracujete v dalším poli CSS Přizpůsobovače motivů nebo v podřízeném motivu, budete také muset zacílit na stejný selektor jako původní CSS, takže jej můžete přepsat vlastním stylem.
zpět v nástroji pro vývojáře prohlížeče vyhledejte selektor, který je nad vlastností font-size, kterou jste právě změnili. Je to nalevo od souboru stylů a specifikace čísla řádku, na kterou jsme se právě podívali.
zkopírujte celý selektor a vložte jej do vlastního kódu a poté jej použijte ke správnému zacílení vaší upravené hodnoty font-size.
vždy zkontrolujte možnosti pečeného motivu
než se dostanete do potíží s přizpůsobením CSS, vždy zkontrolujte možnosti, které vývojář již do motivu zapečel.
témata mají často poměrně komplexní možnosti přizpůsobení, které nevyžadují vlastní kód. Takže před úpravou CSS si můžete ušetřit spoustu času tím, že zjistíte, zda již existuje tlačítko, Jak provést změnu, kterou potřebujete.
jak přizpůsobit téma WordPress krok za krokem
Nyní, když jsme mluvili o tom, jak přizpůsobit CSS a HTML motivu WordPress, můžete se cítit trochu nejistí, kde začít. Pojďme tedy věci uvařit na základní seznam kroků, které je třeba dodržovat:
- zkontrolujte téma Customizer, zda je již k dispozici možnost, která může usnadnit změnu, kterou chcete provést
- pokud ne, a je třeba přidat nějaké jednoduché vlastní CSS, použijte další pole CSS v motivu Customizer
- pokud potřebujete provést rozsáhlejší přizpůsobení HTML nebo CSS, zvažte jejich provedení v rámci podřízeného motivu
- Chcete-li provést malé změny přímo v motivu, použijte WordPress ve vestavěném editoru motivů
- pro podrobnější změny přímo v motivu použijte buď FTP, vzdálené připojení nebo pracujte zcela offline s XAMPP
- jakmile máte vybranou metodu úprav, identifikujte šablony stylů motivu kontrolou kódu
<head>vašeho webu nebo hledáním „funkcí“ motivu.php “ pro použití funkcewp_enqueue_style() - Vyhledejte konkrétní řádky CSS, které potřebujete upravit, a jejich související selektory, pomocí funkce Inspect ve vývojářských nástrojích Chrome nebo Firefox
když se ponoříte do všech výše uvedených a seznámíte se, začnete vidět, jak je přizpůsobitelný WordPress.
než se nadějete, budete vytvářet své vlastní zcela originální dětské motivy a vytvářet návrhy všechny své vlastní.
a tak se stane, že učení „jak vytvořit dětské téma v WordPress“ je další tutoriál, který se objeví v této sérii. Zůstaňte naladěni!