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

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:

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:

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

Utána:

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