Все мы знаем, что без социальных сетей никуда. И связать их со своим сайтом (в том или ином варианте) хочет любой блогер и почти каждый заказчик. Вот и я в очередной раз столкнулась с такой необходимостью. Но проблема заключается в том, что не все темы предусматривают кнопки социальных сетей, а уж русскоязычные социальные сети вообще не пользуются популярностью среди создателей тем для WordPress. Поэтому я стала искать плагин социальных кнопок для WordPress.
Начну издалека. Я достаточно долго искала необходимый плагин. Не важно каким образом осуществлять поиск — через админку WP или же через Яндекс — основная масса плагинов решает только одну проблему, а именно реализацию функции «поделиться» с помощью социальных сетей. А это совсем не то, что меня интересовало. Моим заказчикам не нужны были кнопки «Поделиться», им это не интересно. Они хотели, чтобы на сайте были кнопки, по которым можно открыть их группу Вконтакте или Facebook. И это нормальное желание. Да, многие шаблоны изначально идут в комплекте с такой функцией. Но, во-первых, далеко не все, а во-вторых, каждый раз сталкиваешься с проблемой отсутствия иконок отечественных социальных сетей типа Вконтакте или Одноклассники. Да и в принципе зачастую идущие в комплекте с шаблоном иконки охватывают лишь некоторые социальные сети. И это неудобно.
В общем мною были просмотрены килотонны информации, в том числе с иностранных сайтов. И в конце концов я нашла плагин Social Icons Widget by WPZOOM. Аналогов ему я не встречала, сколько ни искала — он действительно потрясающий и действительно очень удобный.
Плагин Social Icons Widget by WPZOOM позволяет добавлять на ваш сайт практически любые иконки, причем не только относящиеся к социальным сетям. Давайте более подробно рассмотрим, что из себя представляет этот замечательный плагин.
Установка
Здесь всё как обычно — заходим в админку, переходим на страницу Плагины > Добавить новый, в поиск вставляем предварительно скопированное название интересующего нас плагина социальных кнопок, а именно Social Icons Widget by WPZOOM. Далее нажимаем Установить, а затем Активировать.
Добавляем виджет
После того, как плагин был активизирован, можно перейти в Внешний вид > Виджеты. Дальше всё будет зависит от используемой вами темы. В данном случае у меня базовая Twenty Seventeen, в которой предусмотрены 3 варианта размещения виджетов — sidebar (он же боковая колонка), подвал 1 и подвал 2.
Как вы можете видеть — я уже добавила виджет социальных кнопок в подвал. Сейчас расскажу и покажу как (а там есть, что рассказать-показать).
Первым делом в списке виджетов (который слева) находим наш плагин социальных кнопок Social Icons by WPZOOM. Нажимаем на него и получаем выпадающий список с перечнем блоков, в которых мы можем разместить эти кнопки. Как только определитесь — нажимайте кнопку Добавить виджет. После этого он появится в одном из блоков справа, а далее можно заняться внимательным изучением предлагаемых опций данного замечательного виджета, нажав на стрелочку справа от его названия.
Настройка виджета
Итак, первое, что нам предлагают — это написать заголовок (Title) для наших кнопок. Англоязычные сайты в основном пишут Follow us (Следите за нами), русским же сайтам больше свойственно просто писать Социальные сети или же вообще ничего не писать. Так что, если вы как раз из той категории людей, то можете просто стереть надпись по умолчанию.
Далее у нас идёт Описание (Description) — короткое описание, которое будет выводится над иконками, можно использовать HTML. Если честно, у меня никогда не возникало необходимости выводить какой-либо текст над иконками, так что я обычно оставляю пустым это поле.
Следующие два пункта как бы интересуются хотите ли вы показывать подписи к иконкам (Show icon labels?) и открывать ли ссылки в новых вкладках (Open links in new tab?). Первый пункт по умолчанию отключен, а второй как раз наоборот (что, в общем-то, и понятно). Если же поставить галочку рядом с пунктом «Show icon labels?», то под иконками ниже появятся поля с подписями, которые можно редактировать:
Как по мне так это тоже не нужно, в принципе все иконки социальных сетей достаточно узнаваемы. Но разработчики достаточно продуманные ребята, предусмотрели всё, так что если вдруг вам захочется добавить надпись «Ну ты заходи, если шо» к значку Вконтакте — вы точно сможете с лёгкостью это сделать.
Едем дальше. Стиль иконок (Icon Style). Тоже очень удобно — иконки можно сделать максимально приближенными по стилю к вашему сайту. Этот плагин социальных кнопок предлагает 2 варианта: цветной фон и белый значок или же цветной значок и прозрачный фон. Первый вариант лично я нахожу более интересным, так как в этом случае можно будет воспользоваться следующей опцией, а именно Стиль фона иконки (Icon Background Style). Здесь уже три варианта: скруглённые углы, круг или квадрат.
Далее нам предлагают настроить внутренние отступы и размер самой иконки, что я нахожу крайне удобным, так как все сайты разные, бывает нужны иконки поменьше, а бывает и наоборот.
После того, как вы определитесь с надписями, стилями и размерами, можно переходить к самим иконкам.
Редактируем иконки
По умолчанию в виджете есть иконки для Facebook, Twitter и Instagram. Можно их оставить, можно удалить, а можно отредактировать — как сами иконки, так и ссылку, на которую они ведут. Чтобы добавить новую иконку нужно нажать кнопку Add more (Добавить ещё). Под кнопкой мелким шрифтом написано, что для того, чтобы добавить иконку с адресом электронной почты, необходимо использовать формат mailto:mail@example.com.
Итак, допустим вы решили удалить имеющиеся иконки и добавить те, которые вам нужны. Для начала нажимаем значок мусорного бака справа от каждого поля для ссылки, а затем нажимаем кнопку Add more.
Дальше как вам удобнее — можно сразу добавить ссылку, а потом редактировать иконку, или же можно поступить наоборот. Ссылка в данной момент интересует меня меньше всего, поэтому я сразу нажму на значок «+» на месте иконки. После чего появится всплывающее окно с настройками иконки.
Здесь можно выбрать цвет иконки, а также набор иконок, который будет удовлетворять вашим потребностям. Нам предлагают следующие наборы: Socicons, Dashicons, Genericons и даже Font Awesome. Когда дело касается социальных иконок, то лично я использую набор Socicons, так как в нём есть действительно большой выбор иконок разнообразных социальных сетей, таких как Одноклассники, Вконтакте, Facebook, 500px, Vimeo, Youtube, Behance, LinkedIn, Google+, Pinterest, а также значки Drupal, WordPress, Windows, Xbox, Wikipedia, Apple, Android и много других. В общем очень удобной набор.
А так — выбирайте любой понравившийся набор или же комбинируйте все и наслаждайтесь.
Выбрав цвет и иконку нажмите Save (Сохранить) и она появится в виджете. Потом опять нажмите кнопку Add more и повторяйте процедуру пока не добавите все нужные иконки. После чего важно не забыть нажать кнопку Сохранить на самом виджете и всё, иконки социальных сетей появятся на вашем сайте.
Надеюсь статья помогла вам решить проблему размещения иконок социальных сетей на вашем сайте.
Оставляйте комментарии, подписывайтесь на наш блог и вступайте в нашу группу Вконтакте, чтобы всегда быть в курсе свежих новостей о WordPress и не только.