3.8. Виджеты в WordPress


Структура урока

  1. Что такое виджеты и как они выглядят
  2. Особенность виджетов в WordPress.
  3. О пользе экспериментов.
  4. Итоги эксперимента: два виджета.
  5. Перенос виджета из одного сайдбара в другой

1.Что такое виджеты и как они выглядят.

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

Чтобы было понятнее рассмотрим скриншот:

То, что обведено красным и есть виджет.

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

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

2.Особенность виджетов в WordPress.

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

Откроется страница «Виджеты», в ней Вы увидите 2 колонки «Доступные виджеты» и колонку с 2 сайдбарами:

Доступных виджетов всего 12, а вот в сайдбарах – пусто. Как же так, на главной странице виджеты есть!

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

Можно, конечно, ничего не менять, оставить все как есть. И главное, не добавлять новые виджеты. Иначе, при добавлении новых виджетов, Вы столкнетесь с одним интересным явлением. При размещении хотя бы одного нового виджета, все остальные виджеты исчезнут из сайдбара.

Многих это пугает – «вдруг я что-нибудь сломал». Но так устроен WordPress, с этим надо просто смириться. Почему это сделано так, какая здесь заложена глубокая мысль – не знаю.

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

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

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

Пишем заголовок. Попробуем написать «Календарь записей», т.е. название из двух слов, и посмотрим, что получится:

Нажимаем «Сохранить». Теперь лучше всего свернуть этот виджет, нажав на треугольник (показан стрелкой). Должно получиться так:

Причем обратите внимание на то, что в поле «Сайдбар1» после нашего виджета появилось свободное место – для следующего виджета. Перейдем на главную страницу сайта. Для этого можно пойти и другим путем, чуть-чуть более удобным. Раньше мы нажимали на кнопку «Просмотр сайта», а сейчас попробуем кликнуть по названию самого сайта (у меня называется Site1):

На главной странице сайта появился наш виджет. Если у Вас его нет на экране монитора, нажмите кнопку в браузере «Обновить». Обратите внимание на название: оно вполне поместилось:

Но третье слово уже не войдет. Впрочем, попробуйте и увидите, что получилось:

Тем, кто не понял, что здесь написано, поясню – «Календарь новых записей». Значит, надо срочно вернуть все как было.

Из остальных виджетов — «Разное» исчезло, а виджеты «Рубрики» и «Спонсоры» остались. Значит, они зашиты в саму тему. И если мы желаем их изменить или убрать, надо лезть в код и править там.

А если мы сами поставим виджет «Рубрики» сами, может старые «Рубрики» уйдут? И чем они будут отличаться друг от друга? Поэкспериментируем.

Здесь хочу немного отвлечься. Но для пользы дела.

3.О пользе экспериментов.

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

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

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

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

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

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

4.Итоги эксперимента: два виджета.

Заходим в Административную панель, в разделе «Внешний вид» выбираем «Виджеты». В колонке «Доступные виджеты» находим виджет «Разделы», кликаем по нему и перетаскиваем в раздел «Sidebar1». Устанавливаем ниже «Календаря». Должно получиться вот так:

Заполняете заголовок и ставите галочки в чекбоксы. Сначала поставьте все галочки, сохраните и посмотрите на главной странице Вашего блога, как все это выглядит и как работает. Если что-то не понравится – вернитесь и уберите галочки из чекбоксов (еще раз кликните по ним). Я поставил флажок только в чекбокс «Показывать количество записей». Оставьте и Вы, потом увидите, для чего нам это надо. Вот, что мы видим:

Вывод: эксперимент показал, что появление нового виджета вовсе не убирает виджет, который прописан непосредственно в коде темы. Чтобы его убрать, все-таки нам придется залазить в код. (А что я Вам говорил: знание HTML может пригодиться). Но этим мы займемся позже.

5.Перенос виджета из одного сайдбара в другой.

Попробуем перенести установленный нами виджет из одного сайдбара в другой. Заходим в Адмпанель (раздел «Внешний вид», подраздел «Виджеты») и на открывшейся странице с Виджетами в правом столбце открываем Sidebar1 и Sidebar2. Устанавливаем курсор на только что установленный виджет «Рубрики», нажимаем левую кнопку мыши и, не отпуская мыши, перетаскиваем его из первого сайдбара во второй.

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

Установленный нами виджет в правом (втором) сайдбаре, видите цифры в скобках – это количество записей, значит, это наш новый виджет (для этого мы и ставили флажки в чекбоксы, чтобы как-то различать виджеты «Рубрика»). Теперь нам надо как-то убрать из первого сайдбара «Рубрики».

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

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

Удачи!

Перейти к следующему уроку.

...Сообщите об этой статье своим друзьям:
Благодарю Вас!
А еще Вы можете подписаться на рассылку и первым получать самые свежие статьи.

Автор: Сергей Ваулин

Похожие записи по этой теме:

25 thoughts on “3.8. Виджеты в WordPress

  1. Илья

    У меня очень интересный вопрос как сделать на вордпресс чтоб определеный виджет появлялся когда страницу прокручиваешь до середины.

    Reply
    1. admin Post author

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

      Reply
  2. Светлана

    Вот мой код

    /**/

    _sr (function () {

    _sr ('form[name="SR_form_35828_35"]').find ('div#sr-preload_').prop ('id', 'sr-preload_35828_35')

    _sr ('#sr-preload_35828_35').css ({'width':parseInt (_sr ('form[name="SR_form_35828_35"]').width () + 'px'), 'height':parseInt (_sr ('form[name="SR_form_35828_35"]').height ()) + 'px', 'line-height':parseInt (_sr ('form[name="SR_form_35828_35"]').height ()) + 'px'}).show ();

    if (_sr ('form[name="SR_form_35828_35"]').find ('input[name="script_path_35828_35"]').length && (document.charset || document.characterSet).indexOf ('1251') != -1) {

    _sr ('input[name="subscribe"]').attr ('onclick', 'return false;'),

    _sr.ajax ({

    dataType: 'jsonp',

    data: { form_id : '35828_35', remote_charset : (document.charset || document.characterSet), file : _sr ('input[name="script_path_35828_35"]').val (), phase : 'charset_rebuild'},

    url: _sr ('form[name="SR_form_35828_35"]').prop ('action').replace ('subscribe', 'user/forms_generator'),

    success: callback_charset_35828_35

    });

    } else {

    _sr.getScript (_sr ('input[name="script_url_35828_35"]').val (), function () {

    _sr ('#sr-preload_35828_35').hide ();

    });

    }

    });

    function callback_charset_35828_35 (data) {

    if (data.status == 'success') {

    _sr ('input[name="subscribe"]').attr ('onclick', '');

    _sr.getScript (_sr ('input[name="script_url_35828_35"]').val (), function () {

    _sr ('#sr-preload_35828_35').hide ();

    });

    }

    }

    Загрузка...

    Подписка студентам МГГУ

    Ваше имя:

    Фамилия:

    Ваш email-адрес

    Факультет, курс: Контакты : e-mail svetl@nm.ru

    Reply
    1. admin Post author

      Светлана, с таким кодом я не сталкивался, а сидеть сейчас и разбираться с ним нет времени, извините

      Reply
      1. Светлана

        Да я думаю, что этот код тут ни при чем, у меня в чекбокс в ПРИНЦИПЕ не ставится никакой текст в HTML!!! Может это криво программа WordPress 3-5 встала?

        Reply
          1. Светлана

            Имеет ли смысл вернуться к старой версии, и к какой?

            А не потеряется тогда все , что я с 3-5 делала?

          2. admin Post author

            Вернитесь к той версии, которая была до апгрейда WP. Если не помните, могу порекомендовать 3.4.2 — хорошо работает. Чтобы не потерять все сделанное, сделайте бэкап базы данных. Дополнительно можете скопировать в Word html версию тех статей, которые добавлены после апгрейда.

  3. Светлана

    Добрый вечер!

    Ищу в унынии в просторах Интернета, никто пока не помог, на Вас последняя надежда-

    У меня рухнул сайт и не восстановился, после отката перестали устанавливаться виджеты с HTML кодами в чекбокс WordPress, что можно сделать?

    Reply
    1. admin Post author

      Светлана, я не понял — какой сайт рухнул? Тот, который Вы указали работает. Вы пишете про откат, но сайт по-прежнему работает на WP 3.5. Напишите все самым подробным образом мне на почту

      Reply
      1. Светлана

        Этот, что Вы видели — уже восстановленный с бекапа, недельной давности и без пропавших статей и картинок, и внем не могу поставить виджет с HTML кодом(форма подписки, которая уничтожилась) для моих подписчиков

        Reply
        1. admin Post author

          Светлана, а сам виджет устанавливается, например, с обычным текстом? Или он как бы свернутый?

          Reply
          1. Светлана

            Не пробовала, сейчас попробую, вообще он уже из чекбокса пропадает

          2. Светлана

            попробовала поставить форму в теле статьи, на главной странице она встала, а в рубрике — стала криво — вначале прописано "Tweet зарегистрируйтесь здесь Загрузка… Подписка... и все заголовки формы, а потом стоит сама форма регистрации

          3. admin Post author

            Светлана, пришлите мне на почту форму подписки, которая у Вас криво встает, — я посмотрю

          4. admin Post author

            HTML, Вы ведь его пытаетесь разместить в виджете

  4. Ислана

    Здравствуйте, Сергей! У меня календарь больше той рамочки, в которую он должен встать. Что же делать?

    Reply
  5. Andrey

    Не могу перетянуть виджет и вообще ничего там сделать, пустая колонка, что это может быть???

    Reply
    1. admin Post author

      Andrey, если Вы не можете перетащить виджеты, то убедитесь, что Ваша тема поддерживает виджеты.

      Reply
  6. Татьяна

    Здравствуте. Помогите срочно!!! У меня такая проблема. Не перетаскиваются виджеты в сайдбар. java установила и в разных браузерах попробовала, всё равно ничего не перетаскивается.( И ещё я хочю вставить сётчик. Щётчик вставляется, а виджет пропадает.

    Reply
    1. admin Post author

      Татьяна, я установил Вашу тему и посмотрел — все перетаскивается. Там есть другой косячок — тема кривовата: посмотрите в разных разрешениях (клавиши Ctrl и + или Ctrl и -) — район поиска (слева). А о каком счетчике идет речь, как и куда Вы его вставляли?

      Reply
  7. Серж

    Мне как новичку статья была интересная! WordPress для меня пока только что открытая книга!

    Удачи в развитии!!! Ваш постоянный читатель...

    Reply
  8. Алексей

    Здравствуйте, Сергей! Перенёс сайт на денвер. Всё работает нормально, за исключением добавки виджетов в сайдбар. WP версии 3.1.1 Когда переношу виджет в сайдбар, он открывается на секунду, а потом схлопывается и ничего добавить в него нельзя. Календарь, допустим, добавляется, но такой страшненький, без слёз не взглянешь. В текстовый виджет добавить ничего не возможно. Подскажите, если знаете, в чём может быть проблема

    Reply

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

Your email address will not be published. Required fields are marked *