2HUBS
  • WordPress

    • Добавление иконок в меню WordPress

    Рано или поздно в проекте возникает необходимость добавить иконки к пунктам меню — например, чтобы визуально разделить навигацию или сделать её более понятной.
    Для такой задачи не обязательно подключать отдельный плагин: если нужен полный контроль и минимум лишнего кода, это легко реализуется на уровне темы.

    Я покажу вариант на Dashicons (это встроенный набор иконок WordPress). Идея такая:

    1. Регистрируем меню в теме.
    2. Подключаем Dashicons на фронте.
    3. Добавляем поле “Dashicons Class” в админке меню.
    4. Сохраняем значение в postmeta пункта меню.
    5. На фронтенде добавляем <i class="dashicons ..."> перед названием пункта.

    В итоге мы получим следующий результат.

    Список иконок Dashicons

    1) Регистрируем меню в теме

    Добавь это в functions.php:

     1function slug_setup_theme() {
 2    register_nav_menus( [
 3        'sidebar-menu' => __( 'Sidebar Menu', 'your-textdomain' ),
 4    ] );
 5}
 6add_action( 'after_setup_theme', 'slug_setup_theme' );

    2) Вывод меню в шаблоне

    Добавь этот код в нужный шаблон темы (например, sidebar.php или header.php):

     1<?php wp_nav_menu( [
 2    'theme_location' => 'sidebar-menu',
 3    'container'      => false,
 4    'menu_class'     => 'side-nav',
 5    'depth'          => 1,
 6    'fallback_cb'    => false,
 7] ); ?>

    3) Подключаем Dashicons на фронтенде

    Добавь это в functions.php:

     1function slug_enqueue_scripts() {
 2    wp_enqueue_style( 'dashicons' );
 3}
 4add_action( 'wp_enqueue_scripts', 'slug_enqueue_scripts' );

    4) Добавляем поле “Dashicons Class” для пункта меню

    Это поле будет отображаться в админке для каждого пункта меню.
    Добавь это в functions.php:

     1function slug_menu_item_dashicons( $item_id ) {
 2    $value = get_post_meta( $item_id, '_menu_item_dashicon', true ); ?>
 3    <p class="description description-thin">
 4        <label for="menu-item-dashicon-<?php echo $item_id; ?>">
 5            <?php esc_html_e( 'Dashicons Class', 'your-textdomain' ); ?><br>
 6        </label>
 7        <input
 8            type="text"
 9            id="menu-item-dashicon-<?php echo $item_id; ?>"
10            class="widefat"
11            name="menu_item_dashicon[<?php echo $item_id; ?>]"
12            value="<?php echo esc_attr( $value ); ?>"
13            placeholder="dashicons-admin-home"
14        />
15    </p>
16<?php }
17add_action( 'wp_nav_menu_item_custom_fields', 'slug_menu_item_dashicons' );

    5) Сохраняем поле в postmeta

    Добавь это в functions.php:

     1function slug_update_menu_item_dashicons( $menu_id, $menu_item_db_id ) {
 2    $dashicon = $_POST['menu_item_dashicon'][ $menu_item_db_id ] ?? '';
 3    $dashicon = sanitize_text_field( $dashicon );
 4
 5    if ( empty( $dashicon ) ) {
 6        delete_post_meta( $menu_item_db_id, '_menu_item_dashicon' );
 7        return;
 8    }
 9
10    update_post_meta( $menu_item_db_id, '_menu_item_dashicon', $dashicon );
11}
12add_action( 'wp_update_nav_menu_item', 'slug_update_menu_item_dashicons', 10, 2 );

    6) Добавляем иконку в HTML меню на фронтенде

    Добавь это в functions.php:

     1function slug_nav_menu_start_el( $item_output, $item, $depth, $args ) {
 2    if ( empty( $args->theme_location ) || $args->theme_location !== 'sidebar-menu' ) {
 3        return $item_output;
 4    }
 5
 6    $dashicon = get_post_meta( $item->ID, '_menu_item_dashicon', true );
 7    if ( !$dashicon ) {
 8        return $item_output;
 9    }
10
11    $icon_html = '<i class="dashicons ' . esc_attr( $dashicon ) . '" aria-hidden="true"></i>';
12
13    return preg_replace( '~(<a\b[^>]*>)~i', '$1' . $icon_html, $item_output, 1 );
14}
15add_action( 'walker_nav_menu_start_el', 'slug_nav_menu_start_el', 10, 4 );

    Как использовать

    1. Зайди во Внешний вид → Меню
    2. Открой нужный пункт меню
    3. В поле Dashicons Class напиши класс иконки, например:
      • dashicons-admin-home
      • dashicons-editor-code
      • dashicons-tag