# A Listing Grid HTML-címkéi: ul és li használata

> Hogyan lesz a Listing Grid elemeiből lista (ul/li) egy kódrészlet és egy CSS-osztály segítségével blokkszerkesztőben, Elementorban és Bricksben.

A Listing Grid alapból `div` elemekbe csomagolja a tételeket. Ha az SEO vagy a szemantikus HTML miatt rendezetlen listára (`ul`) és listaelemekre (`li`) van szükséged, ezt egy kódrészlettel és egy osztállyal érheted el. Előfeltétel: ingyenes Elementor, blokkszerkesztő vagy Bricks, a **Code Snippets** bővítmény, és egy elkészített listázási elem.

## A kódrészlet hozzáadása

1. Nyisd meg a **Snippets → Add New** oldalt, és adj nevet a részletnek.
2. Illeszd be a következő kódot a kódmezőbe:

```php
class JEC_Change_Tags {

	public function __construct() {
		add_filter( 'jet-engine/listing/render/jet-listing-grid/settings', array( $this, 'apply_settings' ) );
		add_filter( 'jet-engine/listing/grid/nav-widget-settings', array( $this, 'nav_settings' ), 10, 2 );
		add_filter( 'jet-engine/listing/render/default-settings', array( $this, 'default_settings' ) );
	}

	// 'is-ul-listing' = 1, ha ul / li címkék kellenek
	public function apply_settings( $settings ) {
		$settings['is-ul-listing'] = $this->is_ul_listing( $settings );

		if ( ! empty( $settings['is-ul-listing'] ) ) {
			$settings['list_items_wrapper_tag'] = 'ul';
			$settings['list_item_tag'] = 'li';
		}

		return $settings;
	}

	// alapértelmezett érték a JetSmartFilters kompatibilitásához
	public function default_settings( $settings ) {
		$settings['is-ul-listing'] = '';
		return $settings;
	}

	// a Load More kompatibilitásához
	public function nav_settings( $widget_settings, $settings ) {
		$widget_settings['is-ul-listing'] = $this->is_ul_listing( $settings );
		return $widget_settings;
	}

	// Elementor és blokkszerkesztő: a 'listing-ul' osztály kell
	// Bricks: a 'data-listing-ul' attribútum kell
	public function is_ul_listing( $settings ) {
		if ( ! empty( $settings['is-ul-listing'] ) ) {
			return 1;
		}

		$class = '';

		if ( ! empty( $settings['_css_classes'] ) ) {
			$class = $settings['_css_classes'];
		} elseif ( ! empty( $settings['className'] ) ) {
			$class = $settings['className'];
		} elseif ( ! empty( $settings['_attributes'] ) && is_array( $settings['_attributes'] ) ) {
			foreach ( $settings['_attributes'] as $attr ) {
				if ( ! empty( $attr['name'] ) && $attr['name'] === 'data-listing-ul' ) {
					$class = 'listing-ul';
					break;
				}
			}
		}

		return false !== strpos( $class, 'listing-ul' ) ? 1 : '';
	}
}

new JEC_Change_Tags();
```

3. A kódmező alatt pipáld be a **Run snippet everywhere** választót, és kattints a **Save Changes** gombra.
4. A **Snippets → All Snippets** oldalon kapcsold be az új részletet.

## A Listing Grid beállítása

Csak azok a Listing Gridek változnak, amelyekhez megadod a jelölést.

| Szerkesztő | Mit kell megadni | Hol |
|---|---|---|
| Blokkszerkesztő | `listing-ul` osztály | a blokk beállításainál az **Advanced** rész **ADDITIONAL CSS CLASS(ES)** mezője |
| Elementor | `listing-ul` osztály | az **Advanced** fül **CSS Classes** mezője |
| Bricks | `data-listing-ul` attribútum, tetszőleges értékkel (például `1`) | a **STYLE** fül **ATTRIBUTES** része, a **Name** és a **Value** mező |

Utána mentsd vagy tedd közzé az oldalt.

## Mi változik a HTML-ben

A kódrészlet előtt a lista így néz ki:

```html
<div class="jet-listing-grid__items">
<div class="jet-listing-grid__item"></div>
<div class="jet-listing-grid__item"></div>
</div>
```

Utána:

```html
<ul class="jet-listing-grid__items">
<li class="jet-listing-grid__item"></li>
<li class="jet-listing-grid__item"></li>
</ul>
```