vash-web.ru

Веб-разработка, WordPress, мобильные устройства...


vash-web.ru

WordPress — добавление второго сайдбара в шаблон

Очень часто в темах WordPress не всегда хватает возможностей разместить всю нужную информацию для пользователей на одной боковой колонке и иногда, очень не хватает второго сайдбара, особенно если шаблон «резиновый» и есть свободное место. Конечно можно выбрать другой шаблон, но не хочется менять, потому что в остальном и в этом все устраивает. Не хватает малого — второй боковой колонки.  В этой статье я поделюсь своим опытом преодоления этой проблемы. Для начала перешел по ftp-протоколу на сайт и в каталоге темы создал копию sidebar.php, которую переименовал в sidebar-left.php, а основной файл в sidebar-right.php. Затем перешел в Консоль — Редактор и открыл файл sidebar-left.php. Посмотрел идентификатор и класс, отвечающие за отображение боковой колонки, а заодно внес некоторые изменения — вставил в строку — <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?> -‘Left Sidebar’ между последними круглыми скобками. Удалил все ненужное.



Тоже самое проделал с файлом — sidebar-right.php, только там в строку между скобками вставил — ‘Right Sidebar’ и идентификатор — leftside переименовал в rightside. После этого открыл файл — functions.php и внес там нужные изменения — регистрация новых сайдбаров. Ниже строки — if ( function_exists(‘register_sidebar’) ) вставил:

register_sidebar(array(
‘name’ => ‘Right Sidebar’,
‘id’ => ‘rightside’,
‘before_widget’ =>'<li  id=»%1$s class=»widget %2$s»>’,
‘after_widget’ =>'</li>’,
‘before_title’ => »,
‘after_title’ => »,
));
register_sidebar(array(
‘name’ => ‘Left Sidebar’,
‘id’ => ‘leftside’,
‘before_widget’ =>'<li  id=»%1$s class=»widget %2$s»>’,
‘after_widget’ =>'</li>’,
‘before_title’ => »,
‘after_title’ => »,
));

Сохранил сделанные изменения и теперь перейдя в Консоле на вкладку Виджеты — я увидел новые созданные колонки — Left Sidebar и Right Sidebar. Распределил нужные виджеты по обоим колонкам и возвращаюсь в Редактор. Открываю — style.css. Нахожу идентефикатор — #leftside, копирую все, что ему принадлежит и вставляю скопированное ниже в таблицу стилей. Переименовываю в #rightside, меняю свойство float с left на right и сохраняю изменения. Далее нахожу индентефикатор контента (его можно посмотреть в файле — page.php) и уменьшаю ширину контейнера. Хотя можно не уменьшать — тогда блок с текстом будет автоматически менять ширину только напротив  боковой колонки. Закончив с CSS, перехожу в index.php, нахожу строку — get_sidebar(); и удаляю ее, потом ниже строки — <?php get_header(); ?> вставляю —

<?php get_sidebar(‘right’); ?>
<?php get_sidebar(‘left’); ?>

и сохраняю файл. Тоже самое проделал с page.php и single.php. Затем перешел на сайт, чтобы увидеть сделанные изменения в действии. Колонка справа — это и есть мой «Homemade» сайдбар.

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




Поделиться мнением








Ввод в сообщение текстовых символов смайлов (типа - :-) и :-P ) автоматически преобразовываются в картинки (перед вставкой должен быть пробел - можно скопировать и вставить)...
ПРИМЕРЫ:

:-) улыбающийся :-D громко смеющийся :-))) смеющийся :-( Озадаченность или недовольство
:-|| Сердитый, разгневанный ;-) подмигивающий :-P показывающий язык :clap: браво, хлопать в ладоши
:arrow: Биться головой в стенку...

В комментариях вы можете использовать эти HTML Теги и атрибуты к вашему комментарию:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>