В нашем курсе плагинов WordPress изучаются два плагина, позволяющих вставить произвольный код в шапку и подвал сайта, а так во всплывающее (модальное) окно. Это очень удобно для вставки блока кнопок социальных сетей. В некоторых темах WordPress блок кнопок уже установлен. Но пока еще не во всех.
Но, как и во многих других случаях блок кнопок можно установить и без использования плагинов. И так прежде всего нам понадобятся файлы самих кнопок. Их не сложно найти в интернете. Но выбирать надо прежде всего те, на которые имеется лицензия на использование и применение. Необходимо подобрать кнопки форме круга или квадрата, с расширением png. Для этого делается запрос типа «Кнопка фейсбук png». Выбирать стоит из изображений небольшого размера. Желаемый размер, если говорить о квадратной кнопке порядка 200х200 px. Поскольку большая часть изображений кнопок квадратная можно использовать любую изменив размеры в с помощью сервиса Фотошоп онлайн.
Поскольку избрано расширение png изображение кнопки будет выглядеть как бы на белом фоне. Это позволит установить их с помощью простейшего кода html — несколько стоящих в один ряд блоков одинакового размера и цвета фона с вставленными кликабельными изображениями.
Шаг первый создаем ряд блоков кнопок.
Для удобства работы содержимое каждого из блоков обозначим цифрами, и установим различные цвета фона (background цвет фона). Параметры width и height означают соответственно ширину и высоту блока
<div style=»background:#FF0000; width:100px; height:100px;float:left;»>1</div>
<div style=»background:#00FF00; width:100px; height:100px;float:left;»>2</div>
<div style=»background:#FF8C00; width:100px; height:100px;float:left;»>3</div>
Выглядеть внешне это будет вот так.
Шаг второй. Указываем ссылку на изображение кнопок и располагаем их в центре блога.
HTML код выглядит так <img aligncenter» src=»http://adres knopki.png; align center» Для чего в части содержимого блока, там где изначально стояли порядковые номера блока, прописываем код с адресом где расположена картинка. Затем удаляем номер блока.
Шаг третий Делаем ссылки кликабельными.
Т.е. «соединяем» адрес кнопки с адресом группы или страницы в социальной сети. Код должен выглядеть так <a href=»http:// адрес вашего аккаунта в социальной сети «><img src=» адрес кнопки.png»></a>. Внешних изменений при этом не происходит.
Шаг четвертый наводим красоту
Устанавливаем рамку блока рамку блока. Этот параметр имеет некий тип — сплошная или пунктирная, цвет и толщину линии. Для установки рамки в код свойство border (рамка ) с выбранными параметрами border:solid 1px MediumBlue; Т.е сплошная, толщиной в один пиксель, синего цвета. А затем устанавливаемый единый фон для всех трех блоков. Например Peachpuff #FFDAB9.Для выравнивания кнопки по середине добавим к коду изображения правило align с параметром middle. Т.е. align=»middle».А для указания отступов между блоками margin-right: 10px; Окончательный результат
Уважаемые коллеги, если вам действительно необходимо создать подобный блок кнопок не рекомендую делать это так как это описано в настоящей статье. Это не совсем корректный прием и приведенный вариант только урок для овладения навыками верстки.