Виджет для вывода ссылок соцсетей WordPress

Здравствуйте!
Этой записью открывается цикл статей посвященный web-разработке по направлению создание сайтов на CMS WordPress.

 

Введение:

В этой статье я опишу создание виджета для вывода ссылок на соцсети.
Часто блок соцсетей делают на сайте просто статичным html. Это быстро, не создает лишние запросы к серверу, удобно для разработчика, но не очень удобно для клиента или человека редактирующего сайт. А зачастую когда верстается сайт, еще неизвестно какие именно будут ссылки в этом блоке. Поэтому мы сейчас реализуем эту возможность — задавать ссылки для блока соцсетей через админ-панель. И для этого воспользуемся системой областей виджетов WordPress.

 

Задача:

создать возможность добавлять ссылки на страницы соцсетей через админ-панель с помощью виджета.

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

 

Описание:

Что дано:

  1. Оформление — разметка нашего макета.
  2. Тема-шаблон WordPress для нашего сайта.

Что делаем:

Создаем простой виджет с обычным выводом данных введенных в его полях. Никакой обработки данных здесь не производится.

 

HTML-код блока , для примера тут 4 популярные соцсети

 

CSS-код

Ссылки на страницы соцсетей будут добавляться в поля виджета. Для каждого ссылки — одна переменная, одно поле (конечно можно сделать метабокс с динамическим добавлением) полей но для нашей задачи это излишне, потому что как правило количество соцсетей известно заранее — их иконки прорисованы в макете).

Переменных у виджета будет столько сколько будет элементов в блоке.

PHP-код, просто добавляем в functions.php

 

Применение:

разработка индивидуальных тем оформления для WordPress.

 

 

 

 

 

Яндекс.Метрика