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

Что такое виджеты для WordPress?

Виджет для вордпресса

Как добавить виджет WordPress

Попробую сформулировать определение сама, по собственному разумению.

Виджет на сайте – это логически законченный кусок кода (или, можно сказать, мини-программа), который вставляется в отдельный блок сайта (обычно тоже называемый виджетом) и служит для добавления текста, видео, изображений, приложений сторонних ресурсов… Обычно эти блоки помещаются в сайдбары сайта, а некоторые темы WordPress допускают их размещение в футере и других местах, специально для этого предназначенных.

Как добавлять виджеты для вордпресс в сайдбар сайта

Входите в административную панель WordPress, находите в меню раздел «Дизайн», подраздел «Виджеты». Открывается такая страница (в разных темах она может отличаться):

добавить виджет

Виджеты для WordPress

Чтобы добавить виджет, просто хватайте его левой кнопкой мыши и тащите в сайдбар на предназначенное для него место. Вы увидите пунктирный прямоугольник в том месте, куда он будет вставляться. Не спешите отпускать кнопку мыши, сначала убедитесь, что место именно то. Но даже если поставите не на то место или потом решите, что лучше ему быть вот здесь, а не там :), то ничего страшного: снова берите мышкой и тащите, куда нужно.

После установки он откроется сразу. А чтобы открыть его уже потом для редактирования, нажмите на треугольничек сверху-справа. Например, я открыла: «Последние записи», «Рубрики», «Облако меток». Впишите заголовок, если Вас не устраивает тот, что дан по умолчанию, и выберите настройки. Пояснять тут нечего, все и так понятно. Нажимайте «Сохранить». Не спешите закрывать, сначала посмотрите, как он выглядит на сайте. Если всё хорошо, то жмите «Закрыть», иначе редактируйте дальше, а потом снова сохраняйте. Если не хотите его добавлять или отпала надобность в уже существующем, тогда нажимаете «Удалить».

добавить виджет на сайт

Заполнение виджета

Виджет “Текст” (вставка кода)

Находите в левой части виджет «Текст», хватаете его мышкой и тащите на предназначенное ему место в сайдбаре, вводите заголовок. Скопированный для вставки код (или подготовленный текст) вставляете в нижнее пространство. Галочку «Автоматически добавлять параграфы» нужно ставить только для текста. Не забудьте сохранить.

виджет для текста или кода

Виджет “Текст”

В этот виджет обычно помещают приложения от сторонних сервисов (так, Вы видите на моем блоге виджеты от Youtube и Twitter, ссылки на другие сайты: «Я в интернете»), видео, игры, картинки…

Удаление виджета с сохранением настроек

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

Удаление виджета

Удаление виджета с сохранением настроек

А сейчас я верну его обратно, и на блоге Вы, как обычно, увидите кнопки от групп Subscribe под заголовком “Это полезно”.

Простое удаление, без сохранения настроек, выполняется нажатием кнопки «Удалить».

Теперь Вы знаете, как добавить виджет WordPress на сайт.

TEXT.RU - 100.00%

И видео для развлечения:

Это тоже интересно:

Комментарии

  • Olga пишет:

    Спасибо за полезную информацию “Как добавить виджет на сайт WordPress”. Отдельное спасибо за позитивный видеоролик. Забавные котята!

  • Нина, мне нравятся ваши статьи для начинающих блогеров. Так держать!

  • Mauritz пишет:

    Nina! Отличные у Вас статьи. Большое Спасибо. Удачи.
    Мауриц.

  • Спасибо, Мауриц! И Вам удачи!

  • Николай пишет:

    Так просто и подробно описано! Я бы не догадался. Буду учиться у Вас!
    Удачи!

  • Temo4kin пишет:

    Добрый вечер!
    А как быть если я хочу разместить виджет не в сайдбаре, а просто в тексте страницы?

    • ТО, что Вы хотите, это уже не виджет. Это либо кусок кода, либо видео, либо что-то еще. Для всего этого в вордпрессе существуют свои возможности. Если Вы сформулируете, что именно Вы хотите добавить в текст, я Вам подскажу, как это сделать.

      • Temo4kin пишет:

        НУ это должно быть объявление – текстовое или картинка. Пока реализовал в виде виджета с помощью плагина Random Text. Но хотелось бы что-то подобное и пост встраивать.

        • Как вставить в пост картинку, прочитайте мою статью: http://mojbiznes.ru/kak-vstavit-kartinku-na-sajt-wordpress.html.
          С текстом сложнее, если Вы не знаете хотя бы основ html и css. В текст статьи текстовое объявление вставляется, как и обычно Вы пишете текст. Но потом его нужно оформить в рамочку, сделать фон и другие прибамбасы…
          Поэтому вставляйте пока объявления в виде картинок. А когда наберетесь опыта, тогда уже и текстовые научитесь делать.

          • Temo4kin пишет:

            Ооооо! Простите! Боюсь Вы меня не поняли!)))
            Мне не нужны простые картинки или текст)))
            Лучше я не буду Вас и дальше вводить в заблуждение.
            Вот сайт – http://sosh1-12.org
            Там справа самый верхний виджет – Объявления. Вот что-то такое я хотел бы иметь в посте – чтобы каждый раз, как посетитель открывает один и тот же пост, он мог видеть разные объявления.))
            Я просто видимо уже не совсем новичок в этом)))

            • :)
              Простите, что приняла Вас за новичка. Просто мне пишут, в основном, они.
              Давайте уточним: Вы хотите, чтобы посетителю в любой статье показывалось актуальное на данный момент объявление (то есть, по сути, последнее) или чтобы показывалось одно из нескольких заготовленных в случайном порядке?

            • Я не готова в данный момент ответить на этот вопрос. Скорее всего, это можно реализовать с помощью скриптов. Задайте вопрос в поисковик, наверняка найдется куча вариантов.

  • Галина пишет:

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

  • Ирина пишет:

    Отличная статья для новичков. Помню, как в начале пути не знала как вставлять виджеты. А прочитав твою статью сразу становится всё понятно.

Оставить комментарий

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

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">