Как создать собственный шаблон страницы WordPress

Опубликовано: 2020-06-05

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

Вы можете использовать Toolset с Gutenberg для создания шаблонов страниц WordPress для ваших отдельных сообщений.

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

Я рассмотрю два типа настраиваемых шаблонов страниц WordPress:

  1. Шаблон для обычных страниц
  2. Шаблон для страниц с одним постом

Зачем вам нужен собственный шаблон WordPress для обычных страниц

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

Представим себе пример. На кулинарном веб-сайте у вас может быть несколько страниц с советами по приготовлению, такими как «Как приготовить идеальную пасту», «Как приготовить яйца» и т. Д.

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

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

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

Два способа создать собственный шаблон страницы WordPress

Есть два способа создать собственный шаблон страницы WordPress:

  • Трудный путь . Темы автоматически предоставляют файлы PHP, которые определяют шаблоны в WordPress. Когда вы создаете настраиваемый тип сообщения (например, рецепты), вам нужно будет либо отредактировать эти поля PHP, либо создать новые, чтобы убедиться, что ваш веб-сайт отображает ваши сообщения.
  • Легкий способ. Вы можете использовать плагин WordPress, такой как Toolset, для создания своих шаблонов. Toolset создает шаблоны за считанные минуты и без написания кода. Кроме того, с помощью Toolset Blocks вы можете добавлять блоки в редактор WordPress Gutenberg с динамическим контентом.
Набор инструментов позволяет создавать собственные веб-сайты без использования кода.

Ниже я покажу вам простой способ.

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

Во-вторых, я создам шаблон для пользовательского типа поста с рецептами.

Как создать собственный шаблон страницы WordPress для обычных страниц

Шаг 1. Создание структуры шаблона контента

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

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

Я добавил блок Grid, чтобы создать структуру шаблона, и перетащил сетку, чтобы развернуть левую часть.

Шаг 2. Добавьте контент в свой шаблон

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

Ниже я выбираю содержимое публикации справа в качестве источника блока.

Чтобы выбрать контент, который появляется в блоке, вам нужно выбрать источник.

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

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

Шаг 3: стилизуйте блоки

Когда вы объединяете WordPress с Toolset, вы можете стилизовать блоки, которые вы добавляете в свой шаблон. Если вы выбрали создание блоков «Сложный путь», тогда вам придется полагаться на свои навыки кодирования для хорошего стиля.

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

В разделе «Типографика» вы можете изменить следующее:

  • Шрифт
  • Размер шрифта
  • Интервал
  • Стиль
  • Цвет текста
На правой боковой панели я могу редактировать типографику блока.

Это не все. В «Настройках стиля» вы также можете изменить следующее:

  • Фоновый цвет
  • Поля / отступы
  • Граница
  • Тень коробки

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

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

Шаг 4. Настройте шаблон для разных размеров экрана

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

Поэтому вам может потребоваться настроить шаблон для каждого размера экрана. Это достаточно просто сделать с помощью Toolset и WordPress.

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

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

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

Вы также можете переключаться между размерами экрана вверху страницы.

Шаг 5. Назначьте шаблон своим страницам

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

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

На правой боковой панели я могу назначить шаблон.

В интерфейсе я теперь увижу шаблон на той странице, которой я его назначил.

Это шаблон на интерфейсе.

Зачем вам нужен собственный шаблон страницы WordPress для отдельных сообщений

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

Для своего кулинарного веб-сайта я создал собственный тип поста для своих рецептов. Ниже вы можете увидеть один из моих рецептов на админке. Обратите внимание на все настраиваемые поля, которые я создал для него, такие как Prep Time, Cook Time и Recipe Image.

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

Я еще не назначил шаблон для своих рецептов. Посмотрите, что происходит, когда мы смотрим на рецепт без шаблона во внешнем интерфейсе.

Без шаблона ни одно из настраиваемых полей не будет отображаться в интерфейсе пользователя.

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

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

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

Ниже я покажу вам, как я создал этот шаблон для своих рецептов.

Шаг 1. Создание шаблона

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

Создав шаблон для моих рецептов на панели инструментов Toolset, все сообщения с рецептами будут автоматически назначены этому шаблону.

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

Шаг 2. Добавление содержимого в шаблон

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

Еще раз, я могу добавить блок Toolset Grid для создания структуры шаблона.

С помощью блока Grid я могу выбрать, какой тип макета мне нужен.

Теперь я могу начать добавлять свои блоки для своего контента. Например, в моих рецептах в левом столбце есть изображение. Из набора блоков Гутенберга я могу добавить блок изображения Toolset. Мне нужна версия блока в Toolset, потому что она позволяет мне добавлять динамический контент.

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

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

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

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

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

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

Шаг 3. Создайте стиль для блоков

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

Шаг 4. Настройте шаблон для разных размеров экрана

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

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

Шаг 5. Проверьте, как выглядит шаблон с каждым из ваших сообщений.

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

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

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

Теперь у каждого из моих рецептов будет один и тот же шаблон.

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

Начните создавать свой собственный шаблон страницы WordPress сегодня

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