Виджеты и сайдбар WordPress. Как добавить виджет и сайдбар на сайт

31 Мар 2017

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

Плейлист «Как создать сайт на WordPress»

TimeWeb лучший хостинг для WordPress: домен в подарок, 99 рублей в месяц.
Попробуйте, 10 дней бесплатно: РЕГИСТРАЦИЯ ОБЗОР ВИДЕО

Что такое сайдбар WordPress. Сайдбар это боковая колонка сайта, в которой размещены информационные блоки (виджеты). Какими бывают сайдбары: сайдбар справа (располагается справа от статей) и сайдбар слева (располагается слева от статей). В зависимости от темы WordPress на странице сайта может быть как сайдбар справа, так сайдбар слева, так и оба этих сайдбара одновременно. На изображении ниже можно посмотреть, как располагается сайдбар на сайте:Что такое виджет WordPress. Виджет это информационные блоки, которые в основном размещают в сайдбаре. Также виджеты могут быть размещены в шапке сайта (верхний виджет), подвале (нижний виджет) или в произвольном месте (опять же, в зависимости от темы). Виджеты WordPress облегчают поиск информации и улучшают навигацию по сайту. В виджетах размещают: навигационные ссылки на страницы сайта, ссылки на сторонние ресурсы, рекламные коды, формы подписки, баннеры и любую другую информацию. Вот так выглядят виджеты на моем блоге:Добавить виджет. Переходим в административную панель «WordPress» ⇒ «Внешний вид» ⇒ «Виджеты». После установки WordPress для добавления в сайдбар доступно двенадцать виджетов:В правой части находятся сайдбары и виджеты, в которые можно добавлять виджеты (у вас может быть по-другому, все зависит от темы WordPress):Как добавить виджет в сайдбар. Как сделать сайдбар справа. Выбираете нужный вам виджет (на изображении ниже выбран виджет «Текст (Произвольный текст или HTML-код)»), выбираете сайдбар (на изображении ниже выбран сайдбар справа) и нажимаете «Добавить виджет»:Затем появится окно настройки виджета. «Заголовок» это название виджета, лично я заголовком не пользуюсь, так как эта надпись отображается на сайте и не всегда вписывается в содержимое виджета. «Содержимое» это поле для ввода кода, вставляете сюда HTML-код и нажимаете «Сохранить»:Виджетов в сайдбаре может быть сколько угодно, их можно менять местами простым перетаскиванием, зажав правой кнопкой мыши:

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

Как добавить ссылку в виджет. У новичков могут возникнуть трудности. Чтобы надпись со ссылкой корректно отображалась, в виджет нужно вставлять HTML-код. Пример такого кода представлен ниже. Виджет HTML-код:

<a href="http://адрес вашего сайта/" target="_blank">Текстовая ссылка</a>

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

<a href="http://адрес вашего сайта/"target=»_blank» style="position: relative; left: 13px; top: -474px"><br /><font color=#00ff00;">
<strong><span style="font-size: 14pt;" > ✓</font><font color=000000;"><strong><span style="font-size: 11pt;" > Текстовая ссылка</a>

Как выглядит данный код на сайте:Как видим, каждому элементу при необходимости можно задать разный цвет: символ ✓ зеленый (font color=#00ff00), цвет ссылки черный (font color=000000). Меняйте цвет, шрифт, размер шрифта на нужные вам, и вы получите ссылку, адаптированную под дизайн вашего сайта. Важно. Тег <br /> это перенос ссылки на новую строку. В виджете размещают большое количество ссылок. Используя данный тег, все ссылки будут симметрично перенесены на следующую строку.

 

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

<img src="http://busines-expert.com/wp-content/uploads/2016/04/S-chego-nachat.gif"/></a>

Как добавить картинку с ссылкой в виджет. Следующий код позволяет добавить картинку с ссылкой (баннер) в виджет:

<a href="http://адрес вашего сайта/"><img src="http://busines-expert.com/wp-content/uploads/2016/04/S-chego-nachat.gif"/></a>

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

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

<div style="position: relative; width: 250px; height: 525px"><div style="position: absolute; top: 100; left: 100; width: 250px"><img src='http://busines-expert.com/wp-content/uploads/2016/01/Rubrjki3.png'>
<a href="http://busines-expert.com/s-chego-nachat/"target=»_blank» style="position: relative; left: 13px; top: -474px"><br /><font color=#00ff00;">
<strong><span style="font-size: 14pt;" > ✓</font><font color=000000;"><strong><span style="font-size: 11pt;" >С чего начать? (13)</a>
<a href="http://busines-expert.com/sposoby-zarabotka/"target=»_blank» style="position: relative; left: 13px; top: -474px"><br /><font color=#00ff00;"><strong><span style="font-size: 14pt;" > ✓</font><font color=000000;"><strong><span style="font-size: 11pt;" >Способы заработка (23)</a>
<a href="http://busines-expert.com/igry-s-vyvodom-deneg/"target=»_blank» style="position: relative; left: 13px; top: -474px"><br /><font color=#00ff00;"><strong><span style="font-size: 14pt;" > ✓</font><font color=000000;"><strong><span style="font-size: 11pt;" >Игры с выводом денег (10)</a>
<a href="http://busines-expert.com/investirovanie-deneg/"target=»_blank» style="position: relative; left: 13px; top: -474px"><br /><font color=#00ff00;"><strong><span style="font-size: 14pt;" > ✓</font><font color=000000;"><strong><span style="font-size: 11pt;" >Инвестирование денег (24)</a>
<a href="http://busines-expert.com/kak-zarabotat-bitkoiny/"target=»_blank» style="position: relative; left: 13px; top: -474px"><br /><font color=#00ff00;"><strong><span style="font-size: 14pt;" > ✓</font><font color=000000;"><strong><span style="font-size: 11pt;" >Как заработать Биткоины (6)</a>
<a href="http://busines-expert.com/platezhnye-sistemy/"target=»_blank» style="position: relative; left: 13px; top: -474px"><br /><font color=#00ff00;"><strong><span style="font-size: 14pt;" > ✓</font><font color=000000;"><strong><span style="font-size: 11pt;" >Обзор платежных систем (8)</a>
<a href="http://busines-expert.com/poleznye-stati/"target=»_blank» style="position: relative; left: 13px; top: -474px"><br /><font color=#00ff00;"><strong><span style="font-size: 14pt;" > ✓</font><font color=000000;"><strong><span style="font-size: 11pt;" >Полезные статьи (10)</a>
<a href="http://busines-expert.com/dostizhenie-celi/"target=»_blank» style="position: relative; left: 13px; top: -474px"><br /><font color=#00ff00;"><strong><span style="font-size: 14pt;" > ✓</font><font color=000000;"><strong><span style="font-size: 11pt;" >Достижение цели (2)</a>
<a href="http://busines-expert.com/biznes-idei/"target=»_blank» style="position: relative; left: 13px; top: -474px"><br /><font color=#00ff00;"><strong><span style="font-size: 14pt;" > ✓</font><font color=000000;"><strong><span style="font-size: 11pt;" >Бизнес идеи (3)</a>
<a href="http://busines-expert.com/privlechenie-deneg/"target=»_blank» style="position: relative; left: 13px; top: -474px"><br /><font color=#00ff00;"><strong><span style="font-size: 14pt;" > ✓</font><font color=000000;"><strong><span style="font-size: 11pt;" >Привлечение денег (2)</a>
<a href="http://busines-expert.com/kak-privlech-referalov/"target=»_blank» style="position: relative; left: 13px; top: -474px"><br /><font color=#00ff00;"><strong><span style="font-size: 14pt;" > ✓</font><font color=000000;"><strong><span style="font-size: 11pt;" >Как привлечь рефералов(12)</a>
<a href="http://busines-expert.com/webmoney-2/"target=»_blank» style="position: relative; left: 13px; top: -474px"><br /><font color=#00ff00;"><strong><span style="font-size: 14pt;" > ✓</font><font color=000000;"><strong><span style="font-size: 11pt;" >WebMoney (4)</a>
<a href="http://busines-expert.com/binarnye-opciony/"target=»_blank» style="position: relative; left: 13px; top: -474px"><br /><font color=#00ff00;"><strong><span style="font-size: 14pt;" > ✓</font><font color=000000;"><strong><span style="font-size: 11pt;" >Бинарные опционы (10)</a>
<a href="http://busines-expert.com/zarabotok-na-sajte/"target=»_blank» style="position: relative; left: 13px; top: -474px"><br /><font color=#00ff00;"><strong><span style="font-size: 14pt;" > ✓</font><font color=000000;"><strong><span style="font-size: 11pt;" >Заработок на сайте(5)</a>
<a href="http://busines-expert.com/zarabotok-na-youtube/"target=»_blank» style="position: relative; left: 13px; top: -474px"><br /><font color=#00ff00;"><strong><span style="font-size: 14pt;" > ✓</font><font color=000000;"><strong><span style="font-size: 11pt;" >Заработок на YouTube (24)</a>
<a href="http://busines-expert.com/kak-sozdat-sajt-poshagovaya-instrukciya-sozdanie-sajta-na-wordpress/"target=»_blank» style="position: relative; left: 13px; top: -474px"><br /><font color=#00ff00;"><strong><span style="font-size: 14pt;" > ✓</font><font color=000000;"><strong><span style="font-size: 11pt;" >Как создать сайт (23)</a>

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

Опубликовано в Как создать сайт. Пошаговая инструкция
Советую посетить следующие страницы:
Плагин WPFront Scroll Top. Кнопка вверх для сайта
Плагин WP Quads. Как разместить рекламу на сайте
Плагин WP Super Cache. Ускоренная загрузка сайта
✓ Как установить счетчик посещений на сайт
 Разработка и создание дизайна сайта самому

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

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

*

Лучший
курс обмена
BestChange.ru – популярный сервис по подбору выгодных обменных пунктов электронных валют, который поможет вам производить свои обмены безопасно и с минимальными потерями на комиссиях.
Обменять
на

Последнее на YouTube

Популярное на YouTube
© 2015-2017 Busines-Expert.com. Все права защищены. Все о заработке в интернете
Лучший обменник WM
 mmgp
Яндекс.Метрика
Рейтинг@Mail.ru