Вы хотите выбрать новые иконки для пользовательских типов постов в панели администратора?
Когда вы входите на свой сайт WordPress, вы видите записи для постов, страниц и всех пользовательских типов постов в боковой панели. По умолчанию, пользовательские типы постов будут использовать ту же иконку, что и посты, и это может быть сложно для быстрой сортировки.
В этой статье мы покажем вам, как добавить различные иконки для пользовательских типов постов в WordPress.
Зачем добавлять иконки для пользовательских типов постов в WordPress?
В большинстве случаев при работе с сайтом WordPress вы используете пост или страницу. Однако вы можете использовать пользовательские типы постов для создания других видов контента. Например, WooCommerce использует пользовательский тип поста под названием «Продукт» для наполнения вашего магазина.
Пользовательские типы постов перечислены в области администрирования WordPress наряду с постами и страницами в левостороннем меню. Каждый пункт меню в WordPress имеет значок рядом с ним, и они берутся из шрифта значков под названием Dashicons.
Добавить иконку в меню wordpress
Проблема в том, что все пользовательские типы постов будут использовать ту же иконку, что и посты. Если у вас есть несколько пользовательских типов постов, то вам будет легче найти нужный, если все они будут иметь разные иконки.
С учетом сказанного, давайте рассмотрим, как добавить иконки для пользовательских типов постов в WordPress. Вот что мы рассмотрим в этом уроке:
- Добавление иконок для пользовательских типов постов с помощью плагина
- Добавление иконок для пользовательских типов постов вручную
Добавление иконок для пользовательских типов постов с помощью плагина
Если вы новичок в регистрации пользовательских типов постов или не знакомы с кодом, то мы рекомендуем вам использовать плагин Custom Post Type UI для создания типов постов и таксономий.
Создание пользовательского типа поста с помощью плагина
Сначала вам нужно создать пользовательский тип поста. Если вы уже сделали это, то можете перейти к разделу ‘Добавление иконки в пользовательский тип поста с помощью плагина’ ниже.
После установки и активации плагина, вам нужно перейти в раздел CPT UI » Добавить/редактировать типы постов чтобы создать новый пользовательский тип поста. Убедитесь, что вы находитесь на вкладке «Добавить новый тип поста».
Вам нужно указать slug для вашего пользовательского типа поста, например, ‘movies.’ Ниже введите имена множественного и единственного числа, например, ‘books’ и ‘book.»
После этого нажмите на ссылку с надписью ‘Populate additional labels based on selected labels.’ Это автоматически заполнит дополнительные поля меток ниже и обычно экономит ваше время.
Кроме того, вы можете добавить метки вручную в разделе ‘Дополнительные метки’.
Далее вы можете прокрутить вниз до раздела «Настройки» и установить различные атрибуты для вашего типа поста. Каждая опция имеет краткое описание, объясняющее, что она делает.
Например, вы можете выбрать, как сортировать тип поста и сделать ли его иерархическим.
Ниже общих настроек вы увидите возможность выбрать, какие функции редактирования будет поддерживать данный тип поста. Просто отметьте опции, которые вы хотите включить.
Наконец, нажмите на кнопку «Добавить тип поста», чтобы сохранить и создать ваш пользовательский тип поста.
Более подробные инструкции по созданию пользовательского типа поста с помощью Custom Post Type UI смотрите в первом методе нашего руководства по созданию пользовательского типа поста в WordPress.
Добавление иконки в пользовательский тип поста с помощью плагина
После создания пользовательского типа поста вы можете выбрать значок. Это просто, потому что плагин Custom Post Type UI поддерживает Dashicons по умолчанию.
Сначала перейдите к CPT UI » Добавление/редактирование типов постов и перейдите на вкладку «Редактировать типы постов» в верхней части страницы. Убедитесь, что в выпадающем меню выбран правильный тип поста.
После этого просто прокрутите страницу вниз до «Настроек», расположенных в нижней части той же страницы, а затем найдите раздел «Иконка меню».
Теперь вы должны увидеть два варианта добавления иконки к пользовательскому типу поста. Кнопка ‘Choose dashicon’ позволяет выбрать любой значок Dashicon, а ‘Choose image icon’ позволяет загрузить или выбрать значок изображения из вашей медиатеки.
Для этого урока мы нажмем кнопку «Выбрать дашикон».
Теперь вы можете просматривать сотни иконок, используя стрелки в верхней части всплывающего окна.
Вы также можете выполнить поиск дашикона. В этом руководстве мы будем искать «книга.’
Появятся четыре подходящие иконки, две иконки «Facebook (признана экстремистской организацией на территории РФ)» и две иконки «книга». Просто нажмите на тот, который вы хотите использовать.
CSS-класс выбранной иконки будет автоматически введен в поле ‘Menu Icon’.
Обязательно прокрутите страницу вниз и нажмите кнопку ‘Save Post Type’, чтобы сохранить настройки.
Теперь вернитесь в панель администратора и найдите пользовательский тип поста в левой боковой панели.
Вы должны увидеть новую иконку рядом с иконкой типа поста в меню.
Добавление иконок для пользовательских типов постов вручную
Если вы создали свои пользовательские типы постов вручную с помощью кода, то вам придется добавить иконки также вручную.
Во-первых, вам нужно посетить сайт Dashicons, чтобы найти иконку, которую вы хотите использовать для вашего типа поста.
Для этого руководства прокрутите вниз до раздела «Разное» и нажмите на значок «книга».
Вы перейдете на страницу с дополнительной информацией о значке, такой как название категории и CSS-класс значка. Например, на следующем скриншоте категория — «Разное», а CSS-класс — «dashicons-book».’
Вам необходимо скопировать CSS класс в буфер обмена.
Теперь вам нужно добавить код в то же место, где вы создали пользовательский тип поста. Это могут быть функции вашей темы.php файл, или вы могли использовать плагин для создания фрагментов кода, такой как WPCode.
Чтобы увидеть это в действии, фрагмент кода ниже создает пользовательский тип поста под названием «Книги», а также добавляет значок меню, добавляя CSS-класс Dashicons в строке 45.
/* * Создание функции для создания нашего CPT */ function custom_post_type() < // Set UI labels for Custom Post Type $labels = array( 'name' =>_x( 'Books', 'Post Type General Name', 'twentytwentyone' ), 'singular_name' => _x( 'Book', 'Post Type Singular Name', 'twentytwentyone' ), 'menu_name' => __( 'Books', 'twentytwentyone' ), 'parent_item_colon' => __( 'Parent Book', 'twentytwentyone' ), 'all_items' => __( 'All Books', 'twentytwentyone' ), 'view_item' => __( 'View Book', 'twentytwentyone' ), 'add_new_item' => __( 'Add New Book', 'twentytwentyone' ), 'add_new' => __( 'Add New', 'twentytwentyone' ), 'edit_item' => __( 'Edit Book', 'twentytwentyone' ), 'update_item' => __( 'Update Book', 'twentytwentyone' ), 'search_items' => __( 'Search Book', 'twentytwentyone' ), 'not_found' => __( 'Not Found', 'twentytwentyone' ), 'not_found_in_trash' => __( 'Not found in Trash', 'twentytwentyone' ), ); // Задаем другие параметры для Custom Post Type $args = array( 'label' => __( 'books', 'twentytwentyone' ), 'description' => __( 'Обзоры книг', 'twentytwentyone' ), 'labels' => $labels, // Функции, поддерживаемые этим CPT в редакторе постов 'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'comments', 'revisions', 'custom-fields', ), // Вы можете связать этот CPT с таксономией или пользовательской таксономией. 'taxonomies' => array( 'genres' ), /* Иерархическая CPT подобна Pages и может иметь * родительские и дочерние элементы. Неиерархический CPT * похож на Posts. */ 'hierarchical' => false, 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'show_in_admin_bar' => true, 'menu_position' => 5, 'menu_icon' => 'dashicons-book', 'can_export' => true, 'has_archive' => true, 'exclude_from_search' => false, 'publicly_queryable' => true, 'capability_type' => 'post', 'show_in_rest' => true, ); // Регистрация пользовательского типа поста register_post_type( 'books', $args ); > /* Подключаемся к действию 'init', чтобы функция, * содержащая регистрацию типа поста, не выполнялась * без необходимости. */ add_action( 'init', 'custom_post_type', 0 );
Чтобы настроить иконку при регистрации пользовательского типа поста с помощью кода выше, просто добавьте один из следующих сниппетов в строку 45.
'menu_icon' => 'dashicons-book',
В качестве альтернативы вы можете добавить значок изображения в медиатеку и использовать URL значка вместо класса CSS:
'menu_icon' => 'http://www.пример.com/wp-content/uploads/2022/08/your-cpt-icon.png',
Дополнительные пробелы в этих фрагментах сделаны намеренно, чтобы код был аккуратно выстроен, когда вы вставляете его в больший блок кода выше.
Помните, что при использовании этого кода вам необходимо изменить на свой собственный CSS-класс Dashicon или URL иконки изображения.
Надеемся, что это руководство помогло вам узнать, как добавить иконки для пользовательских типов постов в WordPress. Возможно, вы также захотите узнать, как обеспечить безопасность вашего сайта, или ознакомиться с нашим списком распространенных ошибок WordPress и как их исправить.
Источник: www.wpbeginner.com