WordPress представляет собой бесплатную платформу для создания сайтов и управления контентом. Помимо уже готовых шаблонов, вы можете сгенерировать свой собственный, на основе которого в дальнейшем уже будут создаваться ресурсы. Именно об этом мы и поговорим в нашем уроке – основы формирования шаблонов своими руками. Для генерации темы в первую очередь нужно разобраться в главных особенностях работы WordPress, а также в том, как те или иные файлы определяют внешний вид страниц сайта. В ходе статьи мы изучим структуры шаблонов, процесс их создания и дальнейшей оптимизации.
Полезно: 10 топовых шаблонов для образовательного сайта 2019
Основная информация
Шаблон представляет собой определенный макет страницы, включающий в себя те или иные элементы, а также их дизайн и настройки. В WordPress представлено огромное количество бесплатных и платных вариантов, но никто не запрещает создавать новые. Так что же нам для этого потребуется?
Для использования и редактирования темы практически во всех ситуациях задаются обычные и однотипные файлы, которые определяют ресурс и формирует его странички. Таким образом, большая часть деталей шаблонов являются одинаковыми для всех сайтов и задаются по умолчанию.
Среди них стоит выделить header и footer, определяющие верхний и нижний колонтитулы ресурса. Однако, использовать все файлы необязательно.
Применение каждого из них мы рассмотрим далее, а также определим необходимость подключения.
Для генерации стандартной страницы ресурса применяют две основных типа файлов:
- HTML – определяющий структуру расположения всех элементов, которые будут находиться на макете;
- CSS – таблица стилей, указывающая параметры тех или иных элементов, которые уже определены в файле HTML.
Это значит, что в первом из них мы определяем саму деталь и ее функционал, а далее задаем ее внешний вид. Такой подход позволяет применять однотипные стили сразу для нескольких элементов, что сделает ваш сайт привлекательным и цельным. Давайте подробнее поговорим о каждом из файлов, которые необходимы для генерации шаблона.
Структура страниц
Все страницы сайтов в интернете преимущественно состоят из трех главных частей. Присмотритесь, на какую бы страничку вы не зашли, у нее всегда будет иметься верхняя и нижняя отдельные формы, между которыми и находится вся центральная информация. Именно так и определяются части:
- заголовок или header;
- основной контент или content;
- подавал или footer.
Каждая их них обладает собственным шаблоном, который определяет содержимое элементов. Благодаря такой особенности можно придать единый стиль всему сайту, изменяя только центральное содержимое. Такие файлы располагаются в папке с темой, расположенной на сервере среди других в документах WordPress. С их помощью вы можете разделять свой сайт не только на три ключевые части, но и генерировать абсолютно новые файлы, например, для отдельных блоков.
Теперь рассмотрим, что включает в себя каждый из основных разделов на странице сайта.
Заголовок или header обязательно должен содержать следующие типы контента:
- тег <title> определяет заголовок страницы и SEO-параметры;
- тег <head>, в котором находятся все ссылки на стили и скрипты страницы, а также мета-теги;
- тег <doctype>, за счет которого браузер сможет понять, с к какой структурой ему предстоит работать;
- открытие тела <body>, в котором будет расположен весь основной контент;
- а также логотип, навигационную панель, название и описание сайта.
Это только главные опции, которые должны быть использованы в Заголовке шаблона. Их всегда можно изменить или дополнить. Без них шаблон не будет полноценно функционировать, а значит мы не сможем создать удобный и понятный для посетителей сайт.
Основная часть под названием Контент или content включает в себя:
- текстовые и мультимедиа файлы;
- отдельные записи и полноценные страницы;
- а также все, что может нести какую-либо смысловую нагрузку.
Грубо говоря, это главная часть страницы, на которой и будет находиться весь контент. Именно она будет подвергаться изменениям, предоставляя пользователям ту или иную информацию после перехода по внутренним страницам сайта.
Подвал или footer является не обязательным элементом страницы, но все же лучше использовать и его. В нем будут распложены:
- перечень рубрик;
- дополнительная навигация и меню;
- ссылки на внутренние и внешние ресурсы;
- авторское право;
- контактные данные.
Все это позволит посетителям проще ориентироваться по вашему ресурсу впоследствии.
Полезно: как определить ID поста, страницы и рубрики в WordPress
Основные файлы
В центре темы обычно располагает один общий файл, который носит имя index.php. Он определяет его структуру и размещается исключительно в корне сайта. Первоначально в нем заключаются следующие опции:
- подключение дополнительных файлов к вашему шаблону и сбор картины сайта в единую целую;
- включение цикла работы WordPress, в ходе которого получается вся информация из базы данных.
Сегодня мы поговорим о самой простейшей структуре, поэтому внедряться будут всего два файла – заголовок и подвал. Такой формат поможет придать сайту общий внешний вид, заданный пользователем: как будет выглядеть название, логотип, меню, ссылки на ресурсы и контактные данные. Они будут сохраняться при переходах по страницам, что определит единый дизайн ресурса. Для подключения header.php и footer.php следует прописать специальные теги шаблонов в центральном файле.
Чтобы заполнить все странички сайта однотипно, нужно подключить <?php get_header(); ?> и <?php get_footer(); ?> в теле цикла, но об этом этапе работы мы поговорим подробнее в следующих уроках.
Сложные структуры
Большая часть шаблонов для WordPress ориентируется на сайт-бары и боковые панели, где и находится большая часть дополнительных сведений, навигация и другие ссылки. Включить такой элемент в свою тему можно, например, сгенерировав файл sidebar.php и подключив его.
Теперь уже мы видим более цельную картинку ресурса, состоящую из заголовка, контента, боковой панели и подвала. Такой сайт выглядит привычнее для пользователей, а значит на нем будет проще ориентироваться. Подключается sidebar аналогичным образом, через файл index.php. Таким образом, мы подключили сразу несколько файлов, генерирующих производительную и красивую страницу с понятной всем структурой. Первые этапы создания шаблона своими руками уже преодолены!
Почему мы не определяем на этом шаге получение главного контента сайта? Загвоздка в том, что эти операции производятся внутри циклов, которые будут находиться дальше в файлах, создаваемых нами в процессе. Сейчас мы задали только «скелет» сайта. Все дополнительные настройки, которые определяют внешнее отображение и расположение элементов, будут находиться в таблицах стилей, прописываемых совсем иначе. Об этом мы поговорим в дальнейших статьях.
Полезно: файл wp-config.php: для чего нужен, где найти, как с ним работать
Файлы шаблонов
В нашем уроке мы разобрались, как подключать основные файлы темы. Далее можно попробовать расширить их функционал, добавив и совершенно другие файлы, обеспечивающие новые возможности ресурсу.
Например, возьмем макет боковой панели, а затем интегрируем в него поисковую форму, которая определяется самим WordPress. Теперь пользователям будет удобно находить нужную информацию на сайте. А со стороны разработчика – вам нет необходимости использовать классический для вставки кода тег «include», так как разработчики системы уже учли этот нюанс. Синтаксически код добавления функционала выглядит следующим образом: <?php get_search_form(); ?>.
Полезно : Шаблон WordPress своими руками. Урок 4. Информация до разработки
В системе управления контентом WordPress шаблоны предполагают в себе самые разнообразные варианты файлов для формирования и отображения страниц на вашем ресурсе. Одним из них можно назвать набор документов, подключаемых к сайту через index.php.
Такую схему можно изменять под собственные предпочтения, изменяя расположение файлов шаблона так, как будет удобнее именно вам. Некоторые из них можно и вовсе не использовать. Все упирается в вашу фантазию и необходимый функционал сайта.
Специальный файлы
Создание шаблонов на WordPress предполагает применение нескольких типов страниц. Это могут быть одиночные посты, полноценные страницы или множественный вывод данных, собирающий в себе несколько постов блога в том или ином виде. Для такого вида контента необходимо устанавливать правила отображения, которые прописываются в файле index.php. Либо же можно отдать предпочтение классической иерархии шаблонов.
Что же такое стандартная иерархия шаблонов? Она определяет, какой файл будет использоваться при генерировании определенного типа страниц. WordPress является умной системой, поэтому может самостоятельно определить, какой из файлов нужно применять для той или иной странички. Для этого задаются стандартные имена, определяющие шаблоны. Если нужный файл не найден, то система будет путем перебора выбирать другой, имеющийся в иерархии. Можно сгенерировать шаблон для любой странички, а затем оповестить WordPress, когда именно нужно задействовать данный файл, определив некоторые условия.
Заключение
В нашем уроке мы рассмотрели основные этапы создания шаблона своими руками. Подробно была изучена основная информация о файлах, необходимых для формирования темы, о правилах их внедрения и подключения. В структуре сайта были выдели три основные части: заголовок, контент и подвал, без которых не обходится ни один сайт. Мы рассмотрели основные и более сложные структуры. Далее в статьях речь пойдет о стандартных шаблонах и их иерархии в WordPress.
