Главная » WordPress » Делаем тему WordPress виджет-совместимой

Делаем тему WordPress виджет-совместимой

Добро пожаловать! Когда я создавал блог, столкнулся с рядом проблем, в этот список входила и тема, которая не поддерживает виджеты.

виджеты wordpress

Как новичку в WordPress, сделать тему виджет-совместимой удалось не сразу. Трудности возникли не из-за короткого общения с данной CMS, в Интернете попросту почти нет этой информации.

На оставшуюся часть припадают Веб-мастера, которые уже помногу лет заняты своим любимым делом и описывают подобные темы так, будто все мы программисты. При написании статьи для тех, кто только встал на тропу веб-мастерства я стараюсь выражаться понятным языком. Написать «это вставить, а это править» может каждый. Собственно, а куда вставлять, зачем это делать, что править? Уже который раз ловлю себя за тем, что ищу во всемирной паутине ответы на вопросы, которые в последствии сам и решаю. Ну что же, приступим!

Сделать тему виджет — совместимой проще простого!  Для начала, что такое виджет вообще? Этот термин применяется во многих сферах, но больше всего он известен пользователям компьютеров.

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

Найти их вы можете в панели администратора, выбрав «Внешний вид — Виджеты»

внешний-вид-виджет

Если у вас нет данного пункта вовсе или на странице «Виджеты» вы видите следующее содержание:

боковые колонки не определены

Значит, ваша тема их не поддерживает. Не торопитесь искать новую, просто добавьте пару значений.

 

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

Для этого вам потребуется найти файл темы «functions.php», если такого нет, создайте его.

Где найти файл functions.php?
Используя FTP-соединение:  /wp-content/themes/Название вашей темы/ functions.php
Через панель Администратора: Внешний вид — Редактор — Функции темы

Добавьте в начало файла «functions.php», после «<?php» следующий код:

Пример:

вставить код виджета

Классы «vash-class» и «vash-title» можете заменить любыми своими или оставить как есть. С помощью этих классов можно управлять стилями виджета.

Далее найдите файл «sidebar.php»

Где найти файл sidebar.php?
Используя FTP-соединение:  /wp-content/themes/Название вашей темы/ sidebar.php
Через панель Администратора: Внешний вид — Редактор — Боковая колонка

Добавьте в него следующий код:

Пример:

вставка кода в сайдбар

Вот и все друзья! Теперь у вас виджет — совместимая тема.

 

Как пользоваться виджетами

После успешного внедрения виджетов в тему, вы можете начать ними пользоваться. Перейдите в панели администратора во «Внешний вид — Виджеты». Чтобы поместить интересующий вас виджет в боковую колонку просто перетяните его, зажав левую кнопку мыши.

перетягивать виджет

После перемещения можно будет задать ему название. Выбрав виджет «Текст» вы можете самостоятельно наполнить его содержимым (например, вставить какой-либо html код).

 

Виджет не перетаскивается, что делать?

Если ваши виджеты не перетаскиваются мышкой и имеют такой вид:

не перетаскиваются виджеты

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

включить перетаскивание виджета

В открывшемся меню выберете «Отключить режим специальных возможностей». Готово! Теперь виджеты перетаскиваются. Желаю вам успехов во всех начинаниях!

6 Комментарии

  1. Благодарю за подсказку с отключением режима специальных возможностей. Самопроизвольно он как то включился, и не мог ни один виджет перетащить

  2. Сергей, спасибо!

    Наконец то нашла ответ, почему виджеты не перетаскиваются мышкой.

    Оказывается все просто.
    Еще раз спасибо!

  3. Спасибо огромное! Пол года ответ не могла найти! Сейчас вся улыбаюсь аж, что решение такое простое и вы такой молодец, что им поделились! :smile:

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

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