Témák HTML-szerkezete és burkolóelem létrehozása

Az Oldalgörgetés tehetetlenségi görgetése, a snap görgetés közbeiktatott szekciója és a görgetést követő fejléc is a téma HTML-elemeinek CSS-szelektorait használja. Ez a fejezet megmutatja, hogyan néz ki a népszerű témák szerkezete, és mit tegyél, ha a témádban nincs burkolóelem.

Egy HTML-oldal szerkezete

Minden oldal rácsa ezekből áll:

• fő burkolóelem (WRAPPER),
• fejléc (HEADER),
• fő tartalom (CONTENT),
• lábléc (FOOTER).

A szerkezet témánként eltér. A szelektorokat (.osztály vagy #azonosító) a téma kódjából, vagy a böngésző vizsgáló eszközéből (jobb gomb → Vizsgálat) tudod kiolvasni.

Téma	Burkolóelem	Fejléc	Tartalom	Lábléc
Hello (Elementor)	nincs, lásd lent	.site-header	.site-main	.site-footer
OceanWP	#outer-wrap (benne #wrap)	#site-header	#main	#site-footer
Astra	.site	.site-header	.site-content	.site-footer
Page Builder Framework	#container	#header	#content	#footer

Az OceanWP szerkezete két burkolóból áll: a külső (#outer-wrap) a nézetablak, a belső (#wrap) a mozgó tartalom. A bővítmény tehetetlenségi görgetésének alapértelmezett szelektorai (#outer-wrap és #wrap) is ezek.

Miért kell burkolóelem?

A tehetetlenségi görgetéshez két elem kell, amelyek JavaScripttel együtt hozzák létre a hatást:

1. a nézetablak (OUTER-WRAP, #outer-wrap),
2. a mozgó tartalom (WRAP, #wrap).

Sok téma a fejlécet, a fő tartalmat és a láblécet közös burkolóba teszi. Ha a témád nem teszi, két megoldásod van:

• bekapcsolod az Oldalgörgetés szakasz Automatikus burkolóelem kapcsolóját (lásd az Oldalgörgetés fejezetet), vagy
• a témába beépíted a burkolót az alábbi módszerek egyikével.

A Nézetablak és a Tartalom görgetése mezőben bármikor átírhatod a szelektorokat, ha más azonosítókat használsz.

Burkolóelem létrehozása a Hello témában

Az Elementor Hello témája alapból nem hoz létre burkolót, de pótolható. Mindkét módszernél gyermektémát (child theme) használj, hogy a téma frissítése ne törölje a módosításokat.

1. módszer: functions.php

A gyermektéma functions.php fájljába másold be ezt a kódot. A wp_body_open esemény nyitja, a wp_footer esemény zárja a két egymásba ágyazott div-et:

function mytheme_wrapper_open() {
    echo '<div id="outer-wrap"><div id="wrap">';
}
add_action( 'wp_body_open', 'mytheme_wrapper_open' );

function mytheme_wrapper_close() {
    echo '</div></div>';
}
add_action( 'wp_footer', 'mytheme_wrapper_close' );

Az eredmény egy ilyen oldalszerkezet:

<body>
    <div id="outer-wrap">
        <div id="wrap">
            <header id="site-header"> ... </header>
            <main id="main"> ... az oldal tartalma ... </main>
            <footer id="footer"> ... </footer>
        </div><!-- #wrap -->
    </div><!-- #outer-wrap -->
</body>

2. módszer: a header.php és a footer.php felülírása

1. Hozz létre gyermektémát a Hello témához.

2. Másold át a gyermektémába a template-parts mappa szerkezetét, benne a header.php és a footer.php fájlt.

3. A header.php elején, a fejléc (<header>) előtt nyisd meg a két burkolót:

   <!-- Burkolók nyitása -->
   <div id="outer-wrap">
       <div id="wrap">

4. A footer.php végén, a lábléc (<footer>) után zárd le őket:

   <!-- Burkolók zárása -->
       </div>
   </div>

5. Az oldalgörgetés Nézetablak és Tartalom görgetése mezőjében az azonosítókat a felületről szabadon átírhatod, ha más neveket használtál.

Ha a témádnak más a szerkezete, a fenti táblázat alapján add meg a megfelelő szelektorokat az Oldalgörgetés szakaszban és a Görgetést követő fejléc beállításnál.