Как добавить иконки социальных сетей в меню навигации WordPress

Автор:
Nurlan Kemelbekov

Кнопка в виде картинки/иконки социальной сети в эти дни являются обязательным элементом для любого веб-сайта. Но добавить иконки социальных сетей в меню навигации WordPress для некоторых может быть проблемой. Вот очень простой способ добавить cоциальные иконки Facebook, Twitter, ВКонтакте и другие социальные иконки в меню навигации WordPress с использованием только изображения и CSS.

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

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

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

Вы можете узнать, как редактировать файлы WordPress темы с Dreamweaver здесь.

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

1) Первое, что вам нужно сделать, это выбрать социальные иконки, которые вы хотите использовать. Если у вас уже есть иконки, сохраните их в папке изображений вашей темы. добавить в меню

2) Редактировать главное меню в редакторе меню WordPress. В пользовательских ссылках, добавить ссылку на вашу страницу Twitter и маркировать ссылку, как Twitter. Добавить в меню.

3) В правом верхнем углу, перейдите на вкладку «Настройки экрана» и проверьте «КлассыCSS».
классы css
Появится новое поле в опции меню называемое «Классы CSS», в котором вы можете поместить пользовательский класс CSS на каждом конкретном пункте меню.

4) Откройте пункт меню для ссылки Twitter, который Вы только что меню-твиттерсоздали, и добавьте пользовательский класс для этого элемента. Для этого урока, я назвал это menu-twitter. Это позволит нам внести этот пункт меню прямо в CSS.

5) На данный момент, вы будете иметь новый пункт в меню с текстом «Twitter», который указывает на вашу страницу в Twitter. То что мы будем делать теперь, это удалить текст и заменить его иконкой Твиттера, используя CSS.соц сети

Вставьте следующий код в файл style.css активной темы сайта:

.menu-twitter {

text-indent: -9999px;

background-image: url(images/twitter.png) !important;

background-repeat: no-repeat !important;

margin-left: 100px !important;

width: 50px;

}

ВОТ РЕЗУЛЬТАТЫ

результат меню

Просто повторите этот процесс для каждого значка, который необходимо добавить. Ваша тема может потребовать немного настройки, чтобы поместить значок вверх или вниз.

Поместите все свои социальные иконки в любом веб-доступном месте (например, как http://yourdomain.ru/social) и измените ссылку в CSS для иконки, как показано ниже:

background-image: url(http://yourdomain.ru/social/twitter.png) !important;

Теперь Вы можете вставить этот код без изменений в CSS каждого сайта, где вы хотите добавить социальные иконки. Все что Вам нужно сделать, это добавить пользовательские элементы меню, чтобы добавить cоциальные иконки в меню навигации WordPress.

Чтобы открыть в новой вкладке или окне, просто нажмите на «Настройки экрана» и проверьте опцию «Цель ссылки».

цель ссылкиtarget_blank

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

Рекомендую также прочитать статью «Как добавить название меню WordPress без ссылки на страницу»

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

Желаю удачи.




Вам также может понравиться:


6 комментарий на “Как добавить иконки социальных сетей в меню навигации WordPress

  1. Добрый день! Я сделала все, картинки появились — но не кликабельные. Если убрать классы css — появляются слова соц сетей с работающей гиперссылкой.
    Почему?

    • Здравствуйте, Елена. Возможно, Вы забыли в пользовательских ссылках добавить ссылку на страницу, куда она должна привести.

  2. Спасибо Вам огромное!!!! Ваша статья — просто золото для меня) Очень доступно, понятно и реально круто, что можно без всяких плагинов и оказывается так просто всё сделать. Спасибо!

    • Наталья, спасибо Вам за отзыв. Приятно, когда твоя статья помогла кому-то достичь желаемого результата.

  3. добрый вечер. создала ссылку. сделала css, ссылка вывелась в горизонтальном меню. тема twentyten, а как её отдельно от меню вывести и с картинкой?

    • Здравствуйте, Мария. Поясните пожалуйста, куда Вы хотите «отдельно от меню вывести» и что конкретно.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

* Copy This Password *

* Type Or Paste Password Here *

один × 3 =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!