Как добавить иконки для произвольных типов записей в WordPress

Перед вами когда-нибудь стояла проблема добавления собственных иконок для ваших произвольных типов записей в WordPress? Если так, то вы пришли по правильному адресу. В сегодняшней статье мы покажем вам как добавить иконки для произвольных типов записей в WordPress.

WordPress начал использовать иконочный шрифт под названием Dashicons начиная с версии WordPress 3.8. Эти иконки выглядят замечательно на любом устройстве и при любом размере экрана. И вы можете воспользоваться этими иконками для того, чтобы назначить их для своих типов записей.

Добавляем иконки к произвольным типам записей с помощью плагина

Первым делом вам необходимо установить и активировать плагин CPT Custom Icon. После активации просто переходим в раздел Настройки » CPT Custom Icon Settings, где вы увидите список своих произвольных типов записей. Далее, кликам на кнопку ‘Choose icon’ рядом с типом записи и выбираем значок из меню.

choosing-custom-post-type-icon[1]

Добавляем иконки с помощью плагина Custom Post Type UI

Если вы новичок в регистрации произвольных типов записи, то мы рекомендуем использовать плагин Custom Post Type UI для создания и управления произвольными типами записей и таксономиями.

Добавление иконки к произвольному типу записи, созданному с помощью плагина CPT UI, не должно вызвать затруднения. Он поддерживает Dashicons по-умолчанию, поэтому вам сначала нужно перейти на сайт Dashicons, где выбрать нужную вам иконку.

select-dash-icon-class[1]

Клик по иконке в писке отобразит ее увеличенную версию. Рядом с ней вы увидите CSS класс значка. Он будет в виде dashicons-groups, dashicons-calendar, dashicons-cart и т.д. Нужно скопировать класс CSS и перейти к редактированию произвольного типа записи в CPT UI, которому нужно назначить иконку. Далее, нужно кликнуть по ссылке Advanced Options и прокрутить до раздела Menu Icon, а затем вставить выбранный CSS класс и сохранить изменения.

adding-font-icon-cpt-ui[1]

Также можно создать значок самостоятельно и загрузить его, кликнув по Медиафайлы » Добавить новый. После загрузки, нажмите на ссылку редактирования картинки и скопируйте ее путь. Теперь вставьте эту ссылку в поле menu icon в настройках CPT UI.

Добавляем значок к произвольному типу записей вручную

Если вы создали произвольный тип записи, вставив соответствующий код в файл functions.php, тогда можно добавить значки вручную. Снова переходим на сайт Dashicons для выбора значка, копируем его класс. После этого добавьте такой код к коду произвольного типа записи:

'menu_icon'           => 'dashicons-cart',

Также вы можете указать полный путь к файлу изображения, вот так:

'menu_icon'           => 'http://www.example.com/wp-content/uploads/2014/11/your-cpt-icon.png',

А вот полный код сниппета, который создает произвольный тип записи под названием products с соответствующей иконкой:

// регистрируем произвольный тип записи
function custom_post_type() {

	$labels = array(
		'name'                => _x( 'products', 'Post Type General Name', 'text_domain' ),
		'singular_name'       => _x( 'Product', 'Post Type Singular Name', 'text_domain' ),
		'menu_name'           => __( 'Products', 'text_domain' ),
		'parent_item_colon'   => __( 'Parent Item:', 'text_domain' ),
		'all_items'           => __( 'All Items', 'text_domain' ),
		'view_item'           => __( 'View Item', 'text_domain' ),
		'add_new_item'        => __( 'Add New Item', 'text_domain' ),
		'add_new'             => __( 'Add New', 'text_domain' ),
		'edit_item'           => __( 'Edit Item', 'text_domain' ),
		'update_item'         => __( 'Update Item', 'text_domain' ),
		'search_items'        => __( 'Search Item', 'text_domain' ),
		'not_found'           => __( 'Not found', 'text_domain' ),
		'not_found_in_trash'  => __( 'Not found in Trash', 'text_domain' ),
	);
	$args = array(
		'label'               => __( 'Products', 'text_domain' ),
		'description'         => __( 'Post Type Description', 'text_domain' ),
		'labels'              => $labels,
		'supports'            => array( ),
		'taxonomies'          => array( 'category', 'post_tag' ),
		'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-cart',
		'can_export'          => true,
		'has_archive'         => true,
		'exclude_from_search' => false,
		'publicly_queryable'  => true,
		'capability_type'     => 'page',
	);
	register_post_type( 'Products', $args );

}

add_action( 'init', 'custom_post_type', 0 );

Мы надеемся, что эта статья помогла вам добавить иконки для своих произвольных типов записей в WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

VN:F [1.9.22_1171]
Rating: 3.7/5 (3 votes cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
Scroll To Top