Как делала верстку боковой панели и ставила табы в сайтбар

Добрый день, уважаемые читатели и гости LediSeo! “Ремонт – стихийное бедствие”, так на днях мне сказала моя подруга. Да, наверное, я с ней соглашусь, но вот что создание блога на на wordpress это тайфун и цунами вместе взятые знают не все. Многие начинающие блоггеры считают, что создав блог, выбрав для него подходящую тему, установив плагины wordpress, остается только писать материалы и заниматься продвижением. Ой, как Вы ошибаетесь! По идеи работа над блогом никогда не завершается, ведь с опытом хочется изменить то или это, через какое то время шаблон перестает нравиться, хочется сделать блог более функциональным, но при этом еще и заботиться о скорости загрузки блога, то есть работа можно сказать не прекращается никогда. Вот и я решила сделать небольшую верстку сайтбара и при этом еще и сэкономить место в сайтбаре. Сегодня я расскажу, что же было сделано и как это отразится на продвижении блога и не только.

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

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

Любое редактирование шаблона первоначально лучше всего проводить на тестовом блоге, который мы можем установить у себя с помощью локального сервера Денвер. Вот где можно потренироваться работать с кодами, скриптами и не бояться, что блог может “слететь”. После того, как блог был успешно перенесен с хоста на локалку, можно приступить к изменениям, но для этого Вы должны четко понимать, что за вывод сайтбара отвечает файл sidebar.php. Если в используемом Вами шаблоне только одна бокавая колонку ( как в случае с моим блогом) то такой файл будет один, а если у Вас две колонки, то естественно файлов будет два (sidebar -left.php, sidebar-right.php или же sidebar1.php, sidebar2.php). Чтобы открыть на редактирование данный файл\файлы нам необходимо в административной панели блога зайти в консоль “Внешний вид” – “Редактор” и в правом столбце будут отражены все допустимые файлы нашего шаблона.

Нажимаем на пункт sitebar.php (на скриншоте подсвечено зеленым цветом данный файл открывается в поле для редактирования. У Вас примерно может быть вот что – то подобное

Первые пять верхних строк
а вот строки

1

<!--?php endif; ?-->

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

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

1

<!--?php wp_list_categories('title_li='); ?-->

и вместо нее прописываем следующие строки:

1
2
3
4
5
6

<ul>
 	<li>Рубрика1</li>
 	<li>Рубрика 2</li>
 	<li>Рубрика 3</li>
 	<li>Рубрика 4</li>
</ul>

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

1
2
3
4
5
6

<ul>
 <li>
<h2>Новые заметки</h2>
<ul><? php get_archives('postbypost', 5); ></ul>
</li>
</ul>

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

1
2

<!--?php include (TEMPLATEPATH .'/recent-comments.php'): ?-->
<!--?php if(function_exists('get_recent_comments')) {get_recent_comments(): }?-->

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

1
2
3
4
5

<!--вывод комментариев--><div id="recentcomments" class="dsq-widget">
<h2 class="dsq-widget-title">Последнии комментарии</h2>
<script src="http://lediseo.disqus.com/recent_comments_widget.js?num_items=5&amp;
hi de_avatars=0&amp;avatar_size=32&amp;excerpt_length=180" type="text/javascript"></script>
</div><!--конец вывода комментариев-->

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

1
2
3
4
5
6
7
8

<!--выводит поиск-->
<form id="cse-search-box" action="http://www.google.ru/cse" target="_blank">
<div><input name="cx" type="hidden" value="partner-pub-84855772436700000:72p0j29i100" /> 
<input name="ie" type="hidden" value="UTF-8" /> <input name="q" size="31" type="text" /> 
<input name="sa" type="submit" value="Поиск" /></div>
</form>
<script src="http://www.google.ru/cse/brand?form=cse-search-box&amp;lang=ru" type="text/javascript"></script>
<!--конец вывода поиска-->

Думаю, смысл Вам понятен, но как видите без элементарного знания html просто обойтись очень сложно, но …. Совершив небольшие изменения в боковой колонке, отказавшись от использования виджетов я ускорила загрузку блога на пару десятков секунд. Но как это всегда бывает мне не хватило место в сайтбаре, ведь хочется вывести это, разместить то то и вот здесь мне пришлось немного поработать над функциональстью боковой колонки, установив табы. Что такое табы и как их реализовать на странице или в материале я рассказывала в статье «Создаем вкладки (табы) на блоге с помощью плагина postTabs». Подобное же можно реализовать и в сайтбаре (кнопочки “Сообщества” и ”Мои друзья”), которые позволяют экономить место, но при этом выводить всю необходимую мне информацию. К тому же все прекрасно индексируется.

Реализуются подобные табы с помощью специального скрипта, который Вы можете скачать здесь. Распаковав полученный архив DomTabs Вы получаете два файла — domtab.js и pbd_domtab.css , которые необходимо разместить в папку с используемым шаблоном (wp-content/themes/тема шаблона/). Теперь необходимо подключить эти два файла к блогу, для этого необходимо в файле header.php используемого шаблона перед закрывающим тегом </header> прописать следующий код:

1
2

<script src="<?php bloginfo('template_directory'); ?>/domtab.js" type="text/javascript">// 
<![CDATA[// ]]></script>

Теперь нам только осталось прописать код вывода табов в файле sidebar.php (в моем случае) или же зайти в консоль “Внешний вид” –“Виджиты” и активировав простой виджит “Текст” прописать следующие строки:

1
2
3
4
5
6
7
8
9
10

<div class="domtab">
<ul class="domtabs">
 	<li><a href="#t1">Название 1 вкладки</a></li>
 	<li><a href="#t2">Название 2 вкладки</a></li>
 	<li><a href="#t3">Название 3 вкладки</a></li>
</ul>
<div><a id="t1" name="t1"></a>Здесь код первой вкладки</div>
<div><a id="t2" name="t2"></a>Здесь код второй вкладки</div>
<div><a id="t3" name="t3"></a>Здесь код третьей вкладки</div>
</div>

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

1
2
3
4
5
6
7
8
9

<!--вывожу кнопки-->
<div class="domtab">
<ul class="domtabs">
 <li>
<h2>Мои друзья</h2>
<h2>Сообщества</h2>
</li>
</ul>	
<!--конец вывода кнопок-->

Более того у нас нет ограничения по созданию вкладок, все будет зависеть от Ваших желаний и возможностей используемого шаблона. Единственно, что хочется заметить, когда я хотела реализовать табы посредством вывода через виджет – они просто не хотели отражаться, но прописав код в файл sidebar.php все заработало великолепно.

После того, как вкладки стали отражаться в боковой колонке блога, остается только отредактировать их стиль отражения с помощью файла pbd_domtab.css под общий дизайн блога. Здесь же Вам потребуются элементарное знание основ css, которые следует в общем то только применить к #sidebar ul.domtabs li

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

На этом я прощаюсь, всем удачи и до новых встреч.

С уважением, Наталья Яшина.

Вам понравилась статья? Расскажите о ней друзьям!