Как создать тему Wordpress с нуля: часть 2

Пришло время для хорошего материала. Мы добавим систему комментариев, боковую панель с виджетами и архив для всех старых постов. Это охватит все, что вам нужно для простой, но хорошо функционирующей темы WordPress, и, надеюсь, вы сможете применить ее ко всем видам тематических проектов.

Обзор дополнений

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

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

Шаг 1 - Боковая панель

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

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));
?>

Это говорит WordPress, что в нашей теме есть боковая панель для виджетов. Этот код можно расширить, включив несколько областей панелей для виджетов. Мы также говорим, что боковая панель нашей темы нуждается в другом HTML-коде. Это означает, что виджеты боковой панели закрываются в теги <li>, что было бы не так хорошо для нас.

Теперь давайте создадим эту боковую панель, создадим еще один файл, называемый 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>

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

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

<?php get_sidebar(); ?>

Поздравляем, вы только что добавили динамическую боковую панель к теме.

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

Система комментариев WordPress может быть такой простой или сложной, как вы хотите, однако, поскольку это простой урок, который создает простую тему, мы собираемся использовать простой способ добавления комментариев к нашим постам.

WordPress упрощает создание стандартного дизайна системы комментариев, который поставляется с каждой копией WordPress, и может использоваться любой темой. Так вот что мы будем делать. Откройте index.php и поставьте следующее после строки 13 (я говорю сразу после строки со всеми сообщениями, такими как the_time() и т.д.).

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

Как вы можете видеть, это включает файл, который у нас отсутствует в нашей папке темы, но на самом деле где-то в глубинах WordPress. Шутки в сторону, это делает нашу жизнь намного проще.

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

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

.commentmetadata { font-size: 10px; }

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

Мета-данных также было немного, поэтому их покрывает вторая строка.

Шаг 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, однако вы можете заметить, что нет цикла WordPress. Это происходит потому, что мы создаем страницу, в которой есть только один элемент. Мы можем использовать такие функции, как the_title(), чтобы получать и отображать информацию о странице.

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

Параметры в функциях заставляют их отображать категорию/месяц с количеством постов. Чтобы добавить эту страницу архива на ваш сайт, вам нужно создать новую страницу и изменить параметр «Шаблон страницы» на новую страницу «Архивные страницы». Проверьте это, страница архива показывает, сколько вы написали.

Обзор - Работает ли тема?

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

Дальнейшее чтение

• WordPress Codex

  Разработка темы, codex - четкая и хорошо написанная документация. Исходит от создателей WordPress, вы не ошибетесь действуя в соответствии с его инструкциями.

  Посетить

• CSS Tricks Screencast

  Было много упоминаний о CSS Tricks 3 части руководства по теме WordPress, поэтому я, хотя я бы остановился на этом. Он рассказывает о том, как создать приятный сайт, более сложный, чем этот, но вы должны улучшить эти навыки.

  Посетить