Jak si přizpůsobit téma WordPress (5 podrobných způsobů)

Pokud jste si nainstalovali téma WordPress, ale není to pro vás to pravé, můžete se cítit frustrovaní. Existuje mnoho možností, jak přizpůsobit své motivy WordPress.

Úkolem je najít správný způsob, jak to udělat.

V tomto příspěvku vás provedu možnosti přizpůsobení vašeho motivu WordPress, pomozte rozhodnout, který z nich je pro vás ten pravý, a ukážeme vám, jak to udělat bezpečně a efektivně.

Chcete sledovat naši verzi videa? Klikněte na tlačítko Přehrát níže:

Možnosti přizpůsobení motivu

Než se ponoříme a začneme provádět úpravy vašeho motivu, vyplatí se pochopit, jaké jsou možnosti, protože vyhovují různým situacím.

Zde je přehled možností, které máte k dispozici:

• Pokud chcete svému motivu přidat funkčnost, nainstalujte si plugin.
• Použijte Přizpůsobte si na obrazovkách administrátorů WordPressu, abyste přizpůsobili písma, barvy a možná i rozložení, v závislosti na vašem motivu.
• Pokud pracujete s motivem pro tvorbu stránek, přizpůsobte jeho funkce designem svého webu.
• Pokud jste nainstalovali motiv rozhraní, použijte jeden z dostupných podřízených motivů k přizpůsobení vašeho webu, spolu s dalšími možnostmi přizpůsobení vlastními obrazovky správce.
• Pokud je váš motiv konkrétně pro váš web a dělá vám to dobře, upravte přímo kód motivu.
• Chcete-li upravit kód motivu třetí strany, vytvořte podřízený motiv.

Pokud chcete upravit kód , máte k dispozici řadu možností, od použití editoru bloků, přes Přizpůsobitel, až po úpravy souborů. Podíváme se na ně všechny v tomto příspěvku, ale pojďme začít s nejjednodušší možností: instalací pluginu.

Opravdu potřebujete přizpůsobit své téma?

Někdy tak neučiníte Vůbec nemusíte přizpůsobovat své motivy: místo toho musíte nainstalovat plugin.

Motivy diktují design vašeho webu: způsob jeho vzhledu a způsob zobrazení obsahu. Pluginy přidávají další funkce.

Pokud se změny, které chcete provést, soustředí spíše na funkčnost než na design, zvažte instalaci pluginu sami. Může to být plugin, který musíte napsat, který si stáhnete z adresáře pluginu nebo si koupíte.

Pokud zjistíte, že chcete upravit soubor functions.php ve svém motivu, zeptejte se sami sebe:

Chtěl bych tuto funkci zachovat, pokud v budoucnu přepnu témata?

Je-li odpověď ano, měl by tento kód obsahovat plugin, nikoli vaše téma.

Dobré příklady toho, co byste použili jako doplněk místo motivu, včetně přidání widgetů, registrace vlastních typů příspěvků a taxonomií , vytváření vlastních polí a přidávání dalších funkcí, jako je obchod nebo vylepšení SEO.

Přizpůsobení motivu WordPress pomocí obrazovek pro správu WordPress

Pokud jsou změny, které chcete provést, zaměřeny na design a relativně jednoduché, můžete je vytvořit na obrazovkách správce. Přizpůsobitel vám poskytuje různé možnosti vyladění motivu: to, co máte k dispozici, bude záviset na vašem motivu. A v nabídce Vzhled můžete vidět něco, co se nazývá Editor. Vyvarujte se toho, z důvodů, které krátce popíšu.

Přizpůsobení motivu pomocí nástroje Customizer

Nejjednodušší způsob přizpůsobení motivu WordPress je pomocí nástroje WordPress Customizer.

K tomu přistupujete jedním ze dvou způsobů:

• Při prohlížení svého webu (když jste přihlášeni) klikněte na odkaz Přizpůsobit na liště správce v horní části obrazovky.
• Na obrazovkách správce klikněte na Vzhled > Přizpůsobit.

Tím přejdete na Přizpůsobitel.

Na výše uvedeném snímku obrazovky jsem nainstaloval bezplatné téma s názvem ColorMag, které má spoustu možností přizpůsobení. V nástroji Customizer jsou přidány sekce pro funkce designu, včetně obrázku záhlaví, sociálních médií, barev kategorií a karty Možnosti designu, která vás provede ještě více kartami, kde můžete provádět změny v rozložení a designu vašeho webu.

Různá témata mají různé možnosti přizpůsobení, ale zdá se, že novější motivy je neustále přidávají. Pokud najdete motiv, který se vám líbí, ale který pro vás není úplně vhodný, možná zjistíte, že jeho přizpůsobením získáte přesně ten design a rozvržení, které potřebujete.

Editor motivů (a proč nepoužívat) it)

Na obrazovkách administrátora si můžete všimnout možnosti zvané Editor témat, kterou aktivujete pomocí Appearance > Editoru motivů.

Tím získáte přístup k souborům ve vašem motivu , což znamená, že je můžete přímo upravovat.

Ne.

I když vám vyhovuje psaní CSS nebo PHP, je úprava souborů v tomto motivu velmi špatný nápad, a to ze dvou důvodů:

• Pokud jste zakoupili nebo stáhli téma třetí strany, všechny provedené změny budou při příští aktualizaci motivu ztraceny (a měli byste svůj motiv z bezpečnostních důvodů aktualizovat).
• Ještě důležitější je, když provedete změna, která rozbije váš web, nebude sledována a předchozí verze souboru se nezmění. Web můžete nenávratně rozbít.

Pokud chcete upravit kód ve svém motivu, měli byste to provést pomocí editoru kódu (podívejte se na nejlepší bezplatné editory HTML) a neměli byste Nebudete upravovat soubory na svém živém webu, dokud to nevyzkoušíte na připravovaném webu. Pokud potřebujete upravit motiv třetí strany, měli byste tak učinit prostřednictvím podřízeného motivu. Více o obou níže v tomto příspěvku.

WordPress ví, jak nebezpečné je použití editoru témat: při pokusu o přístup vám dokonce poskytne varování.

Vezměte tedy radu WordPress: ne použijte editor motivů!

Přizpůsobení motivu WordPress pomocí Tvůrců stránek a rámců

Velká část motivů WordPress má možnosti přizpůsobení, což znamená, že můžete provádět změny v designu a rozvržení pomocí Customizer.

Některá témata to však berou dále a jsou navržena tak, aby byla rozšířena a výrazně přizpůsobena. Těmto tématům se říká framework témat.

Další možností je použít plugin, který vám umožní navrhnout web pomocí uživatelsky přívětivého rozhraní: těm se říká tvůrci stránek.

Používání stránky Tvůrce pro přizpůsobení vašeho motivu

Pluginy Tvůrce stránek jsou navrženy tak, aby vám usnadnily nastavení designu vašeho webu pomocí rozhraní, které vám umožní zjistit, co dostáváte.

Nainstalujete si plugin pro tvorbu stránek s kompatibilním tématem a poté použijete možnosti, které vám dávají, k vytvoření vašeho webu přesně tak, jak chcete.

Jedním z nejznámějších tvůrců stránek je Elementor, ale o některých alternativách se můžete dozvědět v našem přehledu nástrojů pro tvorbu stránek.

Tvůrci stránek vám umožňují upravovat své příspěvky a stránky pomocí rozhraní přetažení, což znamená, že můžete vidět, jak bude váš obsah vypadat může každou stránku udělat jedinečnou.

Níže používám nástroj pro tvorbu stránek Elementor s motivem Hello Elementor, který je s ním kompatibilní.

Tvůrci stránek vám dávají spoustu flexibility s uspořádáním a designem vašich stránek. Pokud jste zvyklí na tvůrce webových stránek, jako je Wix, mohou vám usnadnit přechod na WordPress. A pokud dáváte přednost obsahu WYSIWYG pro svůj obsah WordPress, mohou vám pomoci rychle navrhnout vaše stránky.

Přizpůsobení motivu pomocí motivového rámce

Alternativou k tvůrcům stránek je motiv rámce. Jedná se o sady témat navržených pro spolupráci. Existuje jedno nadřazené téma, kterým je rámec, a výběr podřízených motivů, které můžete použít k přizpůsobení hlavního motivu tak, aby vypadalo tak, jak chcete.

Příkladem rámců motivů je Divi, který má možnosti přizpůsobení, které vám umožní ještě více vyladit design vašeho podřízeného motivu, včetně rozhraní pro přetahování podobných těm, které vytvářejí stránky.

Úpravy kódu motivu WordPress

Pokud vám vyhovuje úprava CSS a / nebo PHP, můžete upravte kód ve svém motivu a přizpůsobte si svůj motiv.

Tím získáte nejvyšší míru kontroly.

Pokud upravujete vlastní motiv, který je specifický pro váš web a byl vyvinut speciálně pro něj, pak můžete přímo provádět úpravy motivu. Pokud ale pracujete s motivem třetí strany a chcete jej upravit, měli byste vytvořit podřízený motiv, abyste při příští aktualizaci motivu neztratili změny.

Úpravy souborů motivu

Prvním krokem k úpravě vašeho motivu WordPress je pochopit, které soubory motivů ovládají, co a které budete muset upravit.

Šablona stylů

Každé téma WordPress má stylů, nazvaný style.css. Obsahuje veškerý kód pro úpravu vašeho webu: rozložení, písma, barvy atd.

Chcete-li například změnit barvy motivu, provedete úpravy šablony stylů. Chcete-li přidat nové písmo, použijte šablonu stylů k jeho použití na různé prvky, jako je hlavní text a nadpisy.

Věnujte pozornost úpravám šablony stylů: specifičnost znamená, že kód prvku vždy nepochází z místa, kde jste myslím, že je.Prvky zdědí styling od ostatních prvků, které jsou nad nimi v hierarchii stránky, pokud nepřidáte styl, který je specifický pro spodní prvek.

Chcete-li zjistit, co CSS ovlivňuje, které prvky na stránce, můžete použijte inspektor ve svém prohlížeči k zobrazení CSS (Chrome DevTools v tomto příkladu):

Tímto způsobem můžete napsat nový CSS, který cílí na jednotlivé prvky nebo řadu prvků nebo tříd na stránce.

Pokud je pro vás veškerá tato řeč o prvcích, třídách a specifičnosti nová, možná budete chtít vyhnout se přímé úpravě CSS vašeho motivu. Alespoň dokud se nedozvíte více o CSS a o tom, jak to funguje.

Soubor funkcí

Další soubor, který bude mít téměř každé téma, je soubor funkcí (functions.php) . Toto je soubor, díky kterému ve vašem motivu funguje spousta věcí. Uvnitř najdete kód pro registraci funkcí motivů, jako jsou doporučené obrázky, widgety a další.

Pokud vás láká přidat do motivu funkční kód, přidáte jej sem. Ale pozor: ve většině případů byste měli opravdu psát plugin. Zeptejte se sami sebe:

Chtěl bych tuto funkci zachovat, pokud v budoucnu přepnu témata?

Pokud je odpověď ano, namísto přidání kódu do souboru funkcí napište plugin. Pluginy nemusí být velké: nic vám nebrání ve vytvoření jednoho pro několik řádků kódu.

Soubor funkcí je napsán v PHP, takže s ním musíte být obeznámeni že. Nekopírujte slepě kód, který najdete pomocí vyhledávání Google: udělejte si čas na to, abyste zjistili, co daný kód dělá, a porozuměli mu. Tímto způsobem je méně pravděpodobné, že přidáte kód, který není tak dobrý, jak by měl být.

Soubory šablon motivů

Většina souborů v motivu jsou soubory šablon motivu . Jedná se o soubory, které určují, jaký obsah má WordPress výstup na dané stránce, a jsou vybírány podle hierarchie šablon.

Pokud chcete změnit způsob výstupu obsahu na daný typ příspěvku, stránky nebo archivu , budete muset jeden z těchto souborů upravit nebo vytvořit nový.

Řekněme například, že váš motiv obsahuje soubor archive.php, který se používá k výstupu archivních stránek pro kategorie a značky. Chcete provést změny ve způsobu výstupu značek. Takže vytvoříte soubor s názvem „tag.php“, který by s vašimi vylepšeními vycházel z archivu.php.

Znovu buďte opatrní při úpravách souborů: mohly by poškodit váš web. Vždy testujte na místním instalace pomocí nástroje, jako je DevKinsta nebo nejprve pracovní web.

Bez ohledu na to, který z těchto typů souborů potřebujete upravit, měli byste to udělat správně. Přečtěte si níže část s osvědčenými postupy a zjistěte, jak upravit kódujte způsobem, který váš web nezruinuje a nezpůsobí vám bolesti hlavy.

Přizpůsobení motivu třetí strany pomocí podřízeného motivu

Pokud je motivem běžící na vašem webu je od třetí strany a chcete upravit kód, budete muset vytvořit podřízený motiv.

Je to proto, že pokud motiv upravíte přímo a poté jej aktualizujete ( které byste měli), ztratíte všechny provedené změny.

Vytvoření podřízeného motivu se skládá ze čtyř kroků:

1. Vytvoření nové složky ve wp-content / motivy.
2. V této složce vytvořte šablonu stylů. V této šabloně stylů tel l WordPress, že se jedná o podřízené téma vašeho stávajícího motivu.
3. Přidejte do podřízeného motivu kopie souborů, které chcete upravit, a upravte je tam.
4. Aktivujte podřízené téma v váš web.

WordPress vždy k výstupu obsahu použije soubor z podřízeného motivu, pokud v nadřazeném tématu není soubor výše v hierarchii. Pokud existují dvě verze stejného souboru, použije se ta z podřízeného motivu. To znamená, že váš nový soubor v podřízeném motivu přepíše soubor z nadřazeného motivu.

Osvědčené postupy pro přizpůsobení motivů WordPress

Takže plánujete přizpůsobení svého motivu. Než provedete změny, postupujte podle těchto tipů, abyste se ujistili, že to děláte bezpečně a že web neporušíte, nezraníte útoky nebo neztratíte kód.

Pokud je to možné , Přizpůsobit bez úpravy kódu

Pokud můžete provést svá přizpůsobení pomocí nástroje Customizer nebo kdekoli jinde na obrazovkách správce, je to bezpečnější než úpravy kódu.

Kód upravujte pouze v případě, že znáte CSS (pro šablonu stylů) a PHP (pro jiné soubory témat) a víte, jak to udělat bezpečně.

Proveďte změny pomocí místního vývojového webu.

Pokud upravujete kód ve svém motivu nebo vytváříte podřízený motiv pro provádění změn, měli byste vývojovou práci provést na místní instalace WordPress s nainstalovaným motivem a zkopírovaným obsahem z vašeho živého webu.

Tímto způsobem budete mít zrcadlo svého živého webu k otestování změn. Práce na místním webu nebude mít žádný vliv na váš aktivní web a může být rychlejší.

I když používáte nástroj Customizer, může být užitečné použít při testování místní verzi vašeho webu. může publikovat vaše změny a otestovat je, aniž by to ovlivnilo aktivní web.

Jakmile otestujete změny motivu, můžete je nahrát na svůj aktivní web, nebo ještě lépe, můžete je otestovat na pracovní web a poté jej aktivujte.

Použít řízení verzí

Při provádění změn motivu byste ke sledování změn měli použít řízení verzí.

Nejjednodušší to znamená změnit číslo verze motivu a uchovat kopie obou verzí. Pokud ale váš gong správně řídí verzi, musíte ke sledování změn použít službu jako GitHub.

Tímto způsobem, pokud změna způsobí problémy, můžete ji snadno vrátit zpět, aniž byste museli dělat manuály úpravy.

Řízení verzí je ještě užitečnější, pokud pracujete jako součást týmu, protože uvidíte, co dělají ostatní členové. Nezapomeňte si přečíst našeho průvodce git vs Github.

Použijte testovací web k otestování vašich změn

Pokud máte přístup k testovacímu webu (například bezplatný test Kinsta dodávaný se všemi plány) je nejbezpečnějším způsobem testování před aktivací nové verze vašeho motivu (nebo nového podřízeného motivu) na vašem živém webu.

Důvodem je, že jakýkoli místní web bude mít určité rozdíly od vašeho živého webu: je na jiném serveru (jeden vytvořený na váš místní počítač), může to být spuštěna jiná verze PHP nebo jakýkoli jiný nástroj, který provozuje váš web.

Vytvořte kopii svého živého webu na pracovním serveru a poté nahrajte a aktivujte nový téma. Důkladně otestujte svůj web, abyste se ujistili, že vše funguje, a poté můžete změny odeslat na svůj aktivní web.

Reagujte na svůj motiv

Jakékoli změny, které je třeba v motivu provést, by měly pracujte na mobilních i stolních počítačích.

S tím, jak stále více lidí přistupuje k internetu prostřednictvím mobilního telefonu a indexem Google od Googlu, je nyní pravděpodobně důležitější, aby vaše téma fungovalo na mobilních zařízeních než na něm dělá na ploše. Jakékoli změny, které v motivu provedete, musí být vhodné pro mobilní zařízení, nebo pokud je to vhodné, přednostně nejprve pro mobilní zařízení.

To se bude týkat hlavně všech změn, které ve stylu nebo rozložení provedete: zkontrolujte, zda nové rozložení funguje v mobilních zařízeních a že jste přidali dotazy na média, aby se rozložení přizpůsobilo různým velikostem obrazovky.

Pokud váš motiv nereaguje, bude to mít negativní dopad na hodnocení vašeho vyhledávače a míru konverze.

Pokud nemáte přístup k mnoha různým mobilním zařízením k testování, můžete pomocí nástroje, jako je BrowserStack, zjistit, jak váš web vypadá na různých zařízeních. Můžete také použít vývojářské nástroje v prohlížeči a responzivní zobrazení v nástroji Customizer.

Zajistěte, aby vaše přizpůsobení nemělo dopad na přístupnost

Jakékoli změny motivu musí být přístupné také pro uživatele se zdravotním postižením nebo smyslovým postižením .

Nejde jen o to, aby váš web fungoval na čtečkách obrazovky: pro velké množství lidí jsou důležité další aspekty, jako jsou barevná schémata a velikosti písma.

Pokud změny Vaším tématem, které vytváříte, je zesílení barev nebo zmenšení textu, zamyslete se znovu: toto může lidem ztěžovat čtení nebo interakci s vaším webem.

Než provedete jakékoli změny, otestujte svůj web pomocí kontroly přístupnosti a ujistěte se, že nevylučuje lidi.

Dodržujte standardy kódování WordPress

Pokud upravujete kód ve svém motivu nebo vytváříte chi U motivu ld se musíte ujistit, že je váš kód v souladu s kódovacími standardy WordPress.

Tyto standardy existují, aby zajistily konzistentní a kvalitu kódu a vyhly se nepořádku v kódu. Existují standardy pro PHP, CSS a JavaScript, takže si nějakou dobu zkontrolujte ty, které jsou pro vás relevantní, a ujistěte se, že je dodržujete.

Pokud je vaše stávající téma WordPress dobře kódované a píšete jakékoli nové kód způsobem, který je v souladu s tím, jste na cestě k zajištění souladu vašeho kódu. K jakýmkoli změnám motivu přidejte komentáře, abyste vy nebo ostatní věděli, co jste udělali, když se v budoucnu vrátíte k práci na kódu.Možná si myslíte, že nezapomenete, ale po několika měsících je překvapivě snadné zapomenout, proč jste upravili řádek kódu.

Potřebujete upravit téma #WordPress, aby bylo jedinečné? Existuje spousta možností! Vyberte si tu pravou pro vás v našem podrobném průvodci! 👚👔Kliknutím na Tweet

Shrnutí

Přizpůsobení motivu WordPress není tak obtížné. Někdy je to jednoduchý případ použití nástroje Customizer k provádění změn písem nebo barev (nezapomeňte si přečíst našeho podrobného průvodce o písmech WordPress). Jindy musíte vytvořit nový podřízený motiv, abyste do motivu přidali nový soubor šablony.

Možnosti přizpůsobení vašeho motivu zahrnují použití pluginu nebo nástroje Customizer, přímá úprava kódu motivu WordPress nebo vytvoření podřízeného motivu.

Určete pro sebe tu správnou možnost a proveďte bezpečně svá přizpůsobení, aniž by došlo k poškození webu.