Создаем уникальное произвольное меню WordPress

Примечание: Этот текст может содержать некоторые партнерские ссылки, а это значит, что я зарабатываю небольшую комиссию без каких-либо дополнительных затрат с вашей стороны, если вы воспользуетесь этими ссылками. Спасибо за понимание и поддержку.

Создайте по настоящему уникальное меню для своего сайта на WordPress

Этот небольшой «урок» покажет вам, как можно легко создать свой образ меню на основе пользовательского меню WordPress 3.0+, похожее на скриншот ниже (меню сделано в дефолтном шаблоне 2011, заголовок с изображением скрыты для ясности). Этот вариант меню только для ссылок верхнего уровня, к сожалению. Второй и третий уровень (и ниже) в этом варианте настроек работать не будут. Я еще не придумал, как это сделать для вложенных уровней, но если я когда-нибудь сделаю, — обязательно напишу вам об этом!

уникальное произвольное меню с картинками

Все, что надо сделать, это загрузить выбранные вами картинки для меню и добавить немного стилей CSS в файл style.css вашего шаблона.

Найдите основной DIV навигации

Не волнуйтесь. Мы не будем делать ничего сложного с PHP, Java-скриптами и JQuery!

Независимо от шаблона WordPress, который вы используете, вам надо сначала найти контейнер DIV основных свойств навигации в вашем шаблоне. Если вы не знаете, что это такое и где его искать, вы можете легко найти его с помощью web-приложений в вашем браузере. Нашли? Отлично. Идем дальше.

Загрузка изображений

Используйте стандартный функционал консоли администратора, чтобы добавить подготовленные файлы изображений для вашего уникального пользовательского меню. Найдите раздел Медиафайлы в консоле и добавьте картинки. После добавления изображений, скопируйте их ссылки в любой текстовый файл, что-то типа такого:

https://bestplugins.ru/wp-content/uploads/2012/11/custom-menu.png

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

[sdfile url=»https://bestplugins.ru/wp-content/files/custom-bg-small.zip»]

Создаем меню WordPress

Совет: экспериментируйте не на «живом» сайте! Лучше создайте тестовый поддомен или установите Денвер на localhost и пробуйте тестировать код там. Иначе у вас могут возникнуть проблемы с вашим «живым» сайтом.

Очень хорошая идея — создать тестовое меню и в качестве примера использовать страницы и рубрики с скришота выше. Хотя, я не настаиваю. Вы можете написать свой вариант меню.

Советую прочитать еще:  Необычный отчет

Назначьте свои классы для пунктов меню

Чтобы привязать для каждого пункта меню свой файл изображения, вам необходимо назначить для каждого пункта меню свой класс CSS. Если вы не видите отдельные классы меню в редакторе WordPress, откройте вкладку «Настройка экрана» в правом верхнем углу экрана, отметьте флажок «CSS классы» (см. скриншот ниже):

Страница Меню в разделе Внешний вид

Давайте для каждой картинки создадим свой пункт CSS класса, например: menu-bg1, menu-bg2, menu-bg3 и т.д. Сохраните меню. Затем выберите в секции «Области темы» в левом углу страницы настройки меню вывод вашего меню в нужном месте и сохраните. Обновите любую страницу вашего сайта. Меню должно появится и работать корректно. Работает? Отлично, идем дальше.

Добавьте новые стили CSS

Ниже приведен список стилей, которые вам нужно добавить в основной файл стилей CSS вашего шаблона. Чаще всего он лежит в основной папке шаблона и называется — style.css, Но бывают и варианты, например: http://…/css/style.css.

Если вы используете изображения из архива, который я вам дал для скачивания, или создали свои картинки такого же размера (122х40px), вам не нужно регулировать отступы и ширину в 1-м правиле стилей. Если ваши собственные файлы изображений других размеров — надо отрегулировать отступы. Вам нужно отрегулировать 2-е вещи, характерные для этих стилей:

  • # доступ — ID основных классов навигационного контейнера вашей темы.
  • класс .menu-bg* — CSS классы, присвоенные вашим пунктам меню.

Если вы хотите сделать меню на основе основного образа, просто установите цвет в первом правиле стиля прозрачным. Это позволит эффективно скрыть текст ссылки из поля зрения:

#access .menu-bg1 a, #access .menu-bg1 a:hover, #access .menu-bg1 a:focus,
#access .menu-bg2 a, #access .menu-bg2 a:hover, #access .menu-bg2 a:focus,
#access .menu-bg3 a, #access .menu-bg3 a:hover, #access .menu-bg3 a:focus,
#access .menu-bg4 a, #access .menu-bg4 a:hover, #access .menu-bg4 a:focus,
#access .menu-bg5 a, #access .menu-bg5 a:hover, #access .menu-bg5 a:focus {
background-repeat:no-repeat;
background-position:0.5em 0.5em;
color:#555;
padding:10px 0 0 60px;
width:70px;
}
#access .menu-bg1 a, #access .menu-bg1 a:hover, #access .menu-bg1 a:focus {
background-image:url(‘FULL-URL-TO-YOUR-UPLOADED-IMAGE-#1-GOES-HERE’);
}
#access .menu-bg2 a, #access .menu-bg2 a:hover, #access .menu-bg2 a:focus {
background-image:url(‘FULL-URL-TO-YOUR-UPLOADED-IMAGE-#2-GOES-HERE’);
}
#access .menu-bg3 a, #access .menu-bg3 a:hover, #access .menu-bg3 a:focus {
background-image:url(‘FULL-URL-TO-YOUR-UPLOADED-IMAGE-#3-GOES-HERE’);
}
#access .menu-bg4 a, #access .menu-bg4 a:hover, #access .menu-bg4 a:focus {
background-image:url(‘FULL-URL-TO-YOUR-UPLOADED-IMAGE-#4-GOES-HERE’);
}
#access .menu-bg5 a, #access .menu-bg5 a:hover, #access .menu-bg5 a:focus {
background-image:url(‘FULL-URL-TO-YOUR-UPLOADED-IMAGE-#5-GOES-HERE’);
}

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

Советую прочитать еще:  Несколько советов и дополнений для вашего сайта

Простой эффект при наведении курсора

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

#access .menu-bg1 a:hover, #access .menu-bg1 a:focus,
#access .menu-bg2 a:hover, #access .menu-bg2 a:focus,
#access .menu-bg3 a:hover, #access .menu-bg3 a:focus,
#access .menu-bg4 a:hover, #access .menu-bg4 a:focus,
#access .menu-bg5 a:hover, #access .menu-bg5 a:focus {
color:#fff;
opacity:0.7;
filter:alpha(opacity=70);
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}

Вот и все, что мы хотели сделать

Надеюсь, вам понравилось это маленькое меню WordPress и вы уже знаете, как найти ему применение. У вас получилось? Я рад и хочу, чтобы вы показали свои варианты решения этого небольшого урока по работе с уникальным произвольным меню WordPress. Напишите в комментариях и дайте ссылки на свои произвольные меню, полученные с помощью этого урока.

Всем удачного блоггинга!

Источник: http://wpmu.org/wordpress-menu-images/

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

Важно! Эта запись может содержать ссылки на плагины, которые к моменту вашего чтения и скачивания могут работать не корректно. Будьте внимательны.

One Comment

  • Пожалуйста свяжитесь со мной. Я не нашел как оставить вам личное сообщение. есть желание заказать работы.

    Ответить

Добавить комментарий

Ваш email нигде не будет показан. Обязательные поля помечены *