Добавьте собственный значок в меню администратора WordPress!

Добавление пользовательского значка в меню администратора WordPress придаст вашему плагину или теме уникальный и профессиональный вид. Будь то создание новой функции или пользовательской страницы панели управления, персонализированный значок упрощает навигацию и повышает удобство использования. С помощью функции add_menu_page() можно создать новый пункт меню, а добавление пользовательского значка сделает его более привлекательным и удобным для пользователей.

В этой статье мы расскажем, как добавить собственный значок в меню администратора WordPress.

Что такое add_menu_page()?

add_menu_page() — это функция в WordPress, которая позволяет разработчикам добавлять новые пункты меню в панель администратора. Вы можете настроить меню, указав его название, ссылку на страницу и, что самое важное, собственный значок, который будет выделяться.

Шаги по добавлению пользовательской иконки с помощью add_menu_page()

Шаг 1. Откройте файл с функциями плагина или темы

1. Войдите в свою панель управления WordPress.
2. Перейдите в Оформление> Редактор файлов темы или Плагины> Редактор файлов плагинов, если вы работаете над плагином.
3. Откройте файл functions.php или основной файл плагина.

Шаг 2: Добавьте код для создания меню с пользовательским значком

Вот базовый пример кода добавления страницы меню с пользовательским значком.

function my_custom_menu() {

add_menu_page(

‘Custom Menu Title’, // Page title

‘Custom Menu’, // Menu title

‘manage_options’, // Capability

‘custom-menu-slug’, // Menu slug

‘my_custom_function’, // Callback function

‘dashicons-coffee’, // Custom icon

6 // Position

);

}

add_action(‘admin_menu’, ‘my_custom_menu’);

Этот код создает новое меню в админке WordPress. Давайте разберёмся:

• Заголовок страницы: Что видят пользователи на странице.
• Заголовок меню: Что отображается в меню.
• Возможность: Кто может получить доступ к меню (например, manage_options).
• Слаг меню: Уникальный идентификатор страницы.
• Функция обратного вызова: Функция, которая выводит контент на странице.
• Значок: На этом мы сосредоточимся далее — либо на встроенном значке, либо на пользовательском.

Шаг 3. Используйте собственный значок

Вы можете использовать Dashicons (встроенные значки WordPress) или свой собственный значок.

Вариант 1. Используйте значок Dashicon

В приведенном выше примере мы использовали значок «dashicons-coffee». Другие значки Dashicon можно найти здесь. Просто замените «dashicons-coffee» на название предпочитаемого вами значка.

Вариант 2: Используйте пользовательский значок (URL или Base64)

Вот как это сделать, если вы хотите использовать вместо него пользовательское изображение.

function my_custom_menu() {

add_menu_page(

‘Custom Menu Title’,

‘Custom Menu’,

‘manage_options’,

‘custom-menu-slug’,

‘my_custom_function’,

‘https://yourwebsite.com/path-to-icon.png’, // Custom icon URL


6 );

}

add_action(‘admin_menu’, ‘my_custom_menu’);

• Замените ‘https://yourwebsite.com/path-to-icon.png’ ссылкой на ваш значок.
• Вы можете загрузить свой значок на Медиа> Добавить новый и использовать URL файла.

Шаг 4. Настройте значок с помощью CSS (необязательно)

Если ваш пользовательский значок плохо выровнен, настройте его с помощью CSS. Вот пример:

1. Перейдите в Внешний вид> Настройка > Дополнительный CSS.
2. Добавьте этот CSS-код.:

#adminmenu .menu-icon-custom-menu-slug img {

width: 20px;

height: 20px;

margin-top: 5px;

}

Этот CSS-код обеспечивает идеальное отображение пользовательского значка в меню администратора.

Шаг 5. Протестируйте пользовательское меню

1. Сохраните изменения в файле функций или файле плагина.
2. Вернитесь на панель управления WordPress.
3. Обновите страницу, и вы увидите новое меню с пользовательским значком.

Если значок не отображается или выглядит некорректно, попробуйте сделать следующее:

1. Очистите кэш браузера и перезагрузите панель управления.
2. Проверьте URL-адрес значка на наличие ошибок.
3. Убедитесь, что размер значка небольшой (лучше всего подходит размер 20×20 пикселей).
4. Используйте изображение в кодировке Base64, если значки по URL-адресу не отображаются.

Заключение

Использование функции add_menu_page() с пользовательским значком помогает сделать панель администратора WordPress более удобной для пользователей. Независимо от того, используете ли вы Dashicon или собственное изображение, этот процесс прост и улучшает внешний вид вашего плагина или темы. Теперь, когда вы знаете, как это сделать, попробуйте добавить собственный значок, чтобы придать меню WordPress уникальный вид.