Что нового WordPress 3.8? Dashicons иконки заменяют привычные картинки

Сегодня речь пойдёт о довольно устаревшем обновлении WordPress 3.8. Что сподвигло меня на написании статьи о версии далекого 2013, спросите вы?

Очень многие пользователи WordPress и знать не знали о том, что же нового сделали для нас разработчики! Да да, даже будучи обновленные до версии 4.4.2. Не мне судить о причинах сего — но я попытаюсь это исправить и наверстать упущенное

И так, ближе к делу. Разберемся по порядку:

Нововведения в WordPress 3.8

Внешний вид. Да, разработчики позаботились непосредственно о администраторах блогов. В этом обновлении внешний вид улучшился:
- Новый крупный шрифт Open Sans;
- векторные иконки
- 8 различных цветовых схем;
- адаптивность панели администрирования
Интерфейс работы с темами. Действительно, интерфейс теперь очень дружелюбен и удобен.
Новая стандартная тема Twenty Fourteen. Та самая тема. с которой, уверен, все мы начинали . Напомню, что сейчас она является самой популярной в WordPress.

На этом релиз обновления на официальном сайте заканчивается.

Я выделил пункт, в котором заходит речь про иконки. Но, заметьте, речь шла панели управления, но никак о внешнем виде нашего сайта!

Так вот, эти самые иконки:

И это, как вы понимаете, лишь малая часть!

В версии WordPress 3.8 были введены порядка 150 векторных иконок. Они подразделены на 15 категории:

Admin Menu;
Welcome Screen;
Post Formats;
Media;
Image Editing;
TinyMCE;
Posts Screen;
Sorting;
Social;
WordPress.org Specific: Jobs, Profiles, WordCamps;
Products;
Taxonomies;
Widgets;
Notifications;
Misc.

Они представляют из себя векторные иконки, которые обернули в специальные веб-шрифты, описанные в CSS.

В этой подборке можно найти множество иконок на любой вкус и любые цели

Подключение Dashicons

Подключить необходимый CSS файл необходимо таким образом:

function my_dashicons() { wp_enqueue_style( 'dashicons' ); } add_action( 'wp_enqueue_scripts', 'my_dashicons' );

1
2
3
4

function my_dashicons() {
wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'my_dashicons' );

Этот способ, как вы уже догадались, с помощью функции. Для тех, кто не знает это нужно вставить в ваш файл functions.php

Как же их использовать? Выбрав симпатичную иконку здесь, можно пойти по двум пути:

Получив CSS нашей иконки. Полученный параметр необходимо вставить в нужный нам блок. К примеру вот так:

.widget_meta h1<strong>:before</strong>{
    <strong>content: "\f310";     //сам адрес иконки</strong>
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 30px;
    line-height: 1;
<strong>    font-family: dashicons;     //веб-шрифт наших иконок</strong>
<strong>    -webkit-font-smoothing: antialiased;     //"делает текст более утонченным (префикс для Opera, Chrome, Safari)"</strong>
<strong>    -moz-osx-font-smoothing: grayscale;      //"делает текст более утонченным (префикс для Mozilla)"</strong> 
}

.widget_meta h1<strong>:before</strong>{

<strong>content: "\f310"; //сам адрес иконки</strong>

display: inline-block;

width: 20px;

height: 20px;

font-size: 30px;

line-height: 1;

<strong> font-family: dashicons; //веб-шрифт наших иконок</strong>

<strong> -webkit-font-smoothing: antialiased; //"делает текст более утонченным (префикс для Opera, Chrome, Safari)"</strong>

<strong> -moz-osx-font-smoothing: grayscale; //"делает текст более утонченным (префикс для Mozilla)"</strong>

}

Про префиксы webkit и ~moz и других расскажу немного позже подробно — это очень важно и требует отдельного урока.

Получив HTML-фрагмент кода. Это может выглядеть примерно так:

... <div class="my_block"> <strong><span class="dashicons dashicons-universal-access"></span> //вот он</strong> </div> ...

1
2
3
4
5

...
<div class="my_block">
<strong><span class="dashicons dashicons-universal-access"></span> //вот он</strong>
</div>
...

Вот и всё! Изменять размер, цвет иконок, и другие свойства — также легко можно, обратившись как к самому CSS иконки, так и в своём CSS!