Hogyan lehet testre szabni egy WordPress téma színeit
Posted in Marketing, WordPress by WP Engine
Last updated on December 23rd, 2020
A WordPress használatának egyik legjobb része, hogy több ezer témához férhetsz hozzá, amelyekkel testre szabhatod webhelyed stílusát. Néha azonban megtalálja a tökéletes témát, csak hogy rájöjjön, hogy nem olyan színsémát tartalmaz, ami tetszik.
Ez frusztráló lehet, de nem kell, hogy kisiklassa a terveit. Egy kis munkával megváltoztathatja a téma színopcióit, és a webhelyét olyan megjelenésűvé teheti, amilyennek szeretné.
Ebben a cikkben két módszert fogunk megvizsgálni, amelyekkel testre szabhatja a WordPress téma színeit, beleértve a kézi megközelítést és a plugin módszerét. Lássunk hozzá!
Hogyan változtassuk meg a WordPress téma színeit
Ebben a részben megmutatjuk, hogyan változtathatjuk meg a WordPress téma színeit kézi módszerrel. Ehhez egy “gyermektémát” kell használnod, így nem veszíted el az általad elvégzett módosításokat, amikor a “szülő” téma frissül.
Most, egy gyermektéma beállítása szinte mindig okos ötlet, ha bármilyen egyéni változtatást tervezel a webhelyed keretrendszerén. Beszéljünk arról, hogyan végezze el a munkát.
1. lépés: Gyermektéma létrehozása
A gyermektéma a szülő téma másolata, amely ugyanazokat a stílusokat örökli. Módosíthatod a kódját anélkül, hogy befolyásolnád a szülőstílust, és nem íródnak felül, amikor frissítened kell a témát. Ez a megközelítés lehetővé teszi, hogy biztonságosan szerkeszthesse webhelye stílusát, így ha hibázik, visszaállhat a szülőre, és kezdheti elölről.
A gyermek téma létrehozásakor kétféleképpen járhat el. Először is, követheti a kézi megközelítést, amelyet ebben a cikkben tárgyalunk, és négy lépésben összefoglalható:
- Kapcsolódjon a weboldalához FTP (File Transfer Protocol) protokollon keresztül, egy olyan kliens segítségével, mint például a FileZilla.
- Navigáljon a WordPress témák mappájához.
- Hozzon létre egy új mappát a gyermek téma számára.
- Állítson be egy style.css fájlt a gyermek téma számára.
Ha azonban nem érzi jól magát a WordPress fájlok kézi szerkesztésében, választhatja inkább egy plugin használatát. Erre a forgatókönyvre a Child Theme Configurator-t ajánljuk. Ezzel a pluginnal létrehozhatsz egy gyermektémát, és egy egyszerű menü segítségével konfigurálhatod a beállításait.
Azt a módszert természetesen szabadon használhatod, amelyet jobban kedvelsz. Ha a gyermektémád be van állítva, aktiválhatod, és továbbléphetsz a következő lépésre.
2. lépés: Jelentkezz be a WordPressbe, és nyisd meg a Testreszabót
Mielőtt megváltoztathatnád a WordPress téma színeit, be kell jelentkezned a műszerfaladra. Ha már ott vagy, navigálj a Megjelenés > Szerkesztő fülre:
Ezben találsz egy egyszerű szövegszerkesztőt, amellyel módosíthatod a gyermektémád fájljait. Ne feledd, hogy ezt FTP és a kedvenc szövegszerkesztőd segítségével is megteheted, de az eredmény mindkét módon ugyanaz lesz.
Ha inkább élőben szeretnéd előnézni az elvégzett módosításokat, a WordPress Customizer segítségével is szerkesztheted a témád színeit. Ehhez navigálj a Megjelenés > Testreszabás fülre, majd nyisd meg a Kiegészítő CSS szakaszát:
Mindkét esetben Cascading Style Sheets (CSS) segítségével kell módosítanod a témád színeit. Itt jön az utolsó lépésünk.
3. lépés: A WordPress téma színeinek módosítása
Ez a lépés meglehetősen egyszerű, ha már ismeri a CSS-t. A témádon belül minden elemnek saját neve vagy “osztálya” van, amelyet CSS-kóddal megcélozhatsz. Tudnod kell, hogy mi a megfelelő osztály, majd HEX színkódok segítségével meg kell változtatnod.
Ha például meg akarod változtatni a témád háttérszínét, akkor egy ilyen CSS-töredéket adhatsz hozzá a gyermek témádhoz (az előző szakaszban leírt módszerek bármelyikével):
background-color: #XXXXXX;
A kód első része a módosítani kívánt elem megfelelő osztályát célozza meg. Ezután már csak a használni kívánt HEX színt kell megadnod. Ha kész vagy, ne felejtsd el elmenteni a változtatásokat a témád stíluslapjába.
Szerencsére, mivel egy gyermektémát használsz, szabadon kísérletezhetsz anélkül, hogy aggódnál amiatt, hogy bármit is tönkreteszel az oldaladon. Ha még nem ismered a CSS-t, nézd meg ezt az útmutatót arról, hogyan azonosíthatod az elemeket a webhelyeden belül. Ezután addig játszadozhat a HEX színkódokkal, amíg nem talál egy olyan kombinációt, ami tetszik.
Pluginok, amelyek megváltoztatják a WordPress téma színeit
Ha CSS helyett inkább pluginokat szeretne használni, örömmel fogja tudni, hogy számos lehetőség van a WordPress téma színeinek testreszabására. Nézzük át két kedvenc eszközünket.
Plugin 1: Child Theme Configurator
A Child Theme Configurator a legjobb választásunk, mert lehetővé teszi egyrészt egy gyermektéma létrehozását, másrészt annak színsémájának testreszabását. Ez azt jelenti, hogy a korábban tárgyalt lépések nagy részét átugorhatja, és sokkal gyorsabban elkezdhet kísérletezni a színpalettákkal. Ezzel a pluginnal megváltoztathatod a betűtípusok színét, a háttér tónusait és még sok minden mást.
Plugin 2: Central Color Pallete
Amint a neve is mutatja, a Central Color Pallete lehetővé teszi a téma színpalettájának megváltoztatását. Ez a bővítmény számos népszerű témával és bővítménnyel jól integrálható, és lehetővé teszi, hogy kihagyd a WordPress szerkesztőjének használatát a színek kiválasztásához és váltásához. A Central Color Palette két olyan pluginnal működik zökkenőmentesen együtt, mint a Beaver Builder és az Elementor.
Update Your WordPress Digital Experience with WP Engine
Függetlenül attól, hogy milyen témát választ, olyan webtárhelyre lesz szüksége, amely biztosítja a stabilitást és a teljesítményt, amelyre a webhely működtetéséhez és testreszabásához szüksége van. A WP Engine-nél mindkettőt megkapod, és hozzáférést kapsz egy kiváló támogatói csapathoz.
Ha inkább a Do-It-Yourself (barkácsolj magadnak) típushoz tartozol, számos oktatóanyagot is közzéteszünk, amelyeket használhatsz a hibaelhárításhoz vagy a webhelyeden végzett változtatásokhoz. Nézze meg terveinket, és próbáljon ki minket!