Апр
29

Делаем шаблон для WordPress виджет-совместимым

Виджеты WordPressВиджеты позволяют простым перетаскиванием добавлять или удалять различные информационные блоки в ваши колонки, а также менять их порядок и расположение, при этом от вас не требуется знание HTML или PHP. Таким образом, можно настраивать свой блог или сайт абсолютно как вашей душе угодно. Виджеты  можно располагать в боковых колонках и в футере и даже в шапке сайта. Общее определение виджета – это графический мини-модуль, который располагается в рабочем пространстве программы и предназначен для украшения или решения отдельных задач. Конкретно в WordPress примерами виджетов могут служить стандартные блоки поиска, страниц, категорий, архива, календарь записей и т.д. В принципе, современные темы и шаблоны уже являются виджет-совместимыми, поэтому придают большую гибкость при управлении сайтом, однако если вы используете шаблон, выпущенный давно, то можете столкнуться с такой проблемой, как отсутствие в нем виджет-совместимости.  Виджеты в панели администрированияЧтобы узнать, является ли ваш шаблон виджет-совместимым достаточно выбрать в панели администрирования пункт “Виджеты” в блоке “Внешний вид”. Если шаблон не поддерживает виджеты, то появится сообщение, что боковые колонки не определены, а значит и используемая вами тема не поддерживает виджеты и нет возможности настраивать боковые колонки. Боковая колонка – это специальная область для размещения виджетов, которая, как правило, в большинстве случаев располагается в сайдбаре сайта. Боковых колонок может быть несколько, в зависимости от того в  каком месте сайта нужно будет выводить виджеты. Несмотря на свое название, колонки могут располагаться также в подвале и шапке сайта. Виджет-совместимость WordPress Чтобы добавить поддержку виджетов в ваш шаблон, не надо использовать какой-либо плагин или писать много кода, достаточно добавить всего лишь несколько строк в файл functions.php, а если такого нет в шаблоне, то создать его.

Включаем поддержку виджетов в шаблоне

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

<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>

Этим самым, мы зарегистрировали одну боковую колонку для виджетов. Чтобы посмотреть изменения, опять выберите пункт “Виджеты” в блоке “Внешний вид”. Как видите, теперь у нас с правой стороны появилась колонка под названием “Боковая колонка 1″, которая еще может называться “Сайдбар 1″ или “Sidebar 1″ в зависимости от вашей версии WordPress и установленной локализации. Ну а раз мы определили боковую колонку, то появились и информационные блоки – виджеты.

Область виджетов

Определяем область для размещения виджетов

Теперь перетяните любой из доступных виджетов в боковую колонку и нажмите кнопку “Сохранить”. Все, виджет размещен и можно уже посмотреть, где и как он будет располагаться на сайте. Однако, никаких изменений мы не увидим, так как система не знает, в каком именно месте сайта должны выводиться виджеты, поэтому нужно еще задать область, в которой они будут размещаться. Поскольку, мы условились, что в большинстве случаев виджеты располагаются в сайдбаре, то давайте зададим область размещения в файле sidebar.php. Открываем файл и добавляем следующий код:

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>

Здесь первая строка – это начало области размещения виджетов, а вторая строка – конец области размещения.

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

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
?>

Это дает нам управление внешним видом виджета, а точнее можно указать CSS-класс блока, в котором выводится виджет, и его заголовка. Здесь мы можем задать, что будет вставляться перед и после кода самого виджета. Приведу небольшой пример. Допустим, у нас есть код блока, выводящий последние записи на сайте, расположенного в файле sidebar.php и выглядит он примерно так:

<div id="recent">
    <h2>
      <?php _e('Последние записи')?>
    </h2>
    <ul>
      <?php wp_get_archives('type=postbypost&limit=10&format=html'); ?>
    </ul>
</div>

Отбросив php-код и оставив теги html-разметки, получим необходимую информацию о том, что будет вставляться перед и после кода самого виджета, а именно нам потребуется конструкция, вида:

<div id="recent">
   <h2>
   </h2>
</div>

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

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<div id="recent">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>

Использование двух и более колонок для виджетов

Если в своем шаблоне вы используете более, чем одну колонку для виджетов, то для регистрации нескольких колонок вместо функции register_sidebar следует писать register_sidebars(n), где n-количество колонок. Например для двух колонок код регистрации будет выглядеть так:

<?php
if ( function_exists('register_sidebars') )
register_sidebars(2);
?>

или:

<?php
if ( function_exists('register_sidebars') )
register_sidebars(2, array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
?>

Чтобы удобнее было ориентироваться, в каком месте сайта нужно выводить виджеты, каждой колонке можно задать уникальное имя:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'Колонка для сайдбара',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'Колонка для футера',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
?>

Колонки для виджетов WordPress

 

VN:F [1.9.16_1159]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.16_1159]
Rating: 0 (from 0 votes)

Понравилась статья? Поделитесь ею в социальных сервисах!

Подпишитесь на обновление блога!

Ваш e-mail:

Понравилась статья? Вы не хотите пропускать новые статьи, посвященные Wordpress? Тогда подпишитесь на RSS или на электронный ящик и получайте новые статьи мгновенно! Также можете следить за мной в Twitter.

15 комментариев к “Делаем шаблон для WordPress виджет-совместимым”

  • Нет аватара
    Дрон 15.06.2011 в 22:13

    АААт!!! Спасибо! Очень помогли! Все понятно и просто. А вот как и где прописать рамку для виджета, цвет надписи и т.д????

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Vadimon 21.06.2011 в 09:26

    Дрон, если вы внимательнее прочитаете пост, то увидите, что я писал, что задать стиль виджету можно, прописав необходимые свойства в div-блоке, в который помещен виджет в файле functions.php

    VN:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Ирина 03.12.2011 в 08:12

    Здравствуйте, вы так хорошо описали, спасибо огромное!

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Ted 28.12.2011 в 16:46

    В меню виджеты появилось два блока для виджетов после правки файла functions.php. Но – непоняятно – как можно указать в шаблоне index.php что первый блок виджетов тут-то выводить а второй вот тут-то.

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
    • Нет аватара
      Vadimon 28.12.2011 в 20:39

      Для каждого блока виджетов размечайте свою область кодом
      <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

      VN:F [1.9.16_1159]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.16_1159]
      Rating: 0 (from 0 votes)
  • Нет аватара
    Ted 29.12.2011 в 15:07

    Пробовал – не получилось. Но потом разобрался :
    Для двух виджетов определенных в Functions.php как “Колонка новостей” и “Колонка видео”

    if ( function_exists(‘register_sidebar’) )
    register_sidebar(array(
    ‘name’=>’Колонка новостей’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));

    if ( function_exists(‘register_sidebar’) )
    register_sidebar(array(
    ‘name’=>’Колонка видео’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));

    В тех местах файла index.php где эти колонки должны быть вставляем соотвественно:

    и

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
    • Нет аватара
      Vadimon 29.12.2011 в 15:10

      Вставляйте код в комментариях в теги < code >

      VN:F [1.9.16_1159]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.16_1159]
      Rating: 0 (from 0 votes)
  • Нет аватара
    любовь 14.01.2012 в 13:10

    У меня только виджеты вставляются по одной стороне, а другая не заполняется. Подскажите как сделать.

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
    • Нет аватара
      Vadimon 16.01.2012 в 18:57

      По какой другой стороне?

      VN:F [1.9.16_1159]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.16_1159]
      Rating: 0 (from 0 votes)
  • Нет аватара
    Konstantin 14.02.2012 в 16:56

    Все получилось. Спасибо.

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    dadzen 22.02.2012 в 11:40

    А как вставить сайдбар в футер, чтобы как в некоторых темах по 3 или 4 горизонтально стоят

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
    • Нет аватара
      Vadimon 22.02.2012 в 23:23

      Для этого вам нужно разметить эту область под сайдбар

      VN:F [1.9.16_1159]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.16_1159]
      Rating: 0 (from 0 votes)
  • Нет аватара
    Илья 09.03.2012 в 15:19

    Спасибо за статью! Долго искал что-то подобное. про то, как разместить несколько сайдбаров. но так и не понял “как можно указать в шаблоне index.php что первый блок виджетов тут-то выводить а второй вот тут-то”© предыдущий оратор =)

    Подскажите пожалуйста!
    Хочу чтобы один сайдбар был слева, а другой занимал половину шапки

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Татьяна 18.03.2012 в 06:06

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
    • Нет аватара
      Vadimon 22.03.2012 в 18:08

      Попробуйте переустановить WordPress.

      VN:F [1.9.16_1159]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.16_1159]
      Rating: 0 (from 0 votes)

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

Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.

Блог про wordpress и все, что с ним связано – возможности системы, секреты и хаки, плагины, шаблоны, оптимизация, seo, безопасность и т.п. Проект для начинающих и продвинутых пользователей.

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога по E-mail:

E-mail:

Последние комментарии

Друзья проекта