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

> Hogyan épül fel a témák HTML-oldala, mi a burkolóelem, és hogyan hozhatsz létre burkolót a Hello témában functions.php-val vagy a header.php és footer.php módosításával.

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](https://hub.hellowp.io/hu/plugins/dynamic-content-for-elementor/oldalgorgetes-oldalgorgetes-beallitasai/)), 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:

```php
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:

```html
<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:

   ```php
   <!-- 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:

   ```php
   <!-- 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.