Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

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

by
Length:ShortLanguages:

Russian (Pусский) translation by Anna Goorikova (you can also view the original English article)

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

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


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

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

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


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

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

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

Теперь давайте создадим эту боковую панель, создадим еще один файл, называемый sidebar.php, и вставьте в него следующее.

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

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

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


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

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

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

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

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

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

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


Шаг 3 - Архив

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

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

Итак, создайте новый файл и добавьте следующее, и все будет объяснено.

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

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

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


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

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


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

  • The WordPress Codex

    WordPress Codex

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

    Посетить

  • CSS Tricks Screencast

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

    Посетить

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.