Виджеты для сайта WordPress как удобное средство оформления страниц

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

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

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

Также далее разберем подробнее, что представляют из себя виджеты, а также некоторые технические детали использования этих элементов именно для веб-ресурсов, работающих на CMS WordPress. Думаю, что такая информация будет полезна всем без исключения начинающим вебмастерам.

Содержание WordPress виджетов, их значение и применение

Для начала отмечу, что виджеты WP могут содержать как HTML код, так и скрипт, в том числе JawaScript. Это дает широкий спектр для использования этих элементов. Таким образом, widgets способны отображать самый разнообразный контент, включая ссылки на разделы проекта или на внешние ресурсы, а также на популярные материалы блога.

Кроме этого, в этих блоках можно размещать: баннеры (что представляет из себя баннерная реклама), объявления Adsense (здесь о регистрации и добавлении вебсайта в систему контекста Google) или РСЯ (тут о рекламной сети Яндекса подробный мануал), а также различные счетчики, кнопки социальных сетей, формы подписки и другие элементы.

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

К чему я это говорю? А к тому, что расширение спектра доступных действий возможно и при использовании виджетов. Дело в том, что для некоторых тем Вордпресс можно добавить функцию, которая обеспечит корректное отображение нужных элементов, выводимых не только при помощи HTML или скриптов, но и посредством PHP-кода.

Этот код вставляется в нужный виджет в сайдбаре (sidebar) или, скажем, в футере (footer) вебсайта. Кстати, не лишним будет ознакомиться со структурой шаблонов темы Вордпресс, где вы найдете много полезных деталей. О том, как активировать работу ПХП кода в виджетах, я подробнее расскажу чуть ниже.

Но прежде рассмотрим технические моменты наполнения контентом и размещения widgets на нужном вам месте в левой или правой боковой колонке (сайдбаре) либо в подвале (хидере) веб-сайта. Для этого необходимо войти в админ панель своего блога, доступ к которой появляется в результате установки WordPress (посредством ручного или автоматического метода).

После инсталляции и активации темы (описание этого действа дано в материале, который вы сможете найти по ссылке, данной во втором предложении этой статьи) из левого меню выбираете «Внешний вид» — «Виджеты»:

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

2016-08-13_121820

Для активации любого виджета зажимаете его левой кнопкой мышки и, не отпуская ее, перетаскиваете блок в нужную область, затем отпускаете кнопку, и блок занимает выбранное вами место (данный способ называется «drag and drop» — «протащи и брось»). Например, для моей темы доступны элементы как для сайдбара, так и для футера.

Скажем, после размещения виджета «Рубрики» в боковой панели появляется список названий категорий блога со ссылками на соответствующие страницы:

Кстати, данный блок можно редактировать, проставив галочки напротив соответствующих опций. К примеру, можно устанавливать вывод рубрик в виде выпадающего меню, отображать число записей (статей) в данной категории, а также активировать функцию фиксации иерархии (например, если у вас есть подкатегории):

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

В этом случае сохраняются абсолютно все настройки, произведенные ранее, и в любой момент деактивированный таким образом виджет можно восстановить. Обращаю ваше внимание на то, что widgets можно располагать в любом порядке, меняя их местами и используя для этого выше описанный метод «drag and drop».

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

Это просто заготовки, в которые помещается определенный контент. Например, в одном из таких виджетов можно разместить код со ссылками на профили в социальных сетях (тут о Гугл+, тут о ВКонтакте, здесь о Твиттере, а здесь о Фейсбуке информация), на RSS канал, а также форма подписки по e-mail на feed:

в результате полученный блок будет иметь примерно такой вид:

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

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

  • В самом верху сайдбара должны располагаться сервисы подписки, потому что подписчики наиболее важная часть ваших читателей, это ПОСТОЯННЫЕ посетители вашего ресурса;
  • В верхней части сайдбара не стоит располагать один за другим рекламные баннеры, потому что это может вызвать крайне негативную реакцию, особенно если ресурс молодой. Посетители, толком еще не ознакомившиеся с вебпроектом и не вкусившие никакой полезной информациии, получают сразу рекламный текст. В результате из чувства протеста могут покинуть его, несмотря на то, что, возможно, на данном ресурсе и есть что-то полезное, а вы получите результат, обратный ожидаемому.

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

Активация PHP кода для виджетов

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

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

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

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

Исполнение этой цели не представляется сложной задачей. Необходимо лишь открыть волшебный файл functions.php, который должен присутствовать практически в каждой теме WordPress, и прописать в нем следующую функцию (лучше вверху, сразу за <php):

add_filter('widget_text','sp_widget_execute_php',100);
function sp_widget_execute_php($text) {
if(strpos($text,''.$text);
$text = ob_get_contents();
ob_end_clean();
}
return $text;
}

Для редактирования и сохранения файлов обязательно пользуйтесь каким-нибудь сторонним софтом (советую для этих целей HTML, CSS и PHP редактор Notepad++, который позволяет просто и легко возвращаться на несколько шагов назад), дающим возможность свести ошибки к минимуму.

Подозреваю, некоторые зададутся вопросом, в каких случаях это может понадобиться? За примерами далеко ходить не надо. Наверняка, вы уже не раз наблюдали блок «Лучших комментаторов» на многих блогах, который обычно располагается в сайдбаре и используется владельцами для популяризации своих проектов.

Так вот, наличие подобного блока как раз и требует ввода соответствующего PHP-кода. Конечно, для реализации данной задачи можно использовать отдельный шаблон для того же сайдбара (например, sidebar.php), но предложенный метод может оказаться более удобным вариантом, так что данная информация точно кому-нибудь да пригодится.

Как удалить или отключить виджеты для WordPress простым способом

Осталось рассмотреть еще один важный вопрос, а именно возможность отключения виджетов вообще. Ко мне не то, чтобы часто, но обращаются читатели с подобной просьбой. Бывают случаи, когда это необходимо сделать, чтобы появилась возможность редактировать содержание футера и сайдбара через соответствующие шаблоны (sidebar.php и footer.php).

К слову, я тоже кое-где на своих проектах под управлением Вордпресс отключаю эту опцию в связи с особенностями их наполнения. И это несмотря на то, что виджеты в общем случае достаточно удобная часть функционала WP.

Если вы хотите удалить все стандартные виджеты WordPress, то есть те, которые добавляются системой, то самый легкий метод — это плагин Remove Default Widgets, который можно скачать с официального вордпрессовского ресурса. Он не требует никаких настроек с вашей стороны. После установки и активации это расширение автоматически выполнит свою задачу.

Правда, иногда необходимо удалить не все, а только лишь некоторые блоки, в то время как Remove Default Widgets, к сожалению, такой возможности нам не предоставляет. В таком случае к нашим услугам вновь functions.php, в который мы прописываем вот такой код:

add_action('widgets_init', 'unregister_basic_widgets' );
function unregister_basic_widgets() {
	unregister_widget('WP_Widget_Pages');            // Виджет страниц
	unregister_widget('WP_Widget_Calendar');         // Календарь
	unregister_widget('WP_Widget_Archives');         // Архивы
	unregister_widget('WP_Widget_Links');            // Ссылки
	unregister_widget('WP_Widget_Meta');             // Мета виджет
	unregister_widget('WP_Widget_Search');           // Поиск
	unregister_widget('WP_Widget_Text');             // Текст
	unregister_widget('WP_Widget_Categories');       // Категории
	unregister_widget('WP_Widget_Recent_Posts');     // Последние записи
	unregister_widget('WP_Widget_Recent_Comments');  // Последние комментарии
	unregister_widget('WP_Widget_RSS');              // RSS
	unregister_widget('WP_Widget_Tag_Cloud');        // Облако меток
	unregister_widget('WP_Nav_Menu_Widget');         // Меню
}

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

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

Чтобы произвести отключение widgets, нужно просто закомментировать нужный фрагмент (проставить соответственно «/*» и «*/» перед началом и после окончания кода функции. В результате выполнения этих действий и сохранения изменений вы больше не найдете в админке WordPress вкладки с виджетами.

Все дальнейшее редактирование будет осуществляться в полном объеме в sidebar.php и/или footer.php либо в производных этих шаблонов. Впрочем, в любое время вы можете вернуть исходный вид, если раскомментируете функцию вывода, сняв символы звездочки и слэша.

В заключение еще одно видео о создании собственных widgets как вручную, так и посредством плагинов:

Поделиться с друзьями
Игорь Горнов

Создатель и администратор сайта Goldbusinessnet.com. Участник нескольких успешных проектов и автор более 1000 статей о работе в интернете, создании сайтов, полезных программах и сервисах.

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

Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.

  1. Charleskilk

    Хорошая подборка плагинов для WordPress. Некоторые устанавливал, о некоторых слышал, но увидел и те, которые возьму на карандаш .

    Ответить
  2. Иван Ильин

    Спасибо за информацию. Я как раз пытаюсь немного улучшить внешний вид сайдбара. И за рекомендацию по размещению блока соцзакладок тоже спасибо. Кстати я никогда не забываю посмотреть очень интересную рекламу… И у вас посмотрел.

    Ответить
  3. Ольга

    Здравствуйте, скажите, пожалуйста, как в стандартной теме вордпресс удалить те социальные кнопки, которые были в этой теме первоначально?

    Ответить
    1. Игорь Горнов автор

      Ольга, какую тему и какие социальные кнопки Вы имеете ввиду? Вы имеете ввиду последнюю вордпрессовскую тему Twenty Fourteen?

      Ответить
  4. ali

    Когда открою внешный вид в WordPress 3.7.1 тама нету виджити как его пдключит????????????

    Ответить
    1. Игорь Горнов автор

      ali, возможно, у Вас тема, в которой не прописана функция для вывода виджетов.

      Ответить
  5. Aleks

    Здравствуйте, хочу поставить виджет на блог с фидбернером. И хотелось бы, чтобы рамке были не пустые, очерченные безликими линиями. А например чтоб был нарисован как настоящий красочный конверт почтовый и в нем так же заполнять форму e-mail адрес

    Ответить
    1. Игорь Горнов автор

      Aleks, загрузите нужную картинку в корневую папку, где хранятся изображения и укажите контейнер div с классом, для которого пропишите стили CSS со свойством background: url (путь к файлу изображения). Вот вам и картинка.

      Ответить
      1. Aleks

        Игорь, спасибо большое

        Ответить
        1. Игорь Горнов автор

          Aleks, мой ответ полностью Вас удовлетворил?

          Ответить
          1. Aleks

            Игорь сижу пока разбираюсь. Спасибо за помощь. Если будут вопросы, буду еще спрашивать.

          2. Игорь Горнов автор

            Хорошо. 🙂

  6. Наталья Кочеткова

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

    Ответить
    1. Игорь Горнов автор

      Наталья, а Вы сохраняете виджет? Попробуйте после добавления виджета нажать кнопку ‘Сохранить’ в админ панели. Откройте страницу сайта дополнительно в новом окне, тогда будет удобнее следить за изменениями. Сначала добавьте виджет, сохраните его, затем в соседней вкладке перезагрузите страницу, думаю, здесь не должно быть проблем.

      Ответить