Ikonok a mezők és a mezőcsoport címében

A mezőcsoport és a mezők címe nem csak szöveg lehet: egy ikon is állhat mellette vagy helyette. Az ikon a cím HTML-kódjába kerül, ezért a szerkesztőben és az űrlapokban is megjelenik, ahol a mező látszik.

https://minta-bolt.hu/wp-admin/post.php?post=4&action=edit

Figyeld meg, hogy a mezőcsoport címe mellett és minden mező felirata előtt egy-egy kis ikon áll.

1. Az ikonkönyvtár betöltése

Az ikonokat valamelyik ikonkönyvtárból veszed. Használat előtt a könyvtárat be kell tölteni a sablonba.

• Dashicons: ezt a WordPress adja, nem kell betöltened.
• FontAwesome, Elusive, Genericons: töltsd le a könyvtárat, másold a CSS- és betűtípusfájlokat a sablon mappájába, és tölts be a CSS-t az admin felületen. Ehhez a sablon functions.php fájljába ilyen kód kell:

function sajat_elotag_admin_stilus() {
    wp_enqueue_style( 'admin_css', get_stylesheet_directory_uri() . '/css/ikonok.css' );
}
add_action( 'admin_enqueue_scripts', 'sajat_elotag_admin_stilus' );

A kódban az /css/ikonok.css helyére a saját CSS-fájlod útvonala kerüljön a sablon mappáján belül. Ezután a betöltött könyvtár bármelyik ikonját használhatod a mezők címében is.

2. Az ikon HTML-kódja

A példa a Dashicons könyvtárat használja. Keresd ki a WordPress fejlesztői oldalán az ikont, és másold ki a HTML-kódját. A Dashicons ikonjai ilyen alakúak:

<span class="dashicons dashicons-admin-users"></span>

3. Az ikon beillesztése a címbe

A HTML-kódot a cím szövege elé (vagy mellé, vagy helyette) kell írni. Bárhová beírhatod a címen belül. Az eljárás ugyanaz, akár az MB Builderben, akár kódban dolgozol.

MB Builderben

1. Nyisd meg a mezőcsoportot a Meta Box → Egyéni mezők oldalon.
2. A mezőcsoport címébe (a szerkesztő tetején lévő címmezőbe) illeszd be az ikon HTML-kódját a szöveg mellé.
3. Nyisd le az egyes mezőket, és a Név mezőbe (ez a mező felirata) ugyanígy illeszd be az ikon kódját.
4. Mentsd a mezőcsoportot.

Kódban

Ha a mezőcsoportot PHP-kóddal regisztrálod, az ikon HTML-kódját a title kulcs értékébe írd a mezőcsoport címéhez, és a name kulcs értékébe az egyes mezők feliratához:

add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
    $meta_boxes[] = array(
        'title'  => '<span class="dashicons dashicons-id"></span> Szerző adatai',
        'id'     => 'szerzo',
        'fields' => array(
            array(
                'name' => '<span class="dashicons dashicons-admin-users"></span> Név',
                'id'   => 'szerzo_nev',
                'type' => 'text',
            ),
        ),
    );
    return $meta_boxes;
} );

4. Az ikonok megjelenése

A szerkesztőben a mezőcsoport és a mezők címe mellett megjelennek az ikonok (lásd a fenti képet). Ha a mezőcsoportot a webhely nyilvános oldalán is megjeleníted, például egy beküldő űrlap blokkal, az ikonok ott is látszanak. Az űrlap blokkban csak a mezőcsoport azonosítóját kell megadni, és a mezők az ikonokkal együtt megjelennek.