Создание wordpress шаблона: продолжение

В этой статье мы добавим к нашей wordpress теме сайдбар и архив, чтобы пользователи имели возможность читать ранее добавленные посты. В первой части статьи о создании шаблона worpress, мы также упоминали о single.php и комментариях, которые мы реализуем по ходу действий. Наверняка по ходу чтения статьи у вас появятся идеи, как добавлять виджеты и другие полезные wordpress штучки в разные области шаблона. Начнем?

Шаг 1 – Сайдбар

Наилучше, начинать с тяжелых вещей, вы согласны? Будем дерзать! Создайте новый файл в папке вашей темы и назовите его functions.php. Откройте его и вставьте в него следующий код:

<?php  

if ( function_exists('register_sidebar') )  

    register_sidebar(array(  

        'before_widget' => '',  

        'after_widget' => '',  

        'before_title' => '<h2>',  

        'after_title' => '</h2>',  

    ));  

?>

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

<div id="sidebar">  

<?php if ( !function_exists('dynamic_sidebar')  

        || !dynamic_sidebar() ) : ?>  

 <h2>About</h2>  

 <p>This is the deafult sidebar, add some widgets to change it.</p>  

<?php endif; ?>  

</div>

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

Теперь мы должны подключить сайдбар к главному файлу index.php. Откройте этот файл и вставьте следующий код перед тегом <div id="content">. Убедитесь, что подключен header в самом начале.

<?php get_sidebar(); ?>

 

Мои поздравления, вы только что добавили динамический сайдбар у вашу wordpress тему.

Шаг 2 – Комментарии

Система комментариев wordpress, легко настраивается по вашему вкусу. Так как это пример создания простого шаблона, мы будем использовать наиболее простой метод добавления системы комментариев в наш пост.

Вордпресс имеет стандартный дизайн комментариев, которые могут использоваться в любых вродпресс шаблонах. Откройте файл index.php, и вставьте следующий код после 13 строки (это место после информации о посте, the_time(), и так далее).

<?php comments_template(); // Get wp-comments.php template ?>

 

Как вы видите, мы подключили файл, который находится вне папки нашего шаблона. Но это наиболее быстрый путь реализации комментариев у wordpress теме. Протестируйте свой шаблон, и вы увидите, что уже имеете форму добавления комментариев внизу поста. Давайте немножко настроим вид формы. Для этого откройте файл style.css и добавьте в конец следующий код:

textarea#comment { width: 400px; padding: 5px; }  

.commentmetadata { font-size: 10px; }

Первая строка кода устанавливает размер (ширину) поля ввода комментария и добавляет отступы на 5 пикселей ко всем краям. Во второй строке, мы устанавливаем размер шрифта информационных данных о комментаторе (10 пикселей).

Мои поздравления, вы уже имеете систему комментариев у вашем wordpress шаблоне.

Шаг 3 – Архив

Большинство сайтов на wordpress имеют архив, место в котором хранятся все посты. Архив может отображаться двумя способами: в виде категорий, и по дате добавления. Файл archives.php не нужно подключать к теме, wordpress способен самостоятельно его увидеть. Давайте создадим этот файл и добавим у него следующий код:

<?php get_header(); ?>  
  
    <?php get_sidebar(); ?>  
  
    <div id="content">  
  
    <h2 class="entry-title"><?php the_title() ?></h2>  
  
    <?php the_content() ?>  
  
                    <ul id="archives-page" class="xoxo">  
                        <li id="category-archives">  
                            <h2>Archives by Category</h2>  
                            <ul>  
                                <?php wp_list_categories('optioncount=1&title_li=&show_count=1') ?>  
                            </ul>  
                        </li>  
                        <li id="monthly-archives">  
                            <h2>Archives by Month</h2>  
                            <ul>  
                                <?php wp_get_archives('type=monthly&show_post_count=1') ?>  
                            </ul>  
                        </li>  
                    </ul>  
  
    </div>  
  
<?php get_footer(); ?>

Структура немножко похожа на файл index.php, только разница в том, что здесь будет выводится один пост а не список. Мы также используем функцию the_title(), для получения информации о странице.

Также мы используем функцию the_content(), которая выводит содержимое поста. Далее мы подключаем категории и архив с помощью функций: wp_list_categories(), wp_get_archives(). Обе функции возвращают список, ссылки которого ведут в категорию с постами. Второй список отображает месяцы, а не категории.

Также у функциях можно используются некоторые параметры, для вывода количества постов и т.д. Мои поздравления, вы подключили архив к wordpress теме.

Заключение

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

Дальше: CSS примеры: 27 наиболее популярных css примеров