a fejlécek testreszabása a WordPress-ben: kezdő útmutató

a WordPress fejléc testreszabásának egyszerű módját keresi?

mivel a fejléc minden oldal tetején található, alapvető szerepet játszik a webhely márkajelzésében, a látogatók navigálásában és a legfontosabb tartalom népszerűsítésében.

ahhoz azonban, hogy a webhely fejlécéből a lehető legtöbb előnyt élvezhesse, szerkesztési módra van szüksége, amelyet sok téma nem kínál.

ebben a bejegyzésben megosztunk néhány különböző taktikát, amelyekkel testreszabhatja a fejlécet a WordPress-ben mind az egyszerű drag-and-drop interfészek, mind a saját kód használatával.

a legegyszerűbb lehetőség az Astra téma és a drag-and-drop header builder használata, de megosztunk néhány más taktikát is, amelyek bármilyen WordPress témával működnek.

mi a WordPress fejléc?

a WordPress fejléc a webhely azon része, amely minden oldal tetején megjelenik. Jellemzően legalább két elemet tartalmaz:

• Oldallogó/azonosító
• navigációs menü (K))

például így néz ki a fejléc az Astra blogon. Láthatja, hogy tartalmazza az Astra logót, valamint két külön navigációs menüt:

az Ön igényeitől függően más elemeket is tartalmazhat, például a közösségi média ikonjait, a keresőmezőt, a promóciókat, a telefonszámát és egyéb információkat.

ha valaha is látnia kell, hogyan működik, a WordPress fejléc a fejlécben található.php fájl a WordPress témában.

A WordPress fejléc testreszabása az Astra segítségével

ha teljes ellenőrzést szeretne a WordPress fejléc felett, az ingyenes Astra téma drag-and-drop, kód nélküli módot kínál a WordPress fejléc teljes testreszabására.

a módosításokat azonnal láthatja a webhely élő előnézetében, és könnyen hozzáadhat különböző típusú tartalmakat, például gombokat, közösségi ikonokat, keresőmezőt és így tovább.

a kezdéshez telepíteni és aktiválni kell az Astra témát. A több száz előre elkészített bemutató webhely egyikét is importálhatja, hogy gyorsan elinduljon. Ha segítségre van szüksége ezen lépések bármelyikében, rengeteg útmutatónk van, amelyek segítenek Önnek:

• hogyan kell telepíteni Astra
• hogyan kell importálni starter sites

Miután az alap helyszínen készen áll, itt van, hogy testre a fejléc segítségével Astra.

1. Nyissa meg az Astra Header Builder

a kezdéshez menjen megjelenés .. testreszabás a WordPress irányítópultján a natív WordPress testreszabó elindításához. Ezután válassza a Header Builder opciót:

miután elindította a header builder-t, megjelenik egy új beállításkészlet, ahol vezérelheti a fejléc elrendezését:

2. Add and Organize Header Content

most a szórakoztató rész – tartalom hozzáadása. Láthatja, hogy három sor van a fejléc-készítőben. Minden sor a fejléc egy másik részének tartalmát szabályozza:

1. felett fejléc
2. elsődleges fejléc – ez az, ahol akkor tegye a “fő” tartalom.
3. a fejléc alatt

feltétlenül fel akarja venni a tartalmat az elsődleges fejlécbe, majd lehetősége van arra, hogy az Ön igényeinek megfelelően tartalmat adjon hozzá.

tartalom hozzáadásához kattintson arra a helyre, ahová tartalmat szeretne hozzáadni. Ez megnyit egy sor lehetőséget:

• elsődleges menü
• másodlagos menü
• logó
• gomb
• keresés
• szociális
• HTML 1
• HTML 2

ne feledje, hogy a tartalom hozzáadásakor kevesebb lehetőség jelenik meg. Például csak egyszer adhatja hozzá logóját, így ez a lehetőség eltűnik, ha már hozzáadott egy logót a fejlécéhez:

miután hozzáadott néhány tartalmat, rákattinthat arra a tartalomra a beállítások megnyitásához. Például, ha hozzáad egy gombot, akkor képes lesz arra, hogy ellenőrizzék a gombot szöveg és link.

a tervezési beállításokat a dolgok további testreszabásához is megnyithatja:

ha át szeretné rendezni a tartalmát, vagy át szeretné helyezni egy másik sorba, akkor csak át kell húznia:

3. Customize Header Layout

fent megmutattuk, hogyan lehet testreszabni az egyes elemeket a fejlécben. Számos lehetősége van a fejléc egészének testreszabására is.

először lépjen a fő fejléckészítő tervezés lapjára a fejléc szélességének és távolságának szabályozásához. Az egyes fejlécsorok fogaskerék ikonjára kattintva testreszabhatja annak magasságát és kialakítását:

4. Kísérletezzen különböző típusú fejlécekkel

attól függően, hogy az Astra vagy az Astra Pro ingyenes verzióját használja, további típusú fejlécekhez is hozzáférhet, például átlátszó fejlécekhez (ingyenes) és ragadós fejlécekhez (Pro).

ugyanazt a fejlécet és lábléckészítőt használhatja az átlátszó vagy ragadós fejléc tervezéséhez. Ezeket a lehetőségeket a Fejléctípusok szakaszban láthatja. Akkor kattintson rájuk, hogy bővítse a beállításokat, és tervezze meg a különböző fejléc típusok:

három másik módszer a WordPress fejléc testreszabására

míg az Astra drag-and-drop header builder a legegyszerűbb módot kínálja a WordPress fejléc testreszabására, vannak más taktikák is, amelyeket használhat, függetlenül attól, hogy milyen témát használ.

íme néhány a legjobb stratégiák közül…

1. Használja a téma testreszabási beállításait

a legtöbb WordPress-téma némi irányítást biztosít a webhely fejlécében a natív WordPress-Testreszabóban. Nem valószínű, hogy megkapja azt a részletességi szintet, amelyet az Astra ad, de kap néhány lehetőséget a fejléc megjelenésének és működésének szabályozására.

ezek a lehetőségek a témától függően változnak, de általában megnyithatja őket a fejléc elemei melletti kék ceruza ikonra kattintva. Például az új húsz Huszonegy alapértelmezett témában láthatja, hogy testreszabhatja a:

• logó
• honlapcím
• menü

ha további segítségre van szüksége, olvassa el a témafejlesztő dokumentációját.

2. Használja az Elementort és egy ingyenes egyéni fejléc plugint

ha nem ismeri az Elementort, ez egy vizuális, drag-and-drop tervező eszköz, amellyel tartalmat hozhat létre a webhelyén. Az ingyenes Elementor-fejléc, lábléc & Blocks Template custom header WordPress plugin segítségével az Elementor ingyenes verzióját használhatja saját WordPress egyéni fejlécének megtervezéséhez.

ez a plugin tökéletesen működik az ingyenes Astra témával, valamint bármely más WordPress témával, amelyet esetleg használ.

az induláshoz telepítse és aktiválja az ingyenes plugint WordPress.org. telepítenie kell az Elementor ingyenes verzióját is, ha még nem tette meg.

miután ezt megtetted, menj a megjelenés Xhamsterhez fejléc lábléc & blokkok és kattintson az Új hozzáadása gombra:

adjon nevet a sablonnak, és válassza a fejléc lehetőséget a sablon típusa alatt. Használhatja a Megjelenítés vagy a felhasználói szerepkörök opciókat is, hogy a fejlécet meghatározott tartalomra/felhasználókra irányítsa.

ezután tegye közzé a fejlécet, majd kattintson a Szerkesztés Elementorral elemre a visual builder megnyitásához:

most teljes mértékben testreszabhatja fejlécét az Elementor vizuális drag-and-drop felületével. A plugin is ad új fejléc, lábléc & blokkok widgetek, amelyek segítségével hozzá fontos helyszínen elemek, mint a webhely logója vagy a navigációs menü:

ha többet szeretne megtudni az Elementor használatáról, nézze meg a teljes Elementor oktatóanyagot vagy az Elementor áttekintést.

3. Használjon egyéni kódot (haladó)

végül, ha haladó felhasználó vagy, testreszabhatja a WordPress fejlécét a saját kódjával is. Ehhez legalább HTML, PHP és CSS ismeretekre van szükség, így ez nem lehetséges a nem technikai felhasználók számára.

ha nem ismeri ezeket a kódolási nyelveket, akkor ragaszkodnia kell a lista előző módszereinek egyikéhez.

két részből áll a kód használata a fejléc testreszabásához:

• HTML / PHP – ez szabályozza a fejléc tényleges tartalmát.
• CSS – ez vezérli a fejléc stílusát.

mint korábban említettük, a webhely Fejléc tartalma a fejlécben található.php fájl. Tehát a fejléc tartalmának testreszabásához közvetlenül ezzel a fájllal kell dolgoznia. Vagy egyes témák, például az Astra, horgokat is kínálnak, amelyekkel tartalmat adhat a fejléchez.

az Astra visual hooks útmutatóban láthatja, hogy számos lehetősége van a fejléc testreszabására:

ha szerkeszteni szeretné a téma fejlécét.php fájl közvetlenül, használjon gyermek témát, hogy megbizonyosodjon arról, hogy nem írja felül a módosításokat a téma frissítésekor.

másrészt, ha horgokat használ, akkor nem kell Gyermek témát használnia, amíg olyan plugint használ, mint az Astra Hooks vagy a kódrészletek. Ha közvetlenül hozzáadja a horgokat a téma funkcióihoz.php fájl, akkor is használjon gyermek témát, bár.

az Astra Pro segítségével horgokat is hozzáadhat az Astra Pro egyedi elrendezési funkciójával.

az Astra Pro egyedi elrendezéseinek ügyes dolga az, hogy a megjelenítési szabályok segítségével pontosan szabályozhatja, hogy a változások mikor jelennek meg. Például hozzáadhat egyéni tartalmat a fejlécéhez, amely csak a bejelentkezett felhasználók számára jelenik meg.

így szabhatja testre a fejléc tartalmát – de mi a helyzet a stílussal?

a fejléc stílusának testreszabásához szerkesztheti a stílust.css fájl közvetlenül, ha gyermek témát használ. Vagy használhatja a WordPress testreszabó további CSS területét saját egyéni stílusok hozzáadásához a fejléchez.

testreszabhatja a WordPress fejlécét ma

a WordPress fejléc alapvető szerepet játszik webhelye sikerében. Segít márkázni webhelyét, irányítani a látogatókat a legfontosabb tartalmakhoz, népszerűsíteni a fontos információkat vagy a közösségi profilokat, és még sok más.

a webhely fejlécének teljes ellenőrzésének legegyszerűbb módja az ingyenes Astra téma használata. Az Astra segítségével hozzáférést kap egy vizuális, drag-and-drop fejléckészítőhöz. Nincs szüksége kódra vagy külső bővítményekre – a fejléc 100% – os irányítását a WordPress testreszabó belsejéből kapja.

más helyzetekben más téma testreszabási beállításait is használhatja, az Elementor – Header, a lábléc & Blocks Template plugint, vagy a saját kódját, ha rendelkezik a műszaki ismeretekkel.