Előtted áll a feladat: be kéne illeszteni egy kódot a weboldal fejlécébe, de fogalmad sincs hogyan kezdj neki? Mint egy kezdő szakács a konyhában: tudod, hogy milyen alapanyagot kell használnod, de fogalmad sincs, hogy mikor és mennyit, nem? Mert mi történik, ha rossz helyre kerül a kód? A weboldalad összeomolhat éppen úgy, mintha az a kezdő szakács a tortát nem a hűtőbe, hanem a sütőbe tenné.
De nyugi, nem kell programozónak lenned ahhoz, hogy sikerrel járj! Ebben a cikkben megmutatjuk, hogyan tudsz HTML, CSS, JS vagy akár PHP kódokat beszúrni WordPress honlapod fejlécébe és láblécébe anélkül, hogy kihullana közben az összes hajszálad az idegtől. Legyen szó Google Analytics követőkódról, Facebook pixelről, meta tag-ekről vagy más megoldásokról, most megtanulhatod, hogyan tedd őket a helyükre – bővítménnyel vagy anélkül.
Milyen kódokat szokás a leggyakrabban elhelyezni?
Maradva a szakács példánál, a különböző kódok beillesztése a weboldaladba épp olyan szükséges, mint a fűszerezés egy finom ételnél. Elkerülhetetlen a használata, de ha túl sokat vagy rosszat teszel, az egész tönkremehet és dobhatod ki a kukába.
Először is nézzük mik a leggyakrabban felmerülő kódok, amiket szinte minden oldalba be szoktak építeni:
- Google Analytics és más analitikai kódok:Ezek segítenek nyomon követni, hányan látogatják az oldaladat, honnan jönnek, és mit csinálnak. Ide tartozik a például a Google Tag Manager, a Hotjar vagy bármelyik program, amelyik tracking kódok elhelyezését kéri tőled.
- Meta tag-ek:Az oldalad láthatóságát javítják az olyan keresőmotorokban, mint a Google. A tag-ek segítségével adhatsz meg például kulcsszavakat és leírásokat. Ilyenek lehet például:<meta name=”description” content=”Kiváló weboldal leírása”>
- Facebook pixel és hasonlók: A Facebook és más platformok szokták kérni a marketing pixeljük beillesztését a weboldaldva, amely segít a hirdetések pontosabb célzásában.
- Egyedi CSS vagy JavaScript kódok:Ezekkel extra funkciókat vagy dizájn elemeket adhatsz az oldaladhoz. Például interaktív animációk, dinamikus tartalom vagy játékos elemek.
Hogyan hat a fejlécbe vagy láblécbe tett kód a keresőoptimalizálásra?
Egyes kódok elhelyezése szükségszerű, de fontos észben tartani, hogy ezek kihathatnak a keresőoptimalizálással elért eredményeidre is.
Az alábbiakban összeszedtünk néhány szempontot, ami a kódok által befolyásolhatják a SEO-dat:
1. Gyorsabb oldalbetöltés
Ha túl sok vagy rosszul optimalizált kódot teszel a fejlécbe, az lassíthatja az oldalad betöltési idejét. A Google és a felhasználók sem szeretik a lassú oldalakat.
2. Jobb keresőmotoros láthatóság
A meta tag-ek (pl. kulcsszavak, leírás) segítenek a keresőmotoroknak pontosabban megérteni az oldalad tartalmát. Ha ezek nincsenek rendben, az negatív hatással lehet a helyezésedre.
3. Pontos nyomkövetés és elemzés
A Google Analytics és más analitikai eszközök megfelelő elhelyezése biztosítja, hogy a statisztikáid pontosak legyenek. Ez fontos a tartalom és a marketing optimalizálásához.
4. Felhasználói élmény optimalizálása
Egyedi CSS és JavaScript kódokkal könnyen javíthatod az oldalad kinézetét és funkcionalitását, ami közvetetten javítja a SEO-t, mivel a felhasználók hosszabb ideig maradnak az oldalon.
Kód beillesztése a fejlécbe és láblécbe
Ha már tudod, milyen kódokat szeretnél elhelyezni, a következő lépés az, hogy tudd ezeket pontosan hova és hogyan tedd. Ebben a részben megmutatjuk, hogyan tudsz gyorsan és biztonságosan kódot hozzáadni a WordPress oldalad fejlécéhez és láblécéhez – akár bővítménnyel, akár anélkül.
Kód beillesztése bővítmény nélkül (functions.php használatával)
Ha nincs akarsz újabb bővítményt telepíteni, mert mondjuk minimalizálni szeretnéd az oldalad terhelését, a WordPress functions.php fájl módosítása jó megoldás lehet. Ezt a fájlt az admin oldalon vagy az aktuális sablonod mappájában találod, és itt adhatsz hozzá egyedi kódokat.
1. lépés: Gyerek-téma létrehozása
Mivel valószínűleg jönnek frissítések a sablonhoz, amit használsz, így a legelső frissítésnél minden módosításod el fog tűnni. Ez a WordPress működésének természetes része, egyszerűen az összes fájl lefrissül és visszaáll az alapértelmezett állapotába.
Ahhoz, hogy ezt elkerüld, létre kell hoznod egy gyerek témát. A gyerek téma (child theme) egy külön sablon, amely örökli az eredeti sablon (szülő téma) funkcióit, de a módosításaidat különálló fájlokban tárolja.
A gyerek téma létrehozásához kelleni fog egy külön mappa a weboldalad sablon könyvtárban. Például ha az Astra sablont használod, akkor lesz egy/wp-content/themes/astra/ mappád, és emellé kell létrehoznod egy/wp-content/themes/astra-child/ mappát – de adhatsz neki bármilyen nevet.
Következő lépésként3 fájlra lesz szükséged ebben az új mappában, hogy működjön a téma:
1.) style.css: Hozd létre ezt a fájl, benne az alábbi kóddal.
Theme Name:A gyerek sablon neve (pl. Astra Child – ezt az elnevezést fogod látni a WordPress adminon)
Author:A te neved (ezt a sort opcionálisan kihagyhatod)
Template:A szülő sablon mappájának pontos neve (pl. astra)
*/
Itt az egyes értékeket állítsd be a leírtaknak megfelelően.
2.) functions.php: Hozd létre ezt a fájl, benne az alábbi kóddal.
// A szülő-téma stílusainak betöltése
function child_theme_styles() {
wp_enqueue_style(‘parent-style’, get_template_directory_uri() . ‘/style.css’);
}
add_action(‘wp_enqueue_scripts’, ‘child_theme_styles’);
Itt nem kell semmit se módosítanod, csak másold be ezt a kódot.
3.) screenshot.jpg: A szülő sablon könyvtárából másold át a screenshot.jpg fájlt a gyerek sablon mappájába, így ugyanazzal a képpel fog megjelenni a WordPress admin oldalon. Ha más előnézeti képet szeretnél látni a gyerek sablonnál, akkor egyszerűen tölts fel egy ugyanekkora képet, ugyanezzel a névvel a mappába.
Ha mindezzel megvagy, mindössze annyi a dolgod, hogy frissítsd le a WordPress admin oldalt és aktiváld a gyerek témát. Ezután a módosításokat mindig a gyermek-téma functions.php fájljában végezd el, így a frissítések nem érintik a változtatásaidat.
2. lépés (opcionális): Admin menü megkeresése vagy előhozása
Ha nem bánod, hogy bármilyen plusz kód beillesztéséhez meg kell nyitnod az előbb létrehozott style.css vagy functions.php fájlokat a szerveren, akkor ezt a részt át is ugorhatod. Ha viszont szeretnéd a WordPress admin oldaláról szerkeszteni, akkor navigálj el aMegjelenés >Sablon fájlszerkesztő menüpontba.
Ha ezt nem találod, akkor annak valószínűleg biztonsági beállítási okai vannak. Egyrészt véletlenül is lehet galibát okozni akár egy apró módosítással, másrészt ha illetéktelenek bejutnak az admin oldalra, itt könnyen elhelyezhetnek káros programokat. Szóval ennek tudatában a következőt teheted:
Nyisd meg meg cPanelen vagy FTP-n keresztül a weboldalad könyvtárát és nyisd meg awp-config.php fájlt szerkesztésre. Miután ez megvan keresd meg a következő sort:define(‘DISALLOW_FILE_EDIT’, true);. Ennek az értékét állítsd átfalse-ra, majd frissítsd le a WordPress admint, és a korábban említett menü meg fog jelenni.
3. lépés: Szerkesztés
Ha a WordPress adminról akarod szerkeszteni a fájlt, akkor annyi a dolgod, hogy kiválaszd a sablont (1.) – és nyomj is rá a kiválasztás gombra –, majd azon belül a fájlt (2.), amit szerkeszteni szeretnél – leggyakrabban, például követőkódok esetén a functions.php-t. Itt a korábban bemásolt kód (3.) után adj 2-3 sortörést, hogy jól elválaszd a gyári kódot – ami szükséges a működéshez – azoktól az egyedi kódoktól, amiket külön be szeretnél rakni.
Ezen a ponton4 lehetőséged van, ahova el tudod helyezni a kódot, és ahova a legtöbb szoftver kéri, hogy helyezd el:
- fejlécbe
- nyitó body tag után
- láblécbe
- záró body tag elé
Ezekhez az alábbi kódokra lesz szükséged:
1.) Fejléc
echo ‘Ide jön az aposztrófok közé a kód, amit be szeretnél szúrni’;
}
add_action(‘wp_head’, ‘add_code_to_header’);
Ez a kód részlet a megadott kódot elhelyezi valahova anyitó és záró head tag közé.
2.) Nyitó body tag után
echo ‘Ide jön az aposztrófok közé a kód, amit be szeretnél szúrni’;
}
add_action(wp_body_open, add_code_after_body_open);
Ez a kód részlet a megadott kódot elhelyeziközvetlenül a nyitó body tag után.
3.) Lábléc
echo ‘Ide jön az aposztrófok közé a kód, amit be szeretnél szúrni’;
}
add_action(‘wp_footer’, ‘add_code_to_footer’);
Ez a kód részlet a megadott kódot elhelyezivalahova a a weboldal HTML szerkezetének vége felé.
4.) Záró body tag elé
echo ‘Ide jön az aposztrófok közé a kód, amit be szeretnél szúrni’;
}
add_action(‘wp_footer’, ‘add_code_before_body_close’, 99);
Ez a kód részlet a megadott kódot elhelyeziközvetlenül a záró body elé után.
Amint kész vagy, egyszerűen mentsd el a változtatásokat (4.), és ellenőrizd az oldalad forráskódjában, hogy a script megjelent-e.
Fontos! Mindig készíts biztonsági másolatot a fájlokról, mielőtt módosítanád őket.
4. lépés (opcionális): Kód hozzáadása csak bizonyos oldalakhoz
Előfordulhatnak olyan esetek, amikor egyes kódokat csak bizonyos oldalakon szeretnél futtatni. Ehhez csak az előző kód részletek valamelyikét kell kiegészíteni egy feltétellel.
Például a fejlécbe illesztett kódot a következőképpen módosíthatod:
if (is_page(‘kivalasztott-oldal’)) {
echo ‘Ide jön az aposztrófok közé a kód, amit be szeretnél szúrni’;
}
}
add_action(‘wp_head’, ‘add_code_to_header’);
Azis_page(‘kivalasztott-oldal’)-nál a kiválaszott oldal URL végét kell megadni. Tehát példáulhttps://blog.tarhely.eu/top-12/ esetébenis_page(‘top-12’) lesz a helyes kód. Ha több oldalon is szeretnéd ugyanazt a kódot használni, akkor || operátorral elválasztva tudod felsorolni a megadott oldalakat. Egy ilyen felsorolás a következőképpen nézhet ki:if (is_page(‘egyik-kivalasztott-oldal’) || is_page(‘masik-kivalasztott-oldal’)).
Ha pedig több különböző kódot szeretnél elhelyezni különböző oldalakon, akkor pedig az egészif szerkezetet meg kell ismételni és az egyik if-nél megadsz egy bizonyos feltételt, a másiknál pedig másikat.
Legnépszerűbb bővítmények kódok beillesztésére
Ha nem akarsz a fájlokkal és a kódolással bajlódni, hanem egy egyszerű és gyors megoldást keresel, akkor egy vagy több bővítményre lesz szükséged. Az alábbi bővítmények a legnépszerűbbek és legmegbízhatóbbak:
- Insert Headers and Footers:Egy intuitív eszköz, amellyel egyszerűen adhatsz hozzá HTML, CSS vagy JavaScript kódokat a fejléchez és lábléchez.
- Header, Footer and Post Injections:Haladóbb funkciókkal, például kódok különböző oldalakhoz történő testreszabásával.
- Elementor Pro: Ha az Elementort használod és van hozzáférésed a Pro verzióhoz, akkor el tudod érni az egyedi kódok hozzáadása menüt a bővítményen belül.
- Egyéb bővítmények: A felsoroltakon kívül számos szoftvernek van saját WordPress bővítménye, ami kifejezetten a követőkódok és egyéb extra funkciók biztosítására jöttek létre. Ilyen például aFacebook for WooCommerce,Hotjar,MailerLite, vagy aSite Kit by Google. Ez esetben telepítened kell az összes olyan bővítményt, amelyre szükséged van.
Ezeknek a bővítményeknek a legnagyobb előnye, hogy gyorsan megvagy vele, könnyű használni és nem igényel programozói tudást. Hátránya viszont, hogy ezek betöltése kihatással lehet az oldalad teljesítményére és minél több bővítményt telepítesz, annál lassabb weboldalra számíthatsz végeredményben.
Gyakori hibák, megoldások és speciális beállítások
Még a legjobbakkal is megesik, hogy egy kódsor hibásan kerül beillesztésre, vagy egy frissítés miatt eltűnik, amit utána órákig keresel, és közben azt kérdezgeted magadtól, hogy “miért nem működik már megint?”.
Ebben a részben összegyűjtöttük a leggyakoribb hibákat, amelyek előfordulhatnak a kód fejlécbe vagy láblécbe illesztése során, és azt is megmutatjuk, hogyan kerülheted el őket egyszerűen.
- Hibás szintaxis:Egy rosszul elhelyezett vessző, idézőjel vagy egy hiányzó pontosvessző miatt az egész weboldalad összeomolhat egy pillanat alatt.
- Ismétlődő kódok:Ugyanaz a kód többször kerül beillesztésre, ami – kód méretétől, összetettségétől és külső hivatkozásaitól függően – lelassíthatja az oldalad.
- Nem megfelelő hely:Bizonyos kódoknak a fejlécben kell lenniük (pl. meta tag-ek), másoknak a láblécben (pl. követő szkriptek). Ha rossz helyre kerülnek, nem működnek rendesen.
- Konfliktus bővítményekkel:Egyes bővítmények automatikusan generálnak kódokat, amelyek ütközhetnek a manuálisan beillesztett kódokkal.
Néhány hasznos gyakorlati tipp
Csak néhány gondolat, ami segíthet ha kódok beillesztéséről van szó:
- Mindig ellenőrizd a kód szintaxisát (például ChatGPT-vel),
- Használj fejlesztői eszközöket (például a böngésződ fejlesztői konzolját) a hibák gyors megtalálásához,
- A redundancia elkerülése érdekében pedig érdemes egy listát tartani a már beillesztett kódokról.
Tippek a biztonságos kód használathoz
Abiztonság alapvető fontosságú, különösen, ha külső kódokat adsz hozzá az oldaladhoz, ezért összeszedtünk pár hasznos tippet, amiket érdemes fejben tartani:
- Csak megbízható forrásból származó kódokat használj:Ne másolj be kódot véletlenszerű fórumokról – különösen ha nem érted mit csinál a kód –, mert biztonsági rést okozhatnak.
- Mindig HTTPS-t használj a külső scriptekhez:Például<script src=”https://example.com/script.js”></script>
- Készíts biztonsági mentést:Mielőtt bármit módosítasz, készíts mentést a fájljaidról és az adatbázisról.
- Használj biztonsági bővítményeket:Olyan bővítmények, mint aWordfence vagy a Sucuri, segítenek az oldalad biztonságának fenntartásában.
Összegzésképpen, a fejlécbe és láblécbe helyezett kódok fontosak lehetnek marketing és egyéb szempontokból, de ha nem vagy elég körültekintő, könnyen hatalmas problémákat okozhatnak. A fentiekre való odafigyeléssel azonban elkerülheted a leggyakoribb hibákat, ezzel biztosítva az oldalad stabilitását és biztonságát.
Gyakori kérdések és válaszok
Hogyan kell kódot beilleszteni WordPress fejlécbe?
A kód elhelyezése a WordPress fejlécbe, bodyba és láblécbe nem nehéz feladat. Használhatsz olyan bővítményeket, mint azInsert Headers and Footers,Header, Footer and Post Injections, vagyElementor Pro, illetve lehetőséged van közvetlenül a sablonodfunctions.php fájljában hozzáadni a kódot a megfelelőwp_head éswp_footer hook-ok segítségével.
Hogyan tudok kódot hozzáadni a WordPress-hez bővítmény nélkül?
Ha nem akarsz bővítményeket telepíteni, a WordPress sablonodfunctions.php fájlja a legjobb barátod. Egyedi HTML, CSS, JS és PHP kódokat adhatsz hozzá awp_head éswp_footer hook-okkal. Ez a megoldás némi technikai tudást igényel, de könnyen testreszabható.
Hogyan kell beágyazni kódot WordPress weboldalba?
WordPress-ben a kód beágyazása többféleképpen lehetséges. Ha csak egy egyszerű HTML, CSS, vagy JavaScript kódot szeretnél hozzáadni, nem érdemes bővítményt, különösen ha használsz már egyoldalépítőt. A legtöbb ilyen szerkesztőben használhatszHTML blokkot, ami segítségével hozzá tudsz adni kódot az egyes oldalakhoz.
Összefoglalás
A WordPress fejlécébe és láblécébe történő kód beillesztés nem olyan bonyolult, mint elsőre tűnik. Akár bővítményeket, akár manuális módszereket használsz, a lényeg, hogy a megfelelő helyre és módon illessz be minden kódot. Az itt tanultakkal elkerülheted a leggyakoribb hibákat, és az oldalad mindig optimalizált marad. Neked melyik megoldás tetszik jobban? Írd meg kommentben!
Ha pedig nem magad szeretnéd ezeket intézni, akkor érdemes kiadni a feladatot egy profi weboldalkészítőszabadúszónak vagyügynökségnek, akik igény szerint nem csak a kódok beillesztésében segíthetnek, hanemkarban is tartják a weboldaladat, vagy akár fel is tuningoljákSEO szempontból.
Források:
Kinsta:Add Code to WordPress Header and Footer
WPAstra:Unlock WordPress: Add Code to the Header and Footer
Jetpack:How to Add & Edit Code in WordPress (HTML, CSS, PHP)
