Gomb hozzáadása a menüsorhoz GeneratePress kinézetben

Ebben a cikkben a GeneratePress kinézeten keresztül megmutatom, hogyan lehet könnyen hozzáadni WordPress-ben egy „Call to action” gombot a menüsorhoz.

Igaz, hogy a GeneratePress kinézetben nincs „gyárilag” ilyen funkció, de ahhoz, hogy a menüsoron megjelenjen egy gomb, nem kell semmilyen programozói tudás, sem külön bővítmény. Csupán pár egyszerű lépést kell követni.

Miért jó, ha van a menüsoron egy gomb?

A weboldal megjelenését professzionálisabbá teszi, illetve a felhasználó figyelmét is megragadja. Emiatt a gombra nagyobb eséllyel kattintanak, mintha csak egy szimpla menüpontként jelenne meg a gomb.

Így néz ki (kapcsolat gomb):

Gomb a menüsor végén
Gomb a menüsor végén

Hogyan kell gombot tenni a WordPress menüsorba?

A WordPress adminisztrációs felületén meg kell keresni a Megjelenés => Menük menüpontot. A Képernyő opciók (ezt a funkciót egyébként érdemes megjegyezni, mert több képernyőn is hasznos beállítási lehetőségeket lehet itt találni) alatt be kell pipálni a CSS osztályok opciót. itt:

Képernyő opciók
Képernyő opciók

Ezután egy egyéni hivatkozást kell létrehozni a menüsorra, ahol a CSS osztályok részt ki kell tölteni. Erre azért van szükség, mert majd erre hivatkozva lehet a CSS fájlban elhelyezni egy kódsort, ami majd gombbá alakítja a sima menüpontot. Példa adat (mindegy mi van ideírva, de a CSS-ban is ezt kell majd megadni) a CSS osztály kitöltésre:

Egyéni hivatkozás, CSS osztállyal
Egyéni hivatkozás, CSS osztállyal

Létrehozás után a Menü mentése gombot kell megnyomni. Ezzel bekerül a menüpont a menüsorra. De még mindenféle formázás nélkül.

Az előzőek után már egy sima menüpontként megjelenik a menüsoron a hozzáadott új hivatkozás. Ezt fogjuk gombbá alakítani egy pár soros CSS kóddal.

Meg kell keresni a Megjelenés => Testreszabás => További CSS részt, és az alábbi kódot kell hozzáadni:

A kód első része a gomb „alapértelmezett” megjelenésére vonatkozik, a második része pedig a gomb azon állapotára, amikor az egérrel fölémegy valaki.

Letöltés:
CSS kód letöltése

A kódot természetesen át lehet alakítani, és más kinézetet használó WordPress weboldal menüsorába is be lehet tenni ezzel a módszerrel gombot.

Cikkértesítő

Ha nem szeretne lemaradni az új cikkekről, akkor iratkozzon fel az értesítőre!

Extra ajándékként rögtön elküldöm a 199 weboldal készítés hiba című cikksorozatom elérhetőségét!

Szólj hozzá!