Articles

Hogyan lehet testre szabni egy WordPress téma színeit

Posted in Marketing, WordPress by WP Engine

Last updated on December 23rd, 2020

customize wordpress theme colors

customize wordpress theme colors

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ó:

  1. 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.
  2. Navigáljon a WordPress témák mappájához.
  3. Hozzon létre egy új mappát a gyermek téma számára.
  4. Á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:

how to customize wordpress themes

how to customize wordpress themes

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:

change wordpress theme colors

change wordpress theme colors

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

change font color in wordpress

change font color in wordpress

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

how to change wordpress color scheme

how to change wordpress color scheme

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!