Как создать тему для 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' );

Немного о возможных аргументах:

Теперь для того, чтобы отобразить сайдбар в теме, необходимо в файл 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:

Теперь заменим в 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>

    &copy; 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>

    &copy; <?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 динамический сайдбар и включить виджеты?

динамический сайдбар в WordPress, включить виджеты

  Делаем dynamic sidebar + включаем виджеты

Думал просто написать о том, как можно оформить страницу 404 (Not Found) на WordPress-сайтах. Но пришёл к выводу, что «для полноты» картины необходимо сначала описать способы управления WP-сайдбаром, а потом кое-что ещё..

Что такое сайдбар, наверное, многие знают — это такая вертикальная полоска на сайте — справа или слева (или справа и слева), — в которой располагаются пункты меню, всякая навигация по сайту (рубрики, свежие записи), календарик да и много чего ещё.

Сайдбары бывают практически у всех сайтов (удобно ведь..). Представляют они из себя обычно какой-нибудь файл, содержимое которого уже и выводится на сайте (обычно справа). Например, для созданных на WordPress сайтов этим файлом является sidebar.php, который всегда есть в теме оформления почти любого WP-сайта.

Разные движки сайтов позволяют управляться с сайдбарами по-разному. Ну а WordPress позволят сделать ещё и т.н. динамический сайдбар. В некоторых темах оформления эта «динамичность» может отсутствовать. А нужна она для того, чтобы можно было добавлять виджеты (что такое виджеты WP).

Как включить в WordPress динамический сайдбар

Прежде следует убедиться, что он у вас отключён — иначе зачем включать? Для этого заходим в раздел «Виджеты» и если видим там такое:

WordPress - отключены виджеты

  «No Sidebars Defined»

то значит динамический сайдбар отсутствует и никакие виджеты не добавить.

Добавить динамичности очень просто. В шаблон sidebar.php вставляем такой код:

<?php if(!function_exists(‘dynamic_sidebar’)||!dynamic_sidebar(‘Sidebar’)):?><?php endif;?>

Вот, в общем-то, и всё, динамический сайдбар в WordPress теперь подключён. Теперь на странице с виджетами можно будет уже добавить какие-нибудь стандартные виджеты WordPress’а — последние записи/комментарии, рубрики, текстовый виджет и множество других.

Loading...

web-ru.net


Смотрите также

Prostoy-Site | Все права защищены © 2018 | Карта сайта