Как вставить иконки в горизонтальное меню Wordpress

6 июля, 2015 Максим Метелев 9142 просмотров Комментариев нет

Всем привет друзья! Cегодня мы поговорим про то, как вставить иконки в навигационное меню сайта WordPress.

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

Все просто и без заумностей. Чтобы вы представлял как все это будет выглядеть прилагаю ниже скриншот:

Иконки в меню WordPress

Первым шагом в этом направлении будет установка и активация специального плагина под названием – Menu Image. После его активации идем во Внешний Вид – Меню. Там вы увидите опцию добавления изображения к существующим элементам меню.

На блоге у меня есть статья про то, как добавить стиль в меню в WordPress.

Следующим шагом вам нужно будет загрузить изображение, которое вы хотите видеть рядом с каждым элементом навигации и нажать на кнопку «Set Image» (Установить изображение).

Данный плагин автоматически создает три новых размера изображений: 24 x 24, 36 x 36, и 48 x 48 пикселей. Размер можете выбрать из выпадающего меню рядом с элементом. Также можете задать расположение до или после заголовка меню или вообще скрыть и оставить только иконки.

Добавление вашего собственного изображения

Если вы хотите установить свой собственный размер загружаемых иконок для меню сайта, тогда вам необходимо вставить небольшой код в шаблон functions.php:

add_filter( 'menu_image_default_sizes', function($sizes){

  // remove the default 36x36 size
  unset($sizes['menu-36x36']);

  // add a new size
  $sizes['menu-50x50'] = array(50,50);

  // return $sizes (required)
  return $sizes;

});

add_filter( 'menu_image_default_sizes', function($sizes){

// remove the default 36x36 size

unset($sizes['menu-36x36']);

// add a new size

$sizes['menu-50x50'] = array(50,50);

// return $sizes (required)

return $sizes;

});

Добавление изображений в навигационное меню вручную с помощью CSS

Этот метод подойдет для более продвинутых пользователей, которые владеют навыками HTML и CSS.

Прежде всего, нужно загрузить изображения к себе на блог, сделать это можно через Медиафайлы – Добавить новый. После окончательной загрузки каждого из них, копируете их урлы и вставляете их в текстовой редактор, например в Notepad++ или Sublime Text или тот, которым привыкли пользоваться.

Теперь снова идем во Внешний Вид – Меню и кликаем настройки экрана в верхнем правом углу, в админке разумеется. На этом экране устанавливаем флажок рядом с чекбоксом CSS классы (CSS Classes для англоязычных пользователей).

Включаем CSS классы в настройках экрана

Теперь проскролльте ниже в ваше текущее меню и около каждого элемента вы увидите поле, куда нужно будет добавить класс.

Добавление нужного класса для элементов меню

После вам нужно перейти в таблицу стилей вашей темы и вставить вот этот код:

.homepage {
   background-image: url('http://www.example.com/wp-content/uploads/2014/12/home.png');
   background-repeat: no-repeat;
   background-position: left;
   padding-left: 5px;
}

.homepage {

background-image: url('http://www.example.com/wp-content/uploads/2014/12/home.png');

background-repeat: no-repeat;

background-position: left;

padding-left: 5px;

}

Внимание: Не забудьте изменить .homepage на каждый последующий элемент, поскольку если этого не сделать, то фоновая картинка будет принадлежать к каждому элементу вашего меню, а нам же нужно, чтобы они отличались. Стало быть, вам нужно придумать новый класс для каждого списка меню и указать урл на источник картинки иконки, тот, что мы копировали в редактор.

Также почитайте статью про добавление социальных иконок на ваш блог WordPress.

На этом у меня все. Увидимся и услышимся в следующих выпусках блога Smarticle.ru

Всем добра и хорошего настроения.