Как создать тему для WordPress. Часть 5: создание сайдбара. Добавить sidebar wordpress
Как создать тему для WordPress. Часть 5: создание сайдбара
Из этого урока вы узнаете, как добавить в тему для WordPress поддержку виджетов, и выводить их в сайдбаре.
Функция добавления сайдбара
Чтобы добавить к теме поддержку виджетов, необходимо зарегистрироват боковую колонку при помощи функции register_sidebar(). Давайте добавим сайдбар со всеми возможными параметрами в начало файла functions.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Register Sidebar function striped_sidebar() {
$args = array( 'id' => 'sidebar-left', 'name' => __( 'Sidebar', 'striped' ), 'description' => __( 'Left Sidebar', 'striped' ), 'class' => 'striped-widget', 'before_title' => '<h3>', 'after_title' => '</h3>', 'before_widget' => '<div>', 'after_widget' => '</div>', ); register_sidebar( $args );
}
// Hook into the 'widgets_init' action add_action( 'widgets_init', 'striped_sidebar' ); |
Немного о возможных аргументах:
- 'id' => 'sidebar-left' – задает ID сайдбара, по которому мы в дальнейшем будем выводить его в теме
- 'name' – название сайдбара, которое будет выводиться в консоли при добавлении в него виджетов
- 'before_title', 'after_title', 'before_widget', 'after_widget' – задают теги, которые будут до и после заголовка виджета и до и после самого виджета
Теперь для того, чтобы отобразить сайдбар в теме, необходимо в файл sidebar.php добавить вызов. Обратите внимание, что обязательно нужно указать ID сайдбара, его мы задали в функции вверху:
<?php if ( ! dynamic_sidebar('sidebar-left') ) : ?> <!-- тут будет содержимое сайдбара, которое выведется, если в него не поместили виджеты --> <?php endif; ?> |
Добавьте первую строку после вывода логотипа:
<!-- Logo --> <div> <h2>STRIPED</h2> </div> <?php if ( ! dynamic_sidebar('sidebar-left') ) : ?> |
А вторую строку перед копирайтом:
Теперь мы можем заметить в Консоли, что у нашей темы появилась поддержка виджетов, и мы уже можем их добавить и посмотреть на результат.
Следующим шагом будет настройка оформления виджетов, чтобы они были такими же, как в верстке.
Оформление виджетов в сайдбаре
В сайдбаре у нас должны выводиться следующие виджеты:
- меню со страницами
- поиск
- текстовый виджет в рамке
- последние записи
- последние комментарии
- календарь
Сначала посмотрим, как выводятся виджеты в верстке. Они обернуты в тег section, а заголовки виджетов – в header. Сделаем также в нашей теме, внесем измерения в 'before_title' и 'after_title', 'before_widget' и 'after_widget':
$args = array( 'id' => 'sidebar-left', 'name' => __( 'Sidebar', 'striped' ), 'description' => __( 'Left Sidebar', 'striped' ), 'class' => 'striped-widget', 'before_title' => '<header><h3>', 'after_title' => '</h3></header>', 'before_widget' => '<section>', 'after_widget' => '</section>', ); register_sidebar( $args ); |
Точно также сопоставим, какому классу вордпресс соответствуют классы виджетов в верстке. Здесь нам поможет расширение FireBug для Firefox, или, если используете Chrome, нажмите F12:
- is-search в верстке это widget_search
- is-text-style1 в верстке это widget_text
- is-recent-comments в верстке это widget_recent_comments
- is-recent-posts в верстке это widget_recent_entries
- is-calendar в верстке это widget_calendar
- виджет с навигационным меню будем настраивать отдельно
Теперь заменим в CSS стили на те, которые использует вордпресс.
Обратите внимание, в текстовом виджете вложенный div имеет класс inner, а в вордпресс – класс textwidget, это в CSS тоже нужно заменить. То же самое касается и виджета календаря, только там вместо .inner – #calendar_wrap.
Виджет “Поиск”
Виджет поиска придется настроить отдельно, так как он не совпадает по разметке с тем, что есть в верстке.
Существует несколько способов создать собственную форму поиска для вордпресс. Со всеми вы можете ознакомиться в Кодексе.
Самым простым является использование отдельного файла в теме для вывода формы. Нам нужно создать в папке темы новый файл с именем searchform.php со следующим содержанием:
<form role="search" method="get" action="<?php echo home_url( '/' ); ?>"> <input type="search" placeholder="Поиск" value="" name="s" title="Поиск:" /> </form> |
Сохраните файл. После этого наша форма поиска будет выглядеть так же, как и в верстке. Если вы брали другой шаблон, то посмотрите, какие поля и классы есть там, и перенесите их в шаблон.
Настройка меню
Самое трудное сегодня будет в конце. Сейчас мы настроим вывод виджета произвольного меню со списком наших страниц.
Сейчас меню выводится в верстке вот таким кодом:
<!-- Nav --> <nav> <ul> <li><a href="#">Latest Post</a></li> <li><a href="#">Archives</a></li> <li><a href="#">About Me</a></li> <li><a href="#">Contact Me</a></li> </ul> </nav> |
А вордпресс сгенерировал такой код для меню:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<section> <div> <ul> <li> <a href="/"> Главная </a> </li> <li> <a href="1"> один </a> </li> <li> <a href="2"> два </a> </li> <li> <a href="3"> три </a> </li> <li> <a href="4"> четыре </a> </li> </ul> </div> </section> |
Для стилей в CSS сейчас используется #nav li. Поэтому нам нужно вместо #nav использовать в стилях .widget_nav_menu. Заменяем. Также вместо .current_page_item будет использовать .current-menu-item, так как в меню у нас могут быть не только страницы, но и посты, и произвольные ссылки. Тоже заменяем. Проверяем – если все сделано правильно, все должно работать.
Заголовок блога и копирайты
Сделаем вывод названия блога в боковой колонке. Вместо статичного кода:
<!-- Logo --> <div> <h2> STRIPED </h2> </div> |
Вставьте:
<!-- Logo --> <div> <h2> <?php bloginfo('name'); ?> </h2> </div> |
И заодно сделаем вывод названия блога в копирайтах. В файле sidebar.php, вместо этого:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!-- Copyright --> <div> <p> © 2013 An Untitled Site. <br /> Images: <a href="http://n33.co"> n33 </a> , <a href="http://fotogrph.com"> fotogrph </a> <br /> Design: <a href="http://html5up.net/"> HTML5 UP </a> </p> </div> |
Вставьте:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!-- Copyright --> <div> <p> © <?php echo date('Y');?> <?php bloginfo('name'); ?> <br /> Images: <a href="http://n33.co"> n33 </a> , <a href="http://fotogrph.com"> fotogrph </a> <br /> Design: <a href="http://html5up.net/"> HTML5 UP </a> </p> </div> |
Так как наш шаблон распространяется по лицензии Creative Commons, удалять ссылки на автора мы не будем.
Итоги
Мы создали сайдбар, добавили в него виджеты и настроили их стили. Также мы сделали вывод названия блога в боковой колонке и в подвале.
В следующей части мы создадим постраничную навигацию.
oriolo.ru
Добавить сайдбар в WordPress. Создать область для виджетов в WordPress.
$dynamic_widget_areas = array(
/* rename or create new dynamic sidebars */
"Sidebar 01",
"Sidebar 02",
"Sidebar 03",
"Sidebar 04",
"Sidebar 05",
"Sidebar 06",
"Sidebar 07",
"Search Template",
);
if ( function_exists('register_sidebar') ) {
foreach ($dynamic_widget_areas as $widget_area_name) {
register_sidebar(array(
'name'=> $widget_area_name,
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
}
}
add_action("admin_init", "sidebar_init");
add_action('save_post', 'save_sidebar_link');
function sidebar_init(){
add_meta_box("sidebar_meta", "Sidebar Selection", "sidebar_link", "page", "side", "default");
}
function sidebar_link(){
global $post, $dynamic_widget_areas;
$custom = get_post_custom($post->ID);
$link = $custom["_sidebar"][0];
?>
<div>
<?
echo '<select name="link">';
echo '<option>Select Sidebar</option>';
echo '<option>-----------------------</option>';
foreach ( $dynamic_widget_areas as $list ){
if($link == $list){
echo '<option value="'.$list.'" selected="true">'.$list.'</option>';
}else{
echo '<option value="'.$list.'">'.$list.'</option>';
}
}
echo '</select><br />';
?>
</div>
<p>Select sidebar to use on this page.</p>
<?php
}
function save_sidebar_link(){
global $post;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {return $post->ID;}
update_post_meta($post->ID, "_sidebar", $_POST["link"]);
}
add_action('admin_head', 'sidebar_css');
function sidebar_css() {
echo'
<style type="text/css">
.sidebar-selection{width:100%;}
</style>
';
}
wp-admin.com.ua
Как сделать в WordPress динамический сайдбар и включить виджеты?
Делаем dynamic sidebar + включаем виджеты
Думал просто написать о том, как можно оформить страницу 404 (Not Found) на WordPress-сайтах. Но пришёл к выводу, что «для полноты» картины необходимо сначала описать способы управления WP-сайдбаром, а потом кое-что ещё..
Что такое сайдбар, наверное, многие знают — это такая вертикальная полоска на сайте — справа или слева (или справа и слева), — в которой располагаются пункты меню, всякая навигация по сайту (рубрики, свежие записи), календарик да и много чего ещё.
Сайдбары бывают практически у всех сайтов (удобно ведь..). Представляют они из себя обычно какой-нибудь файл, содержимое которого уже и выводится на сайте (обычно справа). Например, для созданных на WordPress сайтов этим файлом является sidebar.php, который всегда есть в теме оформления почти любого WP-сайта.
Разные движки сайтов позволяют управляться с сайдбарами по-разному. Ну а WordPress позволят сделать ещё и т.н. динамический сайдбар. В некоторых темах оформления эта «динамичность» может отсутствовать. А нужна она для того, чтобы можно было добавлять виджеты (что такое виджеты WP).
Как включить в WordPress динамический сайдбар
Прежде следует убедиться, что он у вас отключён — иначе зачем включать? Для этого заходим в раздел «Виджеты» и если видим там такое:
«No Sidebars Defined»
то значит динамический сайдбар отсутствует и никакие виджеты не добавить.
Добавить динамичности очень просто. В шаблон sidebar.php вставляем такой код:
<?php if(!function_exists(‘dynamic_sidebar’)||!dynamic_sidebar(‘Sidebar’)):?><?php endif;?>
Вот, в общем-то, и всё, динамический сайдбар в WordPress теперь подключён. Теперь на странице с виджетами можно будет уже добавить какие-нибудь стандартные виджеты WordPress’а — последние записи/комментарии, рубрики, текстовый виджет и множество других.
Loading... web-ru.net
