КАК СОЗДАТЬ СВОИ ШАБЛОН СТРАНИЦЫ ДЛЯ САИТА НА WORD PRESS

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

В WordPress можно создавать страницы (page) и записи (post). Отличаются они тем, что записи: попадают в ленту на главной странице; для записей указываются категории; записи не могут быть древовидными, а страницы: используются для такого содержимого как «Обо мне», «Контакты», «Карта сайта»; не имеют категорий, а имеют древовидную структуру. Записи обычно предназначены для хронологической информации (по времени добавления), а страницы для древовидной структуры не зависимой от времени. Для примера, эта статья опубликована как «запись» в рубрике «Кодекс», а ссылки в меню шапки ведут на страницы: Функции.

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

Создание страниц в WordPress

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

Шаблон страницы через файл с произвольным названием (классический способ)

Это самый распространенный способ создать шаблон страницы в WordPress. Для этого нужно создать .php файл, например, tpl_my-page.php в папке темы и в самом начале файла вписать метку, что созданный файл является шаблоном для страниц:

Теперь при создании страницы в админ-панели в блоке «Свойства страницы» мы сможем выбрать «шаблон»:

/*
Template Name: Мой шаблон страницы
Template Post Type: post, page, product
*/

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

Когда вы заходите в админ-панель на страницу редактирования записи древовидного типа, WordPress просматривает все .php файлы в корневой папке темы и в всех вложенных папках (просматривается один уровень) на наличие следующей строки (строка может располагаться где угодно и как угодно в файле):

Template Name: ***

Все файлы с подобными строками собираются и выводятся в выбор шаблона в блок «Атрибуты страницы».

При публикации страницы, в произвольное поле _wp_page_template записывается название файла шаблона или default, если шаблон не указан:

_wp_page_template = default
_wp_page_template = tpl_my-page.php

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

Локализация названия шаблона

/**
* Template Name: Мой шаблон страницы
* Template Post Type: post, page, product
*/
__( ‘Мой шаблон страницы’, ‘my-theme’ );

my-theme — это ID перевода — параметр Text Domain:, который указывается в заголовках темы и при подключении файла перевода, см. load_theme_textdomain().

Шаблон страницы через файл с конкретным названием (иерархия файлов шаблона)

При создании страницы ей устанавливается ярлык (слаг, альтернативное название). Он используется в УРЛ страницы. И его можно изменить:

Изменение слага страницы

Для создание шаблона этим способом, вам нужно узнать слаг страницы и создать файл в папке темы. Допустим, наш слаг как на картинке равен contacts, тогда создадим в теме файл page-contacts.php. и заполним его нужным кодом (можно скопировать содержимое из файла шаблона page.php и отредактировать под себя). Все, теперь при посещении страницы мы должны увидеть новый шаблон. Аналогично можно взять ID (пусть 12) страницы и создать файл page-12.php.

Нет необходимости заходить в админ-панель и устанавливать файл шаблона. Шаблон начинает работать сразу после создания файла. Удобно при разработке.

Шаблон создается только для одной, конкретной страницы. Зависит от слага страницы, если он изменится шаблон работать не будет. Если использовать ID, то зависимость от слага пропадает, но становится непонятно в файла темы, к какой странице относится шаблон (если несколько шаблонов с ID).

Практически бесполезен при написании шаблонов, а тем-более плагинов. Его можно использовать, когда правишь свой сайт, в котором слаг или ID страницы известны заранее.

WordPeress подбирает какой файл использовать в следующем порядке (файлы должны быть в корне темы):

Шаблон страницы через фильтр «template_include» (коддинг)

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

Еще Примеры

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

В библиотеке шаблонов на Тильде более 200 готовых страниц, которые можно использовать для создания собственных, заменив фото и текст. Готовый шаблон можно изменить до неузнаваемости — это только образец хорошего дизайна и пример использования блоков.

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

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

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

Как создать шаблон для использования в другом аккаунте

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

Функция создания шаблона, который могут использовать другие пользователи, доступна на годовом плане Business.

2. Сообщаете коллеге номер шаблона.

3. Коллега нажимает кнопку «Создать новую страницу», пролистывает страницу до конца (на любой вкладке), нажимает на кнопку «Ввести ID шаблона» и указывает номер, который вы ему сказали.

4. В аккаунте вашего коллеги создается новая страница на основе вашего шаблона.

Номер шаблона уникальный. Создать новую страницу на основе вашего дизайна можно только если вы знаете номер.

Создать страницу из шаблона можно только в период действия фактически оплаченных тарифов Personal или Business. Активация пробного периода или промокода не является оплатой тарифа.

Создание уникального шаблона для систем управления контентом — стандартная задача, которую часто приходится решать веб-разработчикам. В зависимости от сложности технического задания разработка темы может стоить от 5 до 100 тысяч рублей и больше.

В статье разберём особенности создания шаблона и поделимся пошаговой инструкцией для решения этой задачи. После прочтения статьи у новичков будет готовый план действий.

Особенности создания шаблона

На рынке много популярных CMS, которые постоянно развиваются и предоставляют широкие возможности целевой аудитории. В целом, принципы взаимодействия с готовыми системами управления контентом похожи. Хотя сами программные продукты могут сильно отличаться.

Предприниматели, которые хотят быстро запустить сайт, обычно выбирают одну из популярных CMS. Иногда они делают неправильный выбор и разработчикам приходится решать нестандартные задачи. От правильного выбора «ядра» зависит удобство взаимодействия с админкой, длительность разработки и другие важные аспекты.

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

Представьте, что вложили 500 тысяч рублей в торговую площадку, запустили рекламу в поисковых системах и соцсетях, а сайт отключился после возросшей нагрузки. В итоге бизнес понёс большие убытки, а всё из-за неправильного выбора CMS.

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

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

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

К примеру, если разработчик создаёт сайт с каталогами недвижимости и ему надо создать удобную форму публикации объектов, понадобится плагин с релевантными возможностями. Под WordPress есть Advanced Custom Fields, Carbon Fields и другие решения, которые легко закроют эту задачу.

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

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

Если клиент хочет создать сайт на популярном конструкторе, то сложность решения задачи сильно возрастает. Результат зависит от особенностей сервиса. Многие конструкторы не закрывают исходный код и позволяют гибко настраивать параметры.

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

Разработка шаблона на базе конструктора может помочь снизить бюджет, потому что все технические возможности уже будут реализованы. Программисту остаётся только создать «каркас» и выполнить требования по внешнему виду.

У конструкторов много недостатков, но и преимуществ хватает. В плане создания шаблонов сервисы более удобные, потому что у них есть документация, и, в случае необходимости, команда платформы поможет решить проблемы.

Если создавать шаблон под самостоятельную CMS, техподдержки не будет. Системы управления контентом распространяются по принципу «как есть» и часто для решения незначительных проблем приходится тратить много времени. Всё зависит от компетенции разработчика.

Выбор между готовым шаблоном и разработкой темы с нуля возникает постоянно. Некоторые заказчики отталкиваются от бюджета и выбирают готовый шаблон. Они составляют техническое задание на изменение внешнего вида и таким образом экономят на разработке.

Создание темы с нуля может затянуться даже на несколько месяцев. Для интернет-магазинов с нестандартными возможностями — это стандартный срок, который может ещё больше увеличиться в процессе работы.

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

Пошаговая инструкция по созданию шаблона

Инструкция по работе с темой подходит для любой системы управления контентом. Последовательность шагов будет совпадать, но некоторые «звенья» могут выпасть из «цепочки». Всё зависит от особенностей проекта.

В некоторых случаях клиенты приходят к разработчику с готовым дизайном и техническим заданием. Программисту остаётся только проанализировать объём работы, определить стоимость и обозначить сроки реализации.

Создавать сайты «под ключ» выгодно, потому что стоимость работы сильно повышается. Если в команде есть надёжный дизайнер, выгодно находить заказчиков, которые нуждаются в полном цикле работ.

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

Определение возможностей

Первый шаг, с которого начинается любая разработка — определение возможностей. Даже если надо создать систему управления контентом с нуля. Объём технического задания в этом случае будет большим, но общий подход к задаче не сильно отличается.

Определить возможности может и заказчик, но лучше, чтобы разработчик тщательно проверил список и рассказал о возможных проблемах. Клиент описывает возможности с точки зрения пользователя, а программист видит картину целиком.

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

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

Создание технического задания

Техническое задание — основа успешного сотрудничества. Владелец сайта гарантированно получит все возможности, которые описаны в документе. А разработчик должен полностью выполнить ТЗ, чтобы получить всю сумму.

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

Например, в ТЗ часто пишут, что сайт должен быть реализован на базе конкретной CMS и корректно отображаться на любых устройствах. Если в процессе разработки сайта клиент просит реализовать инструменты, которых нет в техническом задании, они оплачиваются отдельно.

Если раньше никогда не составляли ТЗ, можете взять готовые примеры из интернета. Сервисов, которые позволят сэкономить время на решении этой задачи, нет. Придётся делать всё вручную и внимательно следить за содержимым документа.

В готовых шаблонах ТЗ из сети много лишней информации. Лучше удалить её, чтобы в процессе разработки не возникли разногласия по поводу неоднозначных формулировок.

Подписание договора

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

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

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

Создание дизайна

Мы уже говорили, что разработчики смогут зарабатывать гораздо больше, если будут предоставлять услуги «под ключ». Они снимут часть нагрузки с клиентов и поручат создание дизайна надёжному подрядчику.

Брать дизайнера в штат необязательно, можно работать на попроектной основе. Большинство фрилансеров предпочитают этот формат, потому что можно одновременно поддерживать связь с несколькими клиентами.

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

Выбор системы управления контентом

Когда техническое задание составлено, договор подписан и уже есть готовый макет, остаётся выбрать систему управления контентом. В большинстве случаев этот пункт тоже прописывается в техническом задании, но ситуация может измениться после старта разработки.

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

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

Опытные программисты берут стандартный шаблон и проверяют CMS на соответствие заявленным возможностям. Если в процессе анализа не возникают проблемы, значит система управления контентом подходит для создания сайта.

HTML-верстка

После создания дизайна наступает время превратить картинку на экране в страницу, которая будет отзываться на действия пользователей. Независимо от особенностей CMS, первый этап вёрстки шаблона всегда будет одинаковым.

Для создания базового каркаса программисты используют связку HTML+CSS+JS. Если в макете 10 страниц, надо сверстать все. Даже если они типовые, лишнего кода не будет. На каждой странице есть отличающийся контент, а «ядро» можно взять из первого свёрстанного темплейта.

Простые шаблоны можно реализовать только с помощью HTML и CSS, но если в макете присутствует анимация или нужны динамические эффекты, без JavaScript вряд ли получится обойтись. C SS-анимация выручает, но для полноценной работы JS точно понадобится.

Стоит уделить особое внимание HTML-вёрстке, потому что от качества кода, который будут видеть роботы поисковых систем, зависит дальнейший успех продвижения сайта. Ошибки в структуре не сильно влияют на ранжирование, но могут стать серьёзной проблемой, если других технических недочётов нет.

Интеграция в CMS

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

В остальных случаях не обойтись без интеграции кода в систему управления контентом. Это похоже на приготовление шашлыка. Берём замаринованное мясо, нанизываем на шампура и жарим. Результат зависит от свежести мяса и технологии приготовления.

Интеграция в CMS должна выполняться в строгом соответствии с документацией системы управления контентом. Если разработчик начнёт менять стандартную логику, объём работы может сильно увеличиться.

Отладка

После завершения интеграции HTML-верстки в CMS наступает время заключительного этапа разработки. Программисту необходимо провести отладку, чтобы выявить проблемные места и оперативно избавиться от критических багов.

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

Разработка шаблона будет успешной только если все стороны принимают активное участие в решении задачи. Клиент чётко обозначает требования и следит за ходом выполнения, а программист последовательно создает все инструменты и сообщает о возникших проблемах.

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

Оцените статью
NaWordpress.ru
Добавить комментарий