Содержание
Шаблон страницы WordPress — WordPress для всех
От автора
Привет! В шаблонах WordPress установленных по умолчанию, нет такой функции, как шаблон страницы WordPress. Однако это не значит, что не нужно знать, что это такое и как это работает.
Шаблон страницы WordPress
В некоторых темах авторы могут включить выбор на страницах сайта различных шаблонов. Один шаблон выбирается, как шаблон по умолчанию или базовый шаблон (default). Так же добавляют (объявляют) шаблоны без виджетов, во всю ширину и смена позиции виджета (вместо позиции «слева», позиция «справа»).
В некоторых темах авторы добавляют до 7-8 собственных шаблонов для страниц.
Если не выбрать шаблон страницы или такого выбора нет, будет использован шаблон автора темы, например,
custom.php
, если его нет – шаблон файлаpage.php
, если его нет – шаблон файлаindex.php
.
Выбор шаблона страницы в WordPress
- Чтобы добавить шаблон страницы WordPress на страницу, отредактируй старую или добавь новую страницу на вкладке «Страницы», расположенного в панели инструментов WordPress.
- Найди раздел «Атрибуты страницы». В этом разделе может быть раскрывающейся список доступных шаблонов страниц. Если пользовательских шаблонов нет, списка не будет.
Предварительный просмотр шаблона страницы WordPress
Чтобы проверить, как применённый шаблон меняет внешний вид страницы, после его выбора, используй кнопку «Просмотреть» в блоке «Опубликовать».
Публикация страницы
После того как ты выбрал шаблон страницы и при желании просмотрел его, осталось для применения, нажать кнопку «Опубликовать».
Как включить выбор шаблонов страниц
Чтобы включить выбор шаблонов страниц, нужно:
В текстовом редакторе, типа Notepad++, нужно создать файл под любым названием (для примера: Serov). Расширение файла должно быть php. Файл должен иметь такое содержание:
<?php
/*
Template Name: Serov
*/
?>
<!-- Здесь php/html код нового шаблона -->
Далее, залить этот файл в каталог рабочей темы, например в тему «Twenty Seventeen».
После этого на странице добавления страниц, в разделе «Атрибуты страницы» появится новый шаблон для страницы с именем «Serov». Первый в списке, будет стоять «Базовый шаблон».
Вывод
В данном уроке мы рассмотрели, что такое шаблон страницы WordPreess. На этапе освоения системы создавать свои шаблоны страниц не нужно. Однако использовать все возможности предоставленные авторами твоей рабочей темы необходимо. Как полностью создать свой шаблон для страниц в следующих постах, другого раздела.
©WPkupi.ru
Еще статьи
Похожие посты:
Как создать шаблон страницы WordPress
Автор: Анатолий Черкес /
Дата: Опубликовано: 30 августа 2019 /
Просмотров: 652
Привет уважаемые друзья!
В данной статье поделюсь с Вами знаниями как создать шаблон страницы на WordPress.
Задача создания уникального шаблона страницы на сайте WordPress является распространённой для разработчиков сайтов. Если же Вам необходимо разработать сайт с уникальной структурой и соответственно, уникальным дизайном для различных страниц сайта, то использование для этих целей готовой темы WordPress будет недостаточно. В любом случае нужно будет дополнять тему своими шаблонами страниц.
Как же для темы WordPress сделать свой уникальный шаблон страницы?
А всё очень просто.
Достаточно создать в папке темы свой файлик и в самом начале этого файлика поместить следующий код:
<?php /* Template Name: Название шаблона */ ?>
Соответственно, название шаблона указываем своё.
Для того, что бы наша страница использовала этот шаблон, необходимо через админку сайта для соответствующей страницы выбрать этот шаблон в разделе свойств.
Для тех, кто обновил ВордПресс, как минимум до версии 4.7 есть хорошая новость.
С версии WordPress 4.7. уникальные шаблоны страниц можно указывать так же и для других типов записей: post, product.
Создание уникального шаблона для страниц записей и продуктов
Что бы создать шаблон страницы на WordPress для типов записей отличных от page, например для post и product, то код приведённый выше будет иметь следующий вид:
<?php /* Template Name: Название шаблона Template Post Type: post, product */ ?>
Как и в предыдущем примере, для того, что бы наш шаблон вступил в силу, необходимо его выбрать в разделе свойств соответствующей записи.
Настоятельно рекомендую название файлов Ваших шаблонов страниц давать понятное не только Вам, но и другим разработчика, которые смогут продолжить работу над Вашим проектом.
Файл исходник можно скачать по ссылке: файл-шаблон страницы WordPress.
С уважением, Анатолий Черкес.
Добавить комментарий
WordPress 404 страница — как настроить страницу ошибки
Рассмотрим, как настроить шаблон ошибки 404 в WordPress, чтобы создать полезную страницу, которая поможет пользователям сориентироваться на вашем сайте и улучшить поведенческие факторы.
Что такое ошибка 404 и почему важно правильно настроить страницу?
Ошибка 404 возникает, когда посетитель пытается получить доступ к странице, которая не существует. Многие склонны игнорировать эту страницу при использовании шаблонов WordPress и не задумываются о ее существовании. Тем не менее, если вы потратите время на создание удобной страницы 404, это поможет задержать пользователя на вашем сайте.
Интернет-адрес, ведущий на страницу с ошибкой 404, может оказаться просто неправильно набранным URL либо возникнуть со временем, если вы удалили проиндексированную страницу и забыли об этом. При выдаче кода 404 WordPress настроен на автоматический поиск файла 404.php. Базовый шаблон с этой ошибкой включен в некоторые темы WordPress. Если же этого файла нет, то будет показано системное сообщение, которое не несет полезной для пользователя информации.
Как создать страницу 404 ошибки, если ее нет в шаблоне — настройка
Не все темы WordPress имеют собственный файл шаблона ошибки 404. Если разработчик темы предусмотрел это, такой файл будет называться 404.php. WordPress автоматически использует эту страницу, когда возникает ошибка 404. Если в вашей теме нет этого файла, его можно создать самостоятельно.
- Первое, что нужно сделать, это сформировать настраиваемый шаблон, например, редактируя файл 404.php, скопированный из другой темы. Если вы редактируете свою тему напрямую, настоятельно рекомендуется сделать резервную копию темы WordPress.
- Файл ошибки 404 расположен по адресу: /wp-content/themes/имя-темы/404.php
- Страница ошибки примет стиль активной темы, поскольку она вызывает шапку
- И подвал текущей темы.
- Понадобится только отредактировать заголовок и сообщение на странице в соответствии с вашими конкретными потребностями.
- Для этого откройте файл шаблона ошибки 404 в редакторе кода и измените текст сообщения на свое усмотрение.
- Добавьте в шаблон строку поиска, если ее там нет. Затем сохраните файл и загрузите его в каталог темы установки WordPress.
Поскольку все темы различаются, нет никакой гарантии, что простое копирование файла шаблона 404.php будет работать. Чтобы сервер нашел страницу 404, добавьте следующую строку в файл .htaccess:
ErrorDocument 404/index.php?error=404
Файл index.php расположен в корневой папке вашего сайта. Если WordPress находится в подкаталоге с именем «wordpress», код, добавляемый в файл .htaccess, должен быть:
ErrorDocument 404/wordpress/index.php?error=404
Что разместить на wordpress странице 404
Когда пользователь обнаруживает вместо искомой страницы сообщение об ошибке 404, разочарование может заставить его покинуть ваш сайт преждевременно. Задача веб-мастера помочь найти посетителю информацию, которую он искал, и тем самым снизить процент отказа и улучшить поведенческие факторы на сайте.
Рекомендуется указать пользователю правильное направление действий, которое заставит его задержаться на сайте. Это можно сделать несколькими способами:
- предоставить информацию о других разделах вашего интернет-ресурса, которые можно посмотреть;
- дать посетителю возможность связаться с вами по указанным контактным данным;
- добавить ссылки на популярные сообщения, последние комментарии, архивы;
- разместить строку поиска, чтобы посетитель сам нашел нужную информацию на сайте.
Чтобы сделать страницу уникальной, вы можете снабдить ее фоновым изображением в стиле оформления сайта. Допустимо также использовать html-теги и css-стили, чтобы придать шаблону индивидуальность.
Как создать в вордпресс 404 страницу при помощи плагина
Создать собственную страницу 404, как и любую другую страницу в WordPress можно при помощи плагина 404page (https://wordpress.org/plugins/404page/). Важной особенностью этого плагина является то, что он не создает перенаправление, а формирует правильный ответ сервера с кодом 404. Он сообщает поисковым системам, что страница не существует и должна быть удалена из индексирования, тогда как перенаправление приведет к HTTP-коду 301 или 302 и URL-адрес останется в индексе поиска.
Установите плагин 404page из меню админки «Плагин -> Добавить новый» и активируйте его.
Создайте страницу 404 как обычную страницу WordPress из меню «Страницы -> Добавить новую». Внесите в нее всю необходимую информацию, которую вы хотите показать посетителю, и нажмите кнопку «Опубликовать». Плагин 404page также добавляет CSS-класс error404 в тег <body>, который можно использовать для задания дополнительных стилей на странице.
После активирования плагина в меню «Внешний вид» (1) появился раздел «404 Error Page» (2), в котором можно настроить отображение страницы ошибки.
Выберите созданную страницу 404 из списка страниц сайта (3). Убедитесь, что отмечен флажок (4), чтобы сервер отдавал код 404 при доступе к этой странице. Если вы используете кэширование, плагин выдаст предупреждение – страница из кэша будет отдавать код 200, поэтому ее нужно исключить из кэширования.
При возникновении проблем или конфликта с другими плагинами 404page может быть запущен в режиме совместимости. Нажмите кнопку «Сохранить изменения» (5).
Чтобы включить обработку ошибок 404 в WordPress, нужно установить структуру ссылок в меню «Настройки -> Постоянные ссылки» на любой пункт, кроме «По умолчанию». В противном случае ошибка 404 обрабатывается сервером, а не движком WordPress.
iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.
Мы предлагаем:
Как создать шаблон страницы WordPress: руководство для начинающих
«Как создать шаблон страницы WordPress с нуля?» Если вас это все еще беспокоит, то это руководство просто необходимо прочитать. Бывают случаи, когда вы хотите определить уникальный стиль для каждой страницы своего веб-сайта или сказать, что хотите отобразить определенную информацию на определенных страницах. Там вам нужны разные страницы для отображения на них разной информации. И для этого вы можете использовать шаблон страницы WordPress.
Как правило, все страницы веб-сайта имеют вид в соответствии с применяемой темой. Но вы можете встретить сайты с разным дизайном для разных страниц. Как это возможно? Простой ответ – шаблон пользовательской страницы WordPress. Внешний вид страницы можно легко изменить, применив другой шаблон страницы. Вы также можете использовать собственный шаблон страницы WordPress для различных целей. Например, для создания контактной страницы, целевой страницы, которая действительно конвертируется, отображения списка архивов / авторов, встраивания скрипта Google и т.д. Вы можете бесконечно расширять возможности WordPress, это просто зависит от того, как вы настраиваете страницу WordPress. шаблон. Вы будете поражены, увидев, что WordPress может для вас сделать.
Что такое шаблон страницы WordPress?
Термин шаблон страницы WordPress используется неоднократно. Но что такое шаблон страницы WordPress? Это шаблон, который рассказывает о макете страницы. Он определяет все элементы дизайна для страницы, чтобы отображать динамическое содержимое сайта и изменяет внешний вид страницы. Также его можно применить к одной странице, группе страниц или разделу страницы. Доступны различные конструкторы страниц WordPress, но выбрать лучшее из представленных вариантов действительно важно и сложно.
Как создать шаблон страницы WordPress?
Как правило, тема рассматривает файл page.php как шаблон страницы WordPress по умолчанию. Он включает в себя все элементы дизайна для определения любого типа контента на странице. Но вы можете легко создать собственный шаблон страницы WordPress. Вы можете настроить собственный шаблон страницы WordPress в соответствии с вашими потребностями, чтобы персонализировать его. Существует два надежных метода создания пользовательского шаблона страницы WordPress. Вы можете прочитать, как создать одностраничный сайт, создать дочернюю тему в WordPress.
2 метода создания шаблона страницы WordPress
1. Создайте шаблон страницы WordPress с помощью TemplateToaster.
2. Создайте шаблон страницы WordPress, используя метод кодирования.
Создайте собственный шаблон страницы в WordPress с помощью TemplateToaster
Если у вас мало знаний о кодировании, вы можете использовать TemplateToaster для создания собственного веб-сайта и WordPress Theme Builder, чтобы легко начать работу. Всего несколько простых щелчков мышью, чтобы выбрать необходимые элементы дизайна. Вы можете легко создавать потрясающие шаблоны страниц WordPress с помощью TemplateToaster в кратчайшие сроки. Давайте посмотрим на пошаговую процедуру создания шаблонов страниц WordPress следующим образом.
Выполните следующие действия, чтобы создать шаблон страницы WordPress
Шаг 1. Выберите платформу
После того, как вы загрузите программное обеспечение и установите его, первый экран, который вы увидите после установки, будет выглядеть так, как показано ниже. Здесь вы делаете выбор CMS, так как TemplateToaster поддерживает все основные CMS. И WordPress должен стать очевидным выбором, поскольку мы создаем шаблон страницы WordPress.
Затем вам нужно выбрать вариант «Начать с нуля» из двух предложенных вариантов. Вы также можете выбрать «Перейти с образцом шаблона», если хотите пока обойтись без лишних деталей.
Теперь выберите цвет и типографику, которые вы хотите установить для своего шаблона пользовательской страницы WordPress, и нажмите кнопку «ОК», чтобы подтвердить свой выбор.
Теперь выберите макет для контейнера из предложенных вариантов, например «Плавный» и «Фиксированный», как показано ниже. Однако вы можете установить высоту и ширину контейнера в соответствии с вашими требованиями. Контейнер → Жидкость
Шаг 2. Создайте заголовок
Здесь вы можете создать свой заголовок. Вы можете выбрать положение, высоту и ширину, например полную ширину, равную ширине контейнера или, фактически, вы также можете установить пользовательскую ширину для заголовка, как показано ниже.
Шаг 3. Создайте меню
Чтобы создать «Меню» вашего шаблона WordPress, перейдите на вкладку «Меню» и выберите для него желаемую ширину, высоту и текстовую область. И спроектируйте его в соответствии с вашими требованиями.
Вы можете выбрать изображение из галереи в качестве логотипа своего веб-сайта или использовать собственное изображение. Меню → Логотип → Обзор
Теперь настройте свое меню, выбрав типографику кнопок меню, поля, отступы, цвет фона и многое другое. Вы можете стилизовать его в соответствии с вашими потребностями из доступных вариантов. Меню → Типография
Шаг 4. Добавьте слайд-шоу
Если вы хотите, чтобы на шаблоне страницы было слайд-шоу, перейдите на вкладку «Слайд-шоу» и установите флажок «Слайд-шоу». Вы можете выбрать, сколько слайдов вы хотите включить или исключить, нажав на значок плюса (+) или минуса (-) соответственно, как показано ниже.
Вы также можете разбить слайд-шоу на страницы, как показано ниже. Кроме того, с помощью параметра «Фон» вы можете загружать разные изображения для слайд-шоу одно за другим. Фактически, добавить текстовую область в слайд-шоу довольно просто.
Шаг 5: отредактируйте контент
Теперь вы создадите область содержимого вашего веб-сайта. Перейдите на вкладку Content и выберите, сколько столбцов вы хотите иметь, например, у вас может быть один столбец, два столбца, три столбца и даже четыре столбца для вашего сайта. Контент → Столбец → 2
Поместите необходимое содержимое в выбранный столбец содержимого. Если вы хотите добавить какую-либо кнопку, контактную форму, изображение и т.д., Дважды щелкните область содержимого. Откроется вкладка «Редактор».
Шаг 6: Настройка макета для шаблона страницы
На левой панели основного интерфейса вы увидите параметр «Шаблоны страниц». Здесь вы найдете шаблон страницы, созданный вами выше. В шаблоне страницы по умолчанию левая боковая панель расположена, как показано ниже.
Однако наличие боковой панели – это полностью ваше желание. И если вы хотите, чтобы он был в шаблоне страницы WordPress, все, что вам нужно сделать, это перейти на вкладку «Общие» и щелкнуть по боковой панели. Здесь вы увидите такие параметры, как «Без боковой панели», «Одна боковая панель» и «Двойная боковая панель». И вы можете выбрать, сколько боковых панелей вы хотите и где вы хотите, чтобы они были, то есть слева или справа, как показано ниже. Общие → Боковая панель → Левая боковая панель
На левой панели основного интерфейса вы увидите созданную нами страницу шаблонов левой боковой панели. Однако вы можете в любой момент переименовать его в соответствии с вашими требованиями.
Кроме того, это полностью ваше желание добавлять боковую панель или нет. Здесь я создал новую страницу, просто щелкнув значок плюса ⊕, и я не включил боковую панель. Это будет выглядеть примерно так, как показано ниже.
Шаг 7: экспорт темы
Теперь экспортируйте свою тему из меню файлов, как показано ниже. Перейдите в Файл → Экспорт.
Теперь у вас появится всплывающее окно «Экспорт темы WordPress». Просто нажмите кнопку экспорта, чтобы продолжить.
Шаг 8: доступ к панели администратора WordPress
Авторизуйтесь в админке WordPress. Перейдите в Внешний вид → Темы → Добавить новый → Загрузить темы. Просмотрите свой файл и нажмите кнопку «Установить сейчас», как показано ниже.
Шаг 9: Установите и активируйте
Теперь вы увидите кнопку «Импорт содержимого» вверху экрана. Просто щелкните по нему, чтобы подтвердить.
Вскоре после того, как вы нажмете на опцию «Импорт содержимого», появится всплывающее окно с просьбой подтвердить свой выбор. Однако вы можете выбрать, какую страницу, элемент меню, боковую панель и виджет нижнего колонтитула вы хотите импортировать или не так, как показано ниже. Вы можете снять флажки, которые не хотите импортировать. И нажмите кнопку «Импорт», чтобы продолжить.
После успешного импорта вы можете выбрать, какую страницу вы хотите отображать на экране с редактированием или без него. Как и здесь, я выбрал страницу «Службы» для редактирования и хочу показать левую боковую панель на этой странице.
Вот так оно и появится в итоге.
Однако, если вы не хотите отображать левую боковую панель на странице служб, вы также можете это сделать.
Вот как это будет выглядеть.
Создайте собственный шаблон страницы в WordPress с помощью метода кодирования
Если вы хотите создать шаблон страницы WordPress, вам необходимо иметь некоторые базовые знания HTML, CSS и PHP. Но не беспокойтесь, создать шаблон страницы WordPress действительно просто. Предположим, вам нужен шаблон страницы без боковой панели, для этого вы выполните простые шаги:
Шаги по созданию шаблона страницы WordPress с использованием метода кодирования
Шаг 1. Откройте текстовый редактор, например Блокнот. Напишите этот код для создания настраиваемого шаблона страницы с именем MyCustomPage. Он просто сообщает, что это файл шаблона с именем MyCustomPage.
<?php /* Template Name: MyCustomPage */ ?>
Шаг 2: Сохраните этот файл как MyCustomPage.php. Вы можете использовать любое имя для файла.
Шаг 3: Подключитесь к своему веб-сайту и загрузите этот файл в каталог / wp-content / themes / вашей текущей темы. Основная используемая тема – это, как правило, тема Twenty Nineteen.
Шаг 4: Войдите в свою панель управления WordPress. На левой панели перейдите к Страницы → Добавить новый. Откроется новое окно, как показано ниже. Справа перейдите в Атрибуты страницы → Шаблон. Откроется раскрывающийся список существующих шаблонов. Выберите здесь MyCustomPage.
Шаг 5: опубликуйте эту страницу. Вы получите пустую страницу.
Шаг 6: Настройте шаблон. Для этого перейдите в папку / wp-contents / themes / YOUR THEME /. Скопируйте содержимое файла page.php.
Шаг 7. Вставьте этот код в файл MyCustomPage.php. Сохрани это.
Шаг 8: Вы можете использовать боковую панель из шаблона, все, что вам нужно сделать, это удалить код, вызывающий боковую панель. Удалите следующую строку кода.
Шаг 9: На месте боковой панели будет показано пустое пространство. Сделайте так, чтобы контент умещался на весь экран. Найдите эту строку кода.
<div>
- Замените его следующим кодом
<div>
- Здесь код CSS для полной ширины содержимого сайта будет следующим:
.site-content-fullwidth
{
float= left;
width= 100%;
}
Сохрани это.
Шаг 10: Наконец, весь код вашего шаблона пользовательской страницы WordPress будет следующим.
Последняя обновленная страница будет выглядеть следующим образом
Точно так же вы можете создать больше настраиваемых шаблонов страниц, удалив верхний и нижний колонтитулы или добавив дополнительные боковые панели и т.д.
Итак, какой метод вы бы выбрали для создания шаблона страницы WordPress с нуля?
Что ж, есть несколько способов настроить и создать шаблон WordPress, но одним из самых эффективных и надежных методов является функция настраиваемого шаблона страницы. Создать собственный шаблон страницы WordPress довольно просто, если вы выполните вышеупомянутые шаги. Но если вас устраивает метод кодирования, обязательно сохраните копию файла шаблона по умолчанию page.php.
Потому что, когда вы изменяете исходный файл, он автоматически применяется ко всем страницам веб-сайта. Поэтому рекомендуется протестировать свой сайт с помощью образцов шаблонов страниц. Если он работает хорошо, вы можете добавить его в исходные файлы, как при создании дочерней темы WordPress для тестирования. Однако, если вы используете программу для создания тем и веб- сайтов TemplateToaster WordPress, вам вообще не нужно писать код. Итак, выбор метода полностью зависит от вас. Что касается настраиваемого шаблона страницы, он требует только инноваций, которые лежат внутри вас !! На этом пока все. Если вы хотите поделиться чем-то или у вас есть какие-либо вопросы, оставьте сообщение в разделе комментариев ниже.
Связанное чтение: Учебник по WordPress 101
Как проверить версию WordPress
Как найти URL для входа в WordPress
Как установить WordPress
Что это за тема WordPress
Как изменить язык WordPress
Как создать тему WordPress с нуля
Как исправить неработающее обновление страницы WordPress
Источник записи: https://blog.templatetoaster.com
Что такое базовый шаблон WordPress
Подготовительная статья
В этой статье я рассмотрю что такое базовый шаблон WordPress. Практически это создание и подготовка базовых файлов перед «натяжкой» HTML шаблона на движок WP. Эта информация пригодится в будущем. Я не знаю уровень каждого заинтересованного посетителя, поэтому не могу пропустить такие прописные истины. А в следующей публикации мы займемся самым интересным.
В окончании статьи смотрите ссылки на предыдущие материалы. И на использованные в статье материалы. В основном это документация codex.wordpress.org. И ссылочки будут на разделы кодекса.
Ну давайте все-таки начнем по порядку.
Где размещается тема WordPress и базовая структура шаблона WordPress
Темы WordPress находятся в поддиректориях wp-content/themes/
. Тут все предельно просто, тема под названием "test"
будет расположена в директории wp-content/themes/test/
.
А в свою очередь директория темы WordPress обязательно должна содержать всего два файла:
style.css
— шаблон стилей темы;
index.php
— довольно гибкий файл, и в него можно поместить все — шапку сайта, боковую колонку — сайдбар, подвал темы, зону контента, категории, архивы, страницу поиска и все другие модули сайта. Оба эти файла помещаются в папку с темой.
Но мы, естественно создадим как положено, что более гибко и удобно использовать — разные собственные файлы шаблонов для категорий, комментариев, тегов.
Помимо вышеупомянутых файлов, в теме может (у нас будет) присутствовать файл
functions.php
Этот файл работает как плагин, загружается вместе с инициализацией движка WordPress и служит для расширения функционала WordPress. Мы будем постепенно вносить нужные для работы темы функции.
Наш базовый шаблон WordPress для начала будет состоять сразу из
style.css
— стили нашей темы;
index.php
— главный шаблон;
functions.php
— функционал темы;
header.php
— шаблон заголовка темы;
sidebar.php
— шаблон боковой колонки;
footer.php
— шаблон части страницы — подвала.
Позже создадим еще дополнительные файлы для страниц с категориями, метками, одиночными записями, несколько шаблонов страниц.
Итак, давайте начнем создавать наш базовый шаблон WordPress
Пока просто создадим директорию шаблона, пустые файлы, и скриншот темы, а в последующих публикациях разберем подробнее как они подключаются и начнем их наполнение.
На рабочем столе создайте папку с названием startwp
— это и будет директория, другими словами папка с темой. Пишите название в нижнем регистре, латинскими буквами. Название может быть любым, но пока лучше просто повторяйте за мной.
Далее в этой папке создайте несколько пустых файлов:
style.css
— стили нашей темы;
index.php
— главный шаблон;
functions.php
— функционал темы;
header.php
— шаблон заголовка темы;
sidebar.php
— шаблон боковой колонки;
footer.php
— шаблон подвала.
Обратите внимание на расширения файлов, прописывайте их правильно.
Ну и кликните по картинке, скачайте, положите в папку startwp
, не меняйте размер оригинала. Это будет скриншот нашей темы, который будет отображаться в админ-панели во вкладке с установленными темами.
Пока созданные файлы оставьте как есть. В одной публикации очень сложно все вместить, поэтому следите за появлением свежих статей, в которых продолжим создание темы на WordPress.
Вот исходники к данной публикации
- Скачать материалы
В статье использована документация codex.wordpress.org — создание тем WordPress.
— Я специально создал FeedBerner, чтобы вы не пропустили не одной публикации. Вот ссылка на FeedBurner, просто кликните по картинке :
Feed новостей моего сайта почтой
Как скажется беременность на моей фигуре?
Лучший способ отблагодарить автора
Похожие по Тегам статьи
Как создать свой шаблон в WordPress?
Приветствую вас на сайте Impuls-Web!
В сегодняшней статье вы узнаете, как можно создавать свои собственные шаблоны оформления в темах WordPress.
Навигация по статье:
Для чего вам может это понадобится?
К примеру, для некоторых страниц вы хотите убрать сайдбар или заголовок страницы или добавить какой-то блок, который должен присутствовать только на одной или нескольких страницах на сайте или вообще хотите сверстать определённую структуру, отличающуюся от всех остальных страниц на сайте.
Для этого в WordPress предусмотрена поддержка шаблонов страниц.
Если в административной части сайта мы перейдем в раздел «Страницы» => «Все страницы», и откроем для редактирования какую-нибудь из существующих страниц, то увидим, что справа у нас есть блок «Свойства страницы», в котором мы можем выбрать шаблон.
В зависимости от темы WordPress, список этих шаблонов будет у нас меняться.
Итак, давайте рассмотрим алгоритм, при помощи которого вы сможете самостоятельно создавать бесконечное количество шаблонов страниц, на все случаи жизни.
Шаг 1. Скачиваем файл шаблона к себе на компьютер
Для того, что бы создать отдельный шаблон страницы WordPress, прежде всего нам понадобится подключиться к сайту по FTP. Это можно сделать при помощи FTP-клиента, либо вы можете использовать Web-интерфейс на вашем хостинге для загрузки и выгрузки необходимых файлов.
- 1.Подключаемся к нашему сайту и заходим в папку с активной темой:
wp-content/themes/название_темы
- 2.Находим файл page.php и скачиваем к себе на компьютер.
Так же в большинстве современных тем помимо шаблона page.php, еще содержаться уже встроенные шаблоны конкретно для этой темы. Они могут находиться как в корне самой темы, так и вынесены в отдельную папку. Обычно эта пака называется templates, page-templates и так далее.
- 2.Если вы хотите создавать свой шаблон на базе базового шаблона страницы, то вы скачиваете файл page.php. Если же, к примеру, вам больше подходит один из уже существующих шаблонов темы WordPress, к примеру, full-width-page.php, и вы хотите в нем что-то изменить, то можете брать сразу же тот шаблон, который вам наиболее подходит.
Шаг 2. Вносим необходимые правки
После того, как файлы скачаны, переходим к следующему этапу, это переименование этих файлов и внесение в них определенных правок.
- 4.Переименовываем файл шаблона WordPress и открываем его в каком-либо редакторе кода типа Sublime Text, Notepad++ или любом другом.
- 5.Первое, что нам нужно сделать, это внести правки в описание, которое находится в самом верху.
Заменяем описание которое там есть на код:
Template Name: Название шаблона
Здесь название шаблона можно написать как на английском, так и на русском языке.
- 6.Итак, этими строчками мы добились того, что у нас теперь WordPress в админке, при редактировании страницы, в списке шаблонов будет предлагать еще один шаблон, который мы назвали «Шаблон без сайдбара».
- 7.Теперь нам необходимо внести нужные нам изменения, к примеру убрать сайдбар. Для этого находим код:
И удаляем его или комментируем.
Если вы не знаете как выполняется комментирование кода в HTML, PHP и CSS, то вот ссылка на статью, (//impuls-web.ru/kak-delat-kommentarii-v-kode/) где описано как это делается.
- 8.Далее, необходимо расширить область контента. Для этого допишем свой CSS-класс, и в css исправим значение ширины.
- 9.При помощи инспектирования кода вычисляем класс блока, внутри которого выводится контент всей страницы.
- 10. Находим блок с этим классом в файле шаблона, который мы создаём, и дописываем ему ещё один уникальный класс, который будет работать только для нашего шаблона.
- 11.Далее в файле style.css, который так же находится в корне с темой, в самом конце мы можем дописать CSS свойства для нужных нам блоков. Например, изменить значение ширины для блока с контентом:
.no-sidebar #primary {
width:100%;
}.no-sidebar #primary {
width:100%;
}
Обратите внимание, что я перед классом или идентификатором блока, для которого мы дописываем свои CSS свойства нужно обязательно указать класс, который мы дописали для блока с контентом. Это нужно для того чтобы дописанные CSS свойства срабатывали не на всех страницах сайта, а только для страниц с созданным нами шаблоном.
- 12.Сохраняем изменения.
Шаг 3. Выгружаем файл шаблона обратно в папку с темой.
Выгружать шаблон можно как в корень папки с темой, так и в папку с шаблонами страниц (если они есть).
Теперь мы можем выбрать этот шаблон в списке шаблонов темы WordPress при редактировании страницы, обновить её и убедиться что внесённые нами правки корректно работают.
Аналогичным образом мы можем создать, к примеру, шаблон страницы, на которой не будет заголовка, то есть, сразу будет идти контент.
Что делать если часть шаблона находится в других файлах?
Очень часто случается так, что в самом шаблоне page.php или других шаблонах формирование и загрузка отдельных частей страницы происходит в других файлах.
На примере ниже видно, что часть шаблона, отвечающая за вывод заголовка страницы подгружается из файла content-page.php.
В таких случаях для внесения своих изменений нужно сделать следующее:
- 1.Находим этот файл у себя на хостинге, в папке с темой и скачиваем себе на компьютер.
- 2.Далее, нам необходимо его переименовать. К примеру, в content-page2.php.
- 3.Теперь в этом переименованном файле мы можем внести все необходимые изменения, к примеру, нам нужно удалить или закомментировать фрагмент кода, отвечающий за вывод заголовка.
В темах WordPress вывод заголовка осуществляется при помощи функции
- 4.Сохраняем изменения и выгружаем изменённый файл, в ту же в папку с темой WordPress.
- 5.После чего, в файле шаблона, который мы создаем, нам нужно исправить название подгружаемого файла. То есть, заменить название файла с content-page на content-page2, в котором мы только что внесли изменения.
В коде это будет выглядеть так: - 6.Сохраняем изменения и выгружаем шаблон к себе на хостинг в папку темой.
Теперь после выбора нашего шаблона и обновления страницы заголовка страницы у нас не будет, при этом на всех остальных страницах сайта он останется.
Аналогичным образом вы можете добавлять сюда какие-то блоки. К примеру, в самом начале страницы вывести какой-нибудь слайдер или добавить какие-то специфические блоки, фильтры для поиска, карты, блоки для вывода записей и так далее.
Видеоинструкция
Как видите, процедура создания собственного шаблона WordPress не представляет собой ничего сложного! Самое сложное здесь, по сути, заключается в том, что бы внести нужные правки в коде и не удалить ничего лишнего 🙂
На этом у меня все. Если у вас будут возникать какие-то вопросы, задавайте их в комментариях. Я желаю вам удачи в создании своих собственных шаблонов оформления для WordPress.
До скорых встреч в следующих статьях!
С уважением Юлия Гусарь
Страницы со своим дизайном в Wоrdpress » Блог Андрея Бондаренко
Доброго времени суток, уважаемые читатели. Сегодня тема статьи: «Страницы со своим дизайном в Wоrdpress». В Wоrdpress есть поддержка создания собственных шаблонов страниц, и это позволяет создавать страницы с эксклюзивным дизайном.
По умолчанию, Wоrdpress сканирует все файлы, находящиеся в директории Вашей активной темы. Если Вы добавите файл определённого формата, неважно с каким-названием, и файл будет помечен как шаблон, то Wоrdpress автоматически добавит его к уже имеющимся шаблонам. Если в теме до этого не было шаблонов, то добавленный файл станет первым, и при создании страницы, появится опция выбора шаблона.
- Возьмём для примера дефолтную тему twentyseventeen.
- По умолчанию, в этой теме нет шаблонов страниц. И при создании страницы, доступен только выбор атрибута.
Создание шаблона страницы в WordPress
- Если Вы хотите создать шаблон страницы с небольшими изменениями, но в общем формате (шапка, боковая панель, подвал…), то можно сделать копию файла page.php, именно он отвечает за шаблон страницы по умолчанию, и производить изменения уже в копии файла.
- Как будет назван новый файл, не имеет значения.
- Нужно открыть файл, и в самом верху добавить несколько строк.
- Для Wоrdpress наличие данных строк, означает, что данный файл – это шаблон страницы. И движок воспринимает его соответственно.
Моя страница — это название шаблона, оно будет отображаться в списке доступных шаблонов. Вы можете назвать создаваемый шаблон, как Вам больше нравится, главное, чтобы при выборе шаблона, Вы понимали, что это за шаблон. Шаблонов можно создать сколько угодно.
- После добавления строк указанных выше, при создании страницы, добавится опция выбора шаблона.
- В выпадающем меню, присутствует добавленный нами шаблон.
Небольшие изменения в дизайне
- Если Вы хотите применить какие-либо стили к содержимому создаваемой страницы, но не терять возможность работы с текстом через админ-панель, то изменения в шаблон нужно вносить в рамках вывода контента и комментариев.
- В теме twentyseventeen, рамки указаны на картинке:
Создание шаблона для одной страницы
- Если Вы создаёте шаблон, для использования одной единственной страницей, то можно удалить отмеченное рамками на странице выше, и производить форматирование и использование стилей прямо в исходном коде файла.
- При таком подходе, не будет возможности работы с текстом из админ-панели.
Создание страницы с нуля
- Ещё один вариант использования шаблона, это создание страницы без привязки к дизайну сайта. Можно создать страницу с нуля, но она будет в формате Вашего сайта.
http://Ваш_сайт/Ваша_страница
- Для этого нужно создать файл .php с любым названием, и вставить в него вышеуказанные строки, для идентификации шаблона.
- Далее всё на Ваше усмотрение.
- Для примера, я добавил какой-то набор символов, и обернул его дивом с цветом фона и отступами.
- В админ-панели, создал пустую страницу с заголовком, и вот результат:
- Как видите, можно полностью с нуля создать нужный дизайн.
- Таким образом, можно создавать посадочные страницы (лендинг), прямо в формате Вашего сайта.
- Для внесения изменений, нужно просто отредактировать файл шаблона.
Сегодня мы рассмотрели тему: «Страницы со своим дизайном в Wоrdpress». Научились создавать шаблоны страниц под свои нужды. Смотрите также видео по теме.
Надеюсь статья была вам полезна. До встречи в новых статьях.
✍
С уважением, Андрей Бондаренко.
Видео на тему «Страницы со своим дизайном в Wоrdpress»:
Как создать собственный шаблон страницы WordPress
WordPress использует шаблоны и темы для создания макета веб-сайта. Но бывают случаи, когда вам захочется создать страницу с другим оформлением и оформлением. Например, у многих сайтов есть целевая страница, которая сильно отличается от остальной части сайта.
Вы можете создавать страницы с собственным дизайном и макетом, используя собственный шаблон страницы в WordPress. Это не так просто, как установить плагин — это требует небольшой практической работы.Но после того, как вы создали шаблон, в WordPress достаточно одного клика, когда он вам понадобится.
Мы будем работать с PHP и FTP, поэтому некоторые базовые знания о кодировании и загрузке файлов сайтов будут полезны. (Настройка шаблона также потребует работы с CSS, PHP и некоторым HTML.)
Но даже если у вас нет повседневного опыта кодирования, вы можете создать шаблон в WordPress. Просто следуйте инструкциям здесь, и к концу статьи ваш настраиваемый шаблон будет запущен.
Что может сделать для вас настраиваемая страница
Шаблон настраиваемой страницы может быть полезен, когда вам нужно создать отдельный внешний вид вашего основного веб-сайта. Это можно сделать в маркетинговых целях или для создания страницы, не связанной с общей темой вашего сайта.
Вы можете настроить страницу любым количеством способов, не оказывая негативного влияния на остальную часть вашего веб-сайта. Все, что вы измените на настраиваемой странице, не повлияет на остальную часть макета вашего сайта. Посмотрите на нее как на страницу, которая ведет себя независимо от остальной части вашего веб-сайта WordPress.
Создание пользовательского шаблона страницы
Для создания пользовательского шаблона мы воспользуемся текстовым редактором.
Если вы пользователь Windows, текстовый редактор Блокнота уже есть на вашем компьютере. Но любой текстовый редактор или редактор веб-сайтов (DreamWeaver, CoffeCup, Notepad ++, Atom Text, TextPad и т. Д.) Выполнит свою работу.
В этом уроке я использую редактор Sublime. Интерфейс вашего редактора, скорее всего, будет выглядеть немного иначе.
Шаг 1
Откройте текстовый редактор. На пустой странице введите эту строку кода:
& lt;? Php / * Имя шаблона: MyPageTemplate * /? & Gt;
Код сообщает WordPress, что это шаблон, и будет отображаться как MyPageTemplate .Вы можете использовать любое имя, какое захотите. Просто убедитесь, что это то, что вы узнаете позже.
Сохраните файл как файл php. Чтобы все было организовано, дайте файлу то же имя, что и имя шаблона, который вы использовали. Поэтому в моем случае я бы сохранил файл как MyPageTemplate.php .
Оставьте только что созданную страницу открытой в редакторе. Мы к этому вернемся.
Step 2
Теперь мы собираемся загрузить файл на наш веб-сайт WordPress, поэтому вам понадобится программа FTP.Если вы еще не используете программу FTP, попробуйте FileZilla. Смешное название, отличная программа FTP.
Вы также можете использовать FTP-файлы из проводника Windows или файлового менеджера cPanel для вашей учетной записи хостинга. Но в конечном итоге автономная программа FTP будет быстрее и эффективнее.
Итак, откройте свою программу FTP. Мы собираемся подключиться к нашему «корневому» каталогу WordPress. (Вы также можете увидеть каталоги, называемые папками .)
Моя установка WordPress называется «демонстрационной», поэтому мой корневой каталог WordPress выглядит следующим образом:
Вы можете увидеть файлы WordPress и три «wp- Каталоги.
Щелкните каталог / wp-content.
Затем щелкните каталог / themes.
В каталоге / themes вы увидите установленные на данный момент темы WordPress.
Теперь щелкните корневой каталог темы, которую вы используете. В моем случае это будет / двадцать девятнадцать.
Загрузите файл PHP пользовательской темы в каталог темы.
Теперь вы видите файл MyPageTemplate.php в корневом каталоге двадцать девятнадцать.
Через минуту мы снова воспользуемся программой FTP, поэтому пока не закрывайте ее.
Шаг 3
Войдите в админ панель WordPress.
Теперь, когда вы создаете новую страницу или редактируете существующую страницу, ваш настраиваемый шаблон доступен.
Я создал и сохранил новую страницу, используя свой собственный шаблон. Но когда я просматриваю его на своем веб-сайте, он остается пустым.
Это потому, что наш шаблон содержит только одну строку, которая его идентифицирует. В файле шаблона нет кода, указывающего WordPress, как отображать страницу.
Вот что мы сделаем дальше. Добавьте код в наш настраиваемый шаблон для отображения содержимого страницы.
Это не так сложно, как кажется. Мы собираемся упростить себе жизнь, скопировав существующий шаблон страницы темы. Мы будем использовать это в качестве основы для нашего пользовательского шаблона.
Step 4
Вернитесь в свою программу FTP.
В корневом каталоге темы, куда мы загрузили файл нашей пользовательской темы, найдите файл с именем page.php.
Загрузите его на свой компьютер.
Теперь откройте его в текстовом редакторе или редакторе веб-сайта.
Скопируйте содержимое page.php и вставьте его в свой собственный файл шаблона.
Наш настраиваемый шаблон теперь выглядит так:
У нашего настраиваемого шаблона страницы уже есть заголовок, поэтому мы собираемся вырезать раздел заголовка из кода, который мы скопировали из page.php.
Мы вырезаем раздел, который начинается с / * и заканчивается * / — это выглядит так:
После удаления заголовка наш настраиваемый шаблон страницы будет выглядеть так:
Сохраните настраиваемый файл шаблона страницы и снова загрузите его в корневой каталог темы.Он находится в том же месте, где мы загрузили первую версию файла.
Теперь, если вы перейдете на страницу своего сайта, которая использует новый шаблон, вы больше не увидите пустую страницу.
Взять свой собственный шаблон WordPress отсюда
Как вы, без сомнения, заметили, страница вашего настраиваемого шаблона выглядит так же, как остальная часть вашего существующего сайта. Это потому, что мы использовали шаблон страницы темы в качестве отправной точки.
С этого момента вам придется заняться более сложным кодированием, чтобы создать желаемую страницу.Но если вы хорошо разбираетесь в HTML или имеете некоторые базовые навыки работы с PHP, это будет вам доступно.
Чтобы дать вам простой пример, я добавлю изображение заголовка, добавив одну строку в файл шаблона. Строка — это тег изображения, который содержит путь к созданному и загруженному мной изображению заголовка.
Это небольшое редактирование дает страницам, использующим шаблон, изображение заголовка.
То, где вы берете собственный шаблон страницы, зависит от вашего собственного творчества.
Работает ли этот метод и для сообщений WordPress?
Это не так.Сообщения и страницы отображаются в WordPress по-разному. При этом есть плагины, которые позволяют создавать собственные шаблоны сообщений.
Могут ли ошибки или ошибки в шаблоне настраиваемой страницы сломать ваш сайт?
Нет. Красота пользовательского шаблона страницы в том, что он изолирован от остальных ваших сообщений и страниц. Таким образом, любые ошибки в вашем шаблоне влияют только на страницу или страницы, которые его используют. И если это произойдет, вы всегда можете изменить шаблон страницы обратно на шаблон страницы по умолчанию.Это устранит ошибку, пока вы не исправите свой шаблон.
Альтернативы нестандартного макета без кодирования
Если описанный здесь метод кажется слишком сложным, вы также можете создать собственный шаблон страницы WordPress с помощью плагина.
Также можно создать собственный макет с помощью компоновщика страниц. Page Builder от SiteOrigin дает вам возможность создавать уникальный дизайн, используя виджеты в содержимом.
Любой плагин является приемлемым вариантом. И есть много других конструкторов страниц, которые вы можете попробовать.Но то, как мы сделали это в этой статье, — это самый легкий вариант . Он не требует никаких дополнительных ресурсов, в то время как многие (большинство) плагины используют ресурсы памяти.
Пользовательские страницы имеют разные цели — от рекламы продукта или услуги до создания целевой страницы для кампаний. Имея немного знаний в области программирования или HTML, нет предела тому, что вы можете разрабатывать в WordPress.
Как вы думаете, вы будете использовать пользовательские страницы на своем сайте WordPress? Есть ли сайты, которые вы посещаете, чтобы изучить HTML или PHP? Дай мне знать в комментариях.
Полное руководство по шаблонам страниц WordPress
Одним из шаблонов, которые я всегда включаю в любую тему, код которой я кодирую, является файл page.php .
Это шаблон, который WordPress будет использовать для создания статических страниц. Полезно иметь специальный файл page.php вместо того, чтобы возвращаться к index.php , потому что вам нужно, чтобы на ваших страницах отображалось немного другое содержание, чем отдельные сообщения.
Например, в сообщение вы обычно включаете метаданные, такие как дата публикации и категории, в которые оно было добавлено, но на странице вы этого не сделаете.
WordPress также позволяет продвигать шаблоны страниц на шаг вперед, создавая собственные шаблоны страниц. Вы можете использовать их для создания нескольких шаблонов страниц, которые вы выбираете при настройке новой страницы на экранах администратора, или даже для создания шаблона страницы, который автоматически используется только одной страницей вашего сайта. Умно, а?
В этом посте я расскажу вам о вариантах шаблонов страниц и покажу, как их кодировать. Но сначала давайте углубимся в иерархию шаблонов WordPress, чтобы выяснить, какие файлы шаблонов WordPress использует при отображении статических страниц.
Как WordPress выбирает шаблоны для статических страниц
Как и все другие типы контента, WordPress будет использовать иерархию шаблонов при принятии решения, какой из файлов шаблонов в вашей теме (или ее родительской теме, если она есть) использовать при отображении статической страницы на вашем сайте.
Иерархия работает в следующем порядке:
- Если есть файл пользовательского шаблона страницы, и вы выбрали его для этой страницы, он будет использоваться вместо других файлов.
- Если пользовательского шаблона страницы нет (или если он есть, но не выбран для этой страницы), WordPress будет использовать slup page- $.php , где $ slug — это ярлык для этой страницы. Итак, если вы создали файл page-contact.php и у вас есть страница с ярлыком contact , он будет использовать его.
- Затем он ищет шаблон страницы с именем page- $ ID.php , где $ ID — это идентификатор страницы. Это похоже на использование slug — основное отличие состоит в том, что если вы измените slug страницы в админке, он все равно будет использовать этот файл шаблона, тогда как он перестанет использовать файл шаблона slug.
- Если ничего из вышеперечисленного не существует и есть файл с именем page.php , он будет использовать его.
- Если нет файла page.php , будет использоваться singular.php , если он у вас есть. В этом файле отображаются отдельные сообщения и страницы.
- Если в вашей теме нет ни одного из вышеперечисленных файлов, она вернется к использованию index.php .
Таким образом, вы можете включить в свою тему для данной страницы не менее шести файлов. Фактически у вас может быть более шести шаблонов страниц в вашей теме, если у вас есть несколько настраиваемых шаблонов страниц или несколько шаблонов с использованием ярлыка или идентификатора.Вам решать, насколько конкретными вы хотите быть.
Теперь давайте посмотрим, как вы создаете файл шаблона страницы.
Создание файла шаблона общей страницы
Файл шаблона для страниц, наиболее часто включаемых в темы, — это page.php . Если это единственный файл, который у вас есть для отображения страниц (в отличие от сообщений), то он будет использоваться для каждой статической страницы вашего сайта.
Чтобы создать этот файл шаблона, вы просто создаете в своей теме файл под названием page.php . Я часто начинаю с моего файла index.php или singular.php , делаю дубликат, который называю page.php , а затем редактирую его, удаляя ненужные мне элементы. В их число войдут:
- дат публикации
- категорий сообщений и тегов
- другие метаданные, такие как автор
- ссылка на предыдущий или следующий пост.
Создание чистого файла page.php , подобного этому, делает работу более эффективной.
Страница .php в теме фреймворка, которую я использую для всех своих проектов WordPress, очень прост:
Состоит из четырех вещей:
- вызов для получения файла заголовка
- цикл, который включает файл с именем loop-page.php
- вызов файла боковой панели
- вызов файла нижнего колонтитула.
Файл loop.php содержит только те части цикла, которые относятся к статическим страницам:
Обратите внимание, что у него есть один условный тег, который отображает заголовок страницы на других страницах, кроме домашней.Кроме того, это довольно стандартный цикл.
Создание файла пользовательского шаблона страницы
Другой вариант, который я часто использую в своих темах, — это настраиваемые шаблоны страниц. Вы можете использовать их для вывода различного контента на разных страницах или для различий в макете.
Во многих моих темах у меня есть шаблон страницы для полноразмерных страниц, который отличается от обычного файла page.php тем, что он не включает вызов боковой панели. Или он может это сделать, но использовать разные классы CSS, чтобы я мог отображать виджеты на боковой панели под основным содержимым, а не справа.
В моей теме есть файл с именем template-page-full-width.php , который представляет собой настраиваемый шаблон страницы. Вот код, который очень похож на page.php , но без боковой панели:
Часть этого файла, которая сообщает WordPress, что это настраиваемый шаблон страницы, — это строка с именем Template в начале. Затем я могу выбрать это на экране редактирования страницы в админке WordPress:
Я создал несколько шаблонов страниц на своем сайте: Страница полной ширины — это та, которая указана выше.Обратите внимание, что вам также потребуется изменить стиль для вашего контента и боковой панели в этом файле шаблона. В вашем файле style.css вам понадобится что-то вроде этого:
Важно не начинать имя файлов пользовательских шаблонов страниц с page- . Это связано с тем, что это может конфликтовать со слагом страницы или файлом шаблона идентификатора страницы, который вы создадите в будущем. Представьте, что вы создали файл шаблона page-full-width.php для описанного выше сценария. Затем представьте, что вы или кто-то другой, редактирующий ваш сайт, создали страницу с ярлыком на всю ширину .Эта страница будет автоматически использовать файл шаблона page-full-width.php из-за слага. Поэтому выберите префикс, который вы будете использовать для всех пользовательских шаблонов страниц (это не page — ), и используйте его.
Создание файла шаблона целевой страницы
Другой вариант, который у вас есть, — это создать файл шаблона для одной конкретной страницы вашего сайта. Вы можете настроить таргетинг на страницу по слагу или по идентификатору.
Итак, допустим, я хотел создать определенный шаблон страницы для моей страницы контактов.На моей странице есть ярлык из контакта и идентификатор 20 . Я мог создать либо файл page-20.php , либо файл page-contact.php .
Вам не нужно включать какой-либо специальный закомментированный текст в верхней части файла — хотя я бы порекомендовал это в качестве примечания для себя на случай, если вы вернетесь для редактирования этого файла в будущем и не сможете вспомнить, что это было. для.
Выбор цели для пули или идентификатора будет зависеть от двух вещей:
- Если вы считаете, что в будущем ярлык страницы может быть изменен (что более вероятно, если сайтом будет управлять несколько человек), используйте идентификатор.
- Если вы считаете, что идентификатор может измениться в будущем (более вероятно, если вы планируете перенести сайт таким образом, чтобы идентификаторы сообщений не сохранялись, например, с помощью инструмента Импортер вместо экспорта и импорта файлов базы данных), тогда нацелить пулю.
Целевой файл шаблона страницы полезен, если вы хотите отобразить дополнительный контент на данной странице вашего сайта. Итак, на моем сайте у меня есть одна страница, которая запускает стандартный цикл, а затем запускает другой цикл, используя WP_Query
, чтобы перечислить все книги, которые я опубликовал.Для этого я создал собственный шаблон страницы (используя описанную выше технику). Но если бы я был уверен, что не хочу использовать эту технику для какой-либо другой страницы в будущем, я мог бы удалить закомментированный текст и переименовать файл page-books.php , при этом книги были ярлыком для моего страница.
Это хорошая идея, если другие люди будут управлять вашим сайтом и добавлять страницы, и вы не уверены, что они выберут неправильный пользовательский шаблон страницы на экране редактирования страницы. Это также уменьшает путаницу.
Шаблоны страниц обеспечивают большую гибкость
Шаблоны страниц — полезный элемент тематической системы WordPress. Они позволяют отображать статические страницы по-разному, в виде отдельных сообщений и страниц архива, а также предоставляют дополнительные функции, которые можно использовать с отдельными страницами.
Попробуйте использовать настраиваемые шаблоны страниц или целевые шаблоны страниц, чтобы настроить способ отображения ваших страниц — это может быть очень эффективным.
Бесплатное видео
Почему 100 НЕ является идеальным показателем скорости загрузки страницы в Google (* 5 минут просмотра)
Узнайте, как использовать Google PageSpeed Insights, чтобы ставить реалистичные цели, повышать скорость работы сайта и почему стремиться к 100 баллам — НЕПРАВИЛЬНАЯ цель.
Теги:
Создание пользовательских шаблонов страниц в WordPress
Шаблоны страниц в WordPress — отличный способ добавить структурные вариации или настраиваемые функции на ваш сайт. Их легко создать, чтобы новички могли начать работу, но они обладают достаточным потенциалом, чтобы занять даже опытных профессионалов.
Вы можете начать работу с копирования шаблонов страниц из популярных тем, таких как тема WordPress по умолчанию Twenty Seventeen, и настройки, но вы также можете легко добавить свои собственные стили и Javascript.
В этой статье мы рассмотрим, что такое шаблоны страниц, а также то, как их можно использовать для улучшения своего сайта. Я также расскажу о том, как создавать шаблоны страниц с помощью кода, а также о том, как это сделать гораздо проще с помощью нашего плагина CustomPress.
Что такое шаблон страницы?
Как я уже упоминал во введении, шаблон страницы дает вам возможность отклоняться от существующей структуры вашего сайта в дополнение к добавлению новых функций. Twenty Fourteen включает в себя два отличных примера: страницу участника и страницу с полной шириной страницы.
Twenty Fourteen имеет шаблон страницы для участников.
На странице участников представлены новые функции: возможность перечислять авторов, которые внесли свой вклад в ваш веб-сайт. Шаблон полной ширины изменяет структуру страницы, удаляя боковую панель, уделяя больше внимания содержанию.
Twenty Eleven также предоставляет два шаблона страниц: шаблон витрины и шаблон боковой панели. Шаблон боковой панели дает вам старую добрую боковую панель на вашей странице, на странице-витрине сначала отображаются прикрепленные сообщения, а затем список последних сообщений.
Темы
Premium, в частности, такие как добавление многочисленных шаблонов страниц к темам для создания точных до пикселя контактных форм, настраиваемых списков сообщений, настраиваемых списков авторов и многого другого.
Создание шаблона страницы
Создать шаблон страницы очень просто. Создайте любой новый файл в своей теме и начните его с блока комментариев, например:
Если вы изменяете стороннюю тему, вам действительно следует использовать дочернюю тему. Если вы не знаете, как его создать, прочитайте замечательную статью Рэлин Уилсон «Как создать дочернюю тему WordPress».
Файлы шаблонов страниц могут находиться в подкаталоге — это мой любимый метод. Обычно я создаю каталог templates
и храню их там.
После создания шаблон страницы отобразится в модуле атрибутов страницы, который, если вы не знаете, находится в правой части экрана в бэкэнде экрана редактирования страницы. Если вы выберете его и обновите сообщение, код из вашего файла шаблона будет использоваться для отображения страницы. Попробуйте использовать следующий код шаблона:
Наш настраиваемый шаблон показан в админке
. Обратите внимание, что «Hello There» — это все, что видно; с шаблонами страниц вы сами.Вы должны вызвать заголовок, нижний колонтитул и другие элементы страницы, если они вам нужны.
Давайте создадим базовый шаблон страницы, который будет сливаться с Twenty Fourteen:
Я уверен, что новички в коде WordPress задыхаются от скачка сложности между двумя предыдущими примерами. Мой маленький секрет — обман. Я просто зашел в файл шаблона в теме Twenty Fourteen и скопировал его. Я снял петлю, которая нам не нужна.
Если в вашей теме нет файлов шаблонов, вы можете попробовать скопировать индекс .php
и удалив цикл в качестве отправной точки.
Создание полезных шаблонов страниц
Иметь шаблон страницы — это хорошо, но мы действительно должны добавить в него что-нибудь полезное. С этого момента это полностью зависит от вас, если вы можете кодировать его на PHP / HTML, вы можете его использовать.
Вот несколько идей, которые помогут вам начать работу:
- Пользовательская страница контактов с Google Maps и контактной формой
- Страница со списком новейших сообщений из каждой категории
- Страница архива со списком пяти новых сообщений и сообщений категорий из трех ваших основных категорий
- Страница карты сайта со всем вашим контентом (сообщениями и страницами)
- Страница со списком недавно загруженных изображений
- Список сообщений, отсортированный по количеству комментариев, составляет
- Список сообщений, в котором показаны сообщения, отсортированные по времени последнего обновления
- Список авторов и их три самых популярных сообщения
- Специально разработанная страница для вашего портфолио
Вот как вы можете перечислить сообщения в алфавитном порядке с помощью шаблона страницы в Twenty Fourteen:
Опять жульничество! Я вошел в индекс .php
в Twenty Fourteen и скопировал весь цикл. Мне нужно было создать новый объект запроса, поэтому я создал переменную $ custom_posts
и использовал ее на протяжении всего цикла.
Добавление параметров
Шаблоны сообщений становятся действительно интересными, когда вы добавляете к ним параметры. Вы можете сделать это, зарегистрировав мета-блоки, но это добавит в статью значительный несвязанный код, так почему бы снова не обмануть?
Один из моих любимых плагинов Advanced Custom Fields может сделать за нас тяжелую работу.
Давайте создадим специальный шаблон страницы, где пользователи смогут выбирать порядок расположения сообщений на странице.
Сначала установите расширенные настраиваемые поля. Затем создайте шаблон страницы, используя код из нашего предыдущего примера, приведенного выше. Убедитесь, что имя шаблона — «Пользовательский список сообщений», чтобы вы могли использовать наш пример импорта ниже.
Следующим шагом является создание наших настроек с использованием дополнительных настраиваемых полей. Вы можете создать свои собственные, убедившись, что они отображаются только в новом шаблоне страницы, или вы можете импортировать XML-файл в этот архив с помощью импортера WordPress, который можно найти в Инструменты> Импорт .
Я создал заказ, и заказ, установив. Это будет импортировано в ваши настройки ACF.
После этого вы можете создать страницу и выбрать шаблон «Пользовательский список сообщений». Вы должны увидеть две опции, сгруппированные во всплывающем мета-поле под редактором. Установите для них все, что хотите, и давайте приступим к использованию этих настроек в нашей теме.
Наши новые настройки для конкретных шаблонов
Все, что вам нужно знать, это ключ заказа, задав значение order_by
, ключ для настроек заказа — order
(никаких сюрпризов).Мы можем получить значение этих полей с помощью функции get_field ()
, предоставляемой ACF. Все, что нам нужно сделать, это заменить выбранные пользователем значения в наш объект WP_Query
из предыдущего:
Создание шаблонов страниц с помощью CustomPress
Если вы не слишком хорошо знакомы с созданием собственного шаблона страницы, в лучшем случае он определенно может быть ошеломляющим. Если вы профессионал, это может занять много времени и утомить. Вот почему более чем удобно использовать плагин для создания нужных вам шаблонов страниц.
Вы можете выбрать нужные параметры в простом интерфейсе, и через несколько минут ваш шаблон будет готов, и вы сможете использовать его сразу же или стилизовать его с помощью CSS по мере необходимости. Наш плагин CustomPress делает это и избавляет от утомительности и утомительности, экономя ваше время.
Установить быстро и легко, и как только вы это сделаете, вы будете готовы приступить к созданию нового шаблона страницы. Вы также можете создать любой пользовательский тип сообщения от вложения до страниц сообщений. Все включено.
Кроме того, если вы уже являетесь участником WPMU DEV, CustomPress лучше, чем бесплатный, поскольку вам не нужно подписываться ни на что другое или заполнять какие-либо формы. Вы можете сразу скачать его и приступить к созданию шаблона страницы. Если вы еще не являетесь участником, вы все равно можете получить CustomPress бесплатно.
Вы можете подписаться на бесплатную 14-дневную пробную версию и загрузить CustomPress. Даже если вы отмените, CustomPress будет вашим, и вы сможете продолжать его использовать. Если вы хотите, вы можете продолжить свое членство и получать будущие обновления, экспертную поддержку премиум-класса, все другие наши более 100 плагинов и курсы WordPress в нашей Академии.удаленное управление сайтом с помощью Hub, где вы можете
Вы также получаете удаленное управление сайтами с помощью Hub, где вы можете связывать свои сайты и получать время безотказной работы и мониторинг черного списка, необходимые средства безопасности и другие регулярно появляющиеся функции.
Сложно все перечислить, но их так много, как если бы грузовик с деньгами был доставлен к вам домой. Почти.
Начало работы
Вот как вы можете использовать CustomPress для создания шаблона страницы. Вы можете найти полную информацию об установке и настройке на странице CustomPress во вкладке использования.
Я создам страницу с витриной продукта, чтобы показать вам все, что нужно. Перед началом работы важно спланировать шаблон страницы, чтобы вы могли быстро выполнить настройку.
Я создал бизнес вымышленных плагинов, поэтому моя витрина продукта будет представлять собой полноценный шаблон страницы продаж, который я могу использовать для каждого плагина.
Помимо того, что вы хотите создать шаблон страницы или тип сообщения, полезно также знать:
- Нужны ли вам пользовательские категории или теги
- Необходимые настраиваемые поля
- Если вы хотите, чтобы шаблон страницы был общедоступным или частным
- Имя, которое вы хотите использовать для шаблона страницы
- Нужны ли вам определенные возможности типа поста
- Если у вас многосайтовая сеть, хотите ли вы, чтобы дочерние сайты создавали собственные шаблоны страниц?
Если у вас есть приблизительный план, вы можете установить CustomPress.В витрине моего продукта у меня будет изображение, и я хочу отобразить определенные характеристики, такие как номер версии плагина.
Когда вы впервые устанавливаете CustomPress, вы можете включить его для всей сети в Multisite или для каждого сайта. Если вы решите активировать CustomPress по сети, только суперадминистратор может создавать шаблоны страниц или настраиваемые типы сообщений, но дочерние сайты могут их использовать. Если вы включите его для каждого сайта, каждый сайт, на котором активирован плагин, может создавать свои собственные типы сообщений и шаблоны для использования.
Вы можете получить все подробности на вкладке использования страницы CustomPress. Как только это будет сделано, вы можете создать шаблон страницы.
Настройки шаблона страницы
Перейдите в CustomPress> Content Types и нажмите кнопку Add Post Type на вкладке по умолчанию Post Types .
Нажмите кнопку Добавить тип сообщения , чтобы начать.
На первой панели под названием Тип сообщения введите имя в поле, которое вы хотите использовать во внутреннем коде.Имя, которое вы выбираете, должно состоять максимум из 20 символов, минимум из двух букв, и все буквы также должны быть строчными.
У вас также есть возможность использовать символы подчеркивания, но рекомендуется, чтобы ваше имя не начиналось с символа подчеркивания.
Введите системное имя для вашего шаблона страницы, которое будет использоваться в коде.
Вы можете следовать инструкциям по использованию CustomPress для получения подробной информации обо всех настройках и о том, как их настраивать, но есть еще пара настроек, которые важно охватить, чтобы специально создать шаблон страницы.
По умолчанию Capability Type установлен на post , что означает, что вы будете создавать собственный шаблон сообщения. Если вы хотите это сделать, это прекрасно, но если вы предпочитаете создать шаблон страницы, это необходимо изменить.
В разделе Capability Type установите флажок edit и введите page
в поле над ним, заменив сообщение
.
Отредактируйте Capability Type на страницу , чтобы добавить новый шаблон страницы.
В разделе Labels вы можете ввести удобные заголовки, которые вы хотите присвоить шаблону страницы и его ссылкам. В поле Name введите то, что вы хотите отображать на вкладке на панели администратора, чтобы получить доступ к шаблону страницы.
Вы также можете настроить имена для ссылок, которые перечислены на вкладке, например ссылок New Page и View Pages .
Введите понятные имена для шаблона страницы и ссылок на него.
Когда вы закончите, нажмите Добавить тип сообщения внизу, чтобы сохранить изменения и создать новый шаблон страницы. Вы можете проверить свою новую вкладку с именем, которое вы выбрали для нее в панели администратора, но для того, чтобы добавить какие-либо параметры для определенных типов контента, которые вам нужно отображать на своей странице, вам необходимо создать настраиваемые поля.
Добавление настраиваемых полей
Для моего бизнеса вымышленных плагинов и шаблона страницы демонстрации продуктов, который я создаю для него, мне нужно добавить несколько параметров в редактор, например версию плагина.
Перейдите на вкладку Настраиваемые поля и нажмите кнопку Добавить настраиваемое поле . Введите удобное имя, которое будет отображаться в редакторе, а также на странице, когда вы создадите свое первое имя с шаблоном.
Введите параметры для вашего настраиваемого поля, например его имя.
Также не забудьте выбрать имя шаблона страницы, который вы создаете в разделе Тип сообщения , чтобы ваш вариант мог появиться в редакторе, если вы включили пользовательский интерфейс. В поле Hide input для этого раздела типа сообщения введите все типы сообщений или шаблоны страниц, для которых вы, , не хотите, чтобы это настраиваемое поле отображалось в редакторе.
Для моего бизнеса над созданием вымышленных плагинов я бы не хотел, чтобы мое настраиваемое поле, отображающее версию плагина, отображалось в обычном редакторе сообщений и страниц, но я хочу, чтобы оно отображалось в шаблоне моей страницы. В этом случае я собираюсь выбрать несколько типов записей и страниц в списке, кроме моего настраиваемого шаблона страницы.
В поле Тип поля введите способ ввода информации пользователями для этого параметра поля. В случае с моим вымышленным бизнесом я хочу, чтобы я и мои сотрудники могли вводить номер версии в текстовое поле, поскольку по ходу разработки обязательно будет больше, чем несколько вариантов, поэтому я выбрал текстовое поле.
Выберите тип поля, которое вы хотите создать.
Вы можете выбрать множество других вариантов, и вот полный их список:
- Текстовое поле
- Многострочное текстовое поле
- Радиокнопки
- Флажки
- Выпадающий ящик
- Коробка с множественным выбором
- Выбор даты
- Загрузить
После выбора типа поля вы можете ввести любые дополнительные параметры. Например, вы можете ввести регулярное выражение для проверки информации текстового поля.Это полезно, если это поле будет использоваться для ввода адреса электронной почты. Вы можете использовать регулярное выражение, чтобы проверить адрес электронной почты и убедиться, что он действителен.
Если вы выберете другой тип поля, например флажки, различные параметры появятся динамически, так что вы сможете добавить соответствующие параметры, например параметры, которые пользователи должны щелкнуть в вашем поле.
Вы также можете ввести описание для своего поля, чтобы пользователи лучше понимали, что вводить или выбирать в вашем поле.
Когда вы закончите, нажмите кнопку Добавить настраиваемое поле внизу страницы.Теперь, когда вы перейдете на вкладку своего шаблона страницы и нажмете ссылку для создания новой страницы, вы должны увидеть опцию, появившуюся под редактором, если вы выбрали отображение пользовательского интерфейса.
Новое настраиваемое поле появится в редакторе для созданного шаблона страницы.
Вы почти закончили, но остался последний шаг, чтобы убедиться, что настраиваемое поле действительно отображается на вашей странице во внешнем интерфейсе.
Встраивание настраиваемого поля
Даже если вы видите свое настраиваемое поле в редакторе, оно не будет отображаться в шаблоне страницы, пока вы не добавите его с помощью небольшого фрагмента кода PHP или шорткода.К счастью, все это создано для вас, поэтому вам просто нужно подключить его.
Вы можете найти нужный код, перейдя на CustomPress> Content Types> Custom Fields tab и наведя курсор на заголовок настраиваемого поля. Щелкните ссылку Встроить код .
Вы можете найти код для встраивания вашего настраиваемого поля в настройках.
Ваш код должен динамически появляться прямо под ним. Вы можете скопировать и вставить то, что вам нужно.
Код PHP можно использовать в шаблоне страницы, созданном CustomPress.Вы должны найти этот файл в каталоге /wp-content/themes/your-theme/single-{post_name}.php . Вместо {post_name} вы должны увидеть фактическое системное имя, которое вы выбрали для своего шаблона страницы. В моем случае это было продуктов , поэтому мое имя файла было бы single-products.php .
Вы можете отредактировать файл и ввести код там, где вы хотите, чтобы ваше настраиваемое поле появилось в интерфейсе пользователя, а затем сохранить изменения.
Если вы предпочитаете использовать шорткод, вы можете просто вставить его в редактор страниц, где вы хотите, чтобы ваше настраиваемое поле отображалось так же, как и с любым другим шорткодом.
Настройка полей с помощью CSS
По умолчанию ваши настраиваемые поля записываются в виде обычного текста, но вы можете использовать CSS, чтобы настроить их так, чтобы они выглядели более изящно и так, как вы хотите.
Чтобы настроить поля с помощью CSS, необходимо использовать сгенерированный код внедрения PHP. Затем оберните код в пользовательские теги
Получение справки
Если по пути у вас возникнут какие-либо проблемы, наша экспертная группа поддержки готова помочь вам со всем, что вам нужно. Вы можете отправить заявку, проверить нашу поддержку в реальном времени или поискать в форуме поддержки, чтобы узнать, был ли уже дан ответ на ваш вопрос.
Вы также можете проверить страницу руководства Good Support Ticket, чтобы узнать, что включить в ваш запрос поддержки, чтобы мы могли помочь вам на максимальной скорости.
Все это включено в вашу подписку, поэтому вам не придется колебаться ни секунды, если вам понадобится помощь.Если вы еще не являетесь участником, вы все равно можете получить бесплатную поддержку с пробной подпиской.
Подведение итогов
Должно быть довольно очевидно, что добавляя параметры, вы можете создать совершенно новый опыт для администраторов и пользователей веб-сайта. Эта функциональность в сочетании с настраиваемым CSS и Javascript может привести к поразительной и мощной работе.
Будьте осторожны — большая сила влечет за собой большую ответственность! Добавление 100 параметров в шаблоны страниц только потому, что вы можете, — это не путь вперед.
Обязательно используйте эти знания с умом и создайте что-то действительно полезное для своих клиентов и для себя.
Бесплатное видео
Почему 100 НЕ является идеальным показателем скорости загрузки страницы в Google (* 5 минут просмотра)
Узнайте, как использовать Google PageSpeed Insights, чтобы ставить реалистичные цели, повышать скорость работы сайта и почему стремиться к 100 баллам — НЕПРАВИЛЬНАЯ цель.
Создание собственного шаблона страницы WordPress
Общие сведения о шаблонах страниц
Как правило, шаблоны страниц служат для отображения различного рода динамического содержимого на странице вашего веб-сайта.Но настраиваемые шаблоны страниц находятся в верхней части иерархии шаблонов, когда дело доходит до отображения этого содержимого на одной странице. Это означает, что WordPress проверит, выбран ли настраиваемый шаблон страницы на данной странице, и будет использовать его поверх любого существующего файла шаблона страницы, который может иметь ваша тема. Иерархия отдельных страниц в WordPress выглядит так:
Как видно выше, пользовательские шаблоны — единственные файлы, которым не нужно следовать определенному правилу именования, чтобы их можно было признать в качестве файлов шаблонов.Давайте обсудим, почему это так.
Пользовательский шаблон страницы состоит из двух отдельных частей: заголовок шаблона, , который регистрирует шаблон, и код , который создает содержимое страницы, которое отображается при выборе этого шаблона страницы. Заголовок шаблона — это простой комментарий, в котором указывается имя шаблона. Помимо этого, он может содержать дополнительную информацию, например, название или описание темы.
Комментарий начинается с метки Имя шаблона : после которого записывается имя шаблона.Кроме того, настраиваемый шаблон должен начинаться с открывающего тега PHP Php, в то время как закрывающий тег PHP может стоять сразу после комментария, позже в файле или вообще не идти, в зависимости от структуры оставшегося кода.
Php / * Имя шаблона: Мой собственный шаблон * /?>
Используя вышеупомянутый заголовок шаблона, вы можете зарегистрировать настраиваемый шаблон страницы с именем Мой настраиваемый шаблон . Как правило, при именовании настраиваемого шаблона страницы следует стремиться к тому, чтобы имя было легким для понимания.Это потому, что имя, которое вы даете своему шаблону, будет отображаться в качестве опции в раскрывающемся списке Атрибуты страницы на отдельной странице. Таким образом, название шаблона должно быть простым и понятным для всех, кто его использует.
Кроме того, начиная с обновления WordPress 4.7, вы можете создавать собственные шаблоны для других типов сообщений . Для этого необходимо указать , для какого типа сообщений создается шаблон для . Это делается путем добавления метки Тип сообщения шаблона : за которым следует список типов сообщений, для которых вы хотите, чтобы этот шаблон был доступен.
Для пояснения приведем пример заголовка шаблона Full Width Template , взятого из темы Twenty Twenty. Шаблон предназначен как для страниц, так и для сообщений, то есть его можно выбрать в разделе «Атрибуты страницы» на страницах, а также в разделе «Атрибуты публикации» в записях.
Php / ** * Название шаблона: шаблон полной ширины * Тип сообщения шаблона: сообщение, страница * * @ пакет WordPress * @ подпакет Twenty_Twenty * @since Twenty Twenty 1.0 * /
Имея эту информацию, вы должны быть готовы начать создавать свои собственные заголовки шаблонов. Итак, в следующих разделах мы можем сосредоточиться на самих шаблонах страниц.
Что касается кода, который идет под заголовком шаблона и создает содержимое страницы, есть много вещей, которые вы можете включить . Например, контент, вставленный в редактор, боковые панели, различные области виджетов, контент, связанный с настраиваемым типом публикации, дополнительный контент на основе условного оператора, который необходимо выполнить, и т. Д.
Возможности создания отдельных пользовательских шаблонов страниц практически безграничны и зависят только от того, что вам нужно, и от ваших навыков программирования. Один из способов начать создание этого кода - взять существующие шаблоны страниц вашей темы, скопировать и вставить их в новый файл, где вы сможете редактировать их код. В качестве альтернативы мы сделали несколько примеров шаблонов страниц для этой статьи, которые вы можете использовать. Мы рассмотрим их в следующем разделе.
Однако есть еще кое-что, что мы должны обсудить, прежде чем углубляться в эти примеры.В конце концов, когда вы закончите создание кода , последние шаги включают в себя сохранение файла в виде файла .php и его последующую загрузку в нужное место в вашей теме . Как мы упоминали ранее, пользовательские шаблоны страниц не нуждаются в определенном названии, чтобы их можно было интерпретировать как файлы шаблонов. Однако это также означает, что вы не можете называть их , используя какие-либо зарезервированные слова - страница, единственное число, индекс - или называть их, используя префикс page - поскольку WordPress будет интерпретировать их как специализированные шаблоны, предназначенные для только для одной страницы.Мы предлагаем называть файлы так же, как шаблоны, чтобы вам было легче отслеживать эти файлы.
После присвоения имени файлу настраиваемого шаблона страницы вам необходимо загрузить его на сервер через FTP. WordPress распознает следующие места как допустимые для загрузки файла настраиваемого шаблона: каталог активной родительской темы, каталог активной дочерней темы или подкаталог в любом из этих двух мест.
Как изменить шаблон страницы в WordPress
Шаблоны страниц можно применять только к страницам, чтобы изменить их формат.Его можно применить к отдельной странице , разделу страницы или к группе страниц .
Ваши файлы темы должны включать шаблон страницы по умолчанию (с именем: page.php). Он также может иметь один или несколько настраиваемых шаблонов страниц, например, для отображения содержимого в более широких столбцах.
Если вам нужна дополнительная информация о шаблонах страниц , перейдите по следующей ссылке.
Изменение шаблона страницы
Мы должны принять во внимание 2 сценария:
- первый - вы хотите изменить шаблон существующей страницы
- второй - вы хотите изменить шаблон на новую страницу
Первый сценарий - есть страница
Шаг 1:
Перейти на панель управления > Страницы > Все страницы .
Шаг 2:
Перейдите на одну из существующих страниц, которую вы хотите изменить, и выберите Quick Edit .
Шаг 3:
Перейдите к шаблонам , опциям , (1) , выберите один из доступных шаблонов и нажмите «Обновление » (2) .
Когда это будет сделано, нажмите кнопку Применить (3) .
Второй сценарий - новая страница
Шаг 1:
Перейти на панель управления > Страницы > Добавить новый .
Шаг 2:
После добавления New Page , он автоматически откроет редактор .
Перейдите на страницу Атрибуты и разверните (1) . Затем выберите один из вариантов, доступных для шаблона страницы (2) .
Параметры шаблона:
В следующем примере мы используем тему Hestia, , в которой доступно 5 шаблонов.
Обратите внимание, что это характерно для Hestia, и количество шаблонов может отличаться для каждой темы.
- шаблон по умолчанию - генерирует центрированный контент.
- полноразмерный шаблон - генерирует расширенный лево-правый контент.
- Страница с боковой панелью - вы должны также выбрать направление боковой панели (2)
- В папке активной темы есть как минимум один файл настраиваемого шаблона страницы.Если вы измените тему, шаблоны страниц в ранее активированной теме отображаться не будут.
- Вы просматриваете экран для редактирования страницы: шаблоны страниц , а не , являются опцией по умолчанию для сообщений или пользовательских типов сообщений.
Создайте свой собственный шаблон страницы WordPress
WordPress предлагает новым пользователям широкий спектр инструментов, тем и шаблонов для создания веб-сайта, который идеально демонстрирует их контент для продажи продуктов, привлечения новых клиентов или передачи вашего сообщения по всему миру.Эти функции доступны как в стандартном, так и в премиальном форматах, последний дает вам больше возможностей для презентации вашего бренда. Но что, если вы подозреваете, что в WordPress просто нет шаблона?
Введите настраиваемые шаблоны страниц.
Пользовательские шаблоны страниц WordPress отличаются от готовых шаблонов страниц тем, что они предлагают вам универсальность, творческие возможности для брендинга вашей страницы и возможность представить себя и свой контент так, как вам нравится. Конечно, создание и поддержка настраиваемых шаблонов страниц требуют больших вложений, но эта статья поможет вам начать свой путь.
Во-первых, давайте обсудим, почему вы можете захотеть рассмотреть уникальный шаблон страницы в первую очередь, когда есть так много заранее разработанных шаблонов на выбор.
Обратная сторона предварительно разработанных страниц
Заблокированная конструкция и конфигурация
Готовые страницы не дают вам возможности настраивать контент так, как вам хочется. Кроме того, он может не предоставить вам все функции конфигурации, которые вам нужны. Хотя некоторые шаблоны страниц включают в себя такие параметры, как боковые панели, полная ширина страницы или различные варианты заголовков, вероятность того, что они все вместе в точной комбинации, которую вы хотели бы, может быть низкой.
Раздутое кодирование
Предварительно спроектированные страницы могут иметь кодирование, не оптимальное для быстрой загрузки страницы. Как правило, клиенты хотят получить приятные впечатления от взаимодействия с вашим брендом в Интернете, и покупатель часто принимает во внимание отзывчивость сайта. Код, наполненный дополнительными виджетами или плагинами, может замедлить работу вашего сайта и оттолкнуть клиентов.
Безопасность
Некоторые бесплатные предварительно разработанные шаблоны содержат вредоносный или вредоносный код, включенный исходным автором.Вредоносный код может включать бэкдоры на ваш сайт, которые позволяют хакерам получать доступ к вашей информации и информации клиентов и запускаться бесплатно, чтобы сеять хаос. Кроме того, не всегда легко узнать, какие компании производят шаблоны страниц с хорошей репутацией.
Несмотря на все недостатки готовых шаблонов страниц, многие компании, блоггеры и веб-дизайнеры предпочитают настраиваемые шаблоны страниц при создании своих сайтов.
Преимущества настраиваемых шаблонов страниц WordPress
Универсальность
Создание шаблона страницы самостоятельно позволяет иметь все необходимые функции, и ни одну из тех, которых у вас нет! Гибкость настраиваемого шаблона ограничена только вашим творчеством и воображением, что позволяет вам брендировать свой сайт WordPress в соответствии с руководящими принципами вашего бренда и стратегическими целями.
Настройка
В настраиваемом шаблоне вы можете упорядочить все виджеты и параметры страницы, сохраняя при этом уникальный макет и формат, предоставляя вам лучшее из обоих миров.
Безопасность
Настраиваемый шаблон страницы позволяет вам контролировать кодирование, обеспечивая безопасность вашей страницы от хакеров или других злоумышленников. Имея возможность продемонстрировать свой бренд именно так, как вы хотите, почему не будет? вы решите инвестировать в уникальном шаблоне страницы WordPress! Давайте подробнее обсудим, как сделать так, чтобы ваш сайт выглядел и действовал именно так, как вы хотите, с некоторыми полезными советами для начала.
Простая настройка
Есть два подхода к настройке содержимого WordPress. Хотя вы можете полностью закодировать свою страницу, это также самое сложное. Более простой подход к внесению незначительных изменений в способ отображения вашего контента в предварительно разработанном шаблоне страницы - использование условных тегов.
Условный тег - это небольшой фрагмент кода, который сообщает WordPress выполнять определенное действие только в особых обстоятельствах, определенных владельцем страницы (вами).Например, вы можете использовать условный тег, чтобы показывать часть контента только на вашей домашней странице или только на другой странице вашего сайта.
Есть много условных тегов, которые вы можете использовать, но у нас есть несколько примеров ниже:
- is_page () : Триггеры на любой странице.
- is_front_page () : запускается только для содержимого, помеченного как ваша первая страница.
- is_category ($ category) : триггеры на страницах, связанных с определенной категорией
- is_author () : триггеры на страницах авторов (или страницах, связанных с конкретным автором).
- is_archive () : запускается на любом типе страницы архива, например, на страницах, отображающих категории, теги или авторов.
Использовать условный тег очень просто. Подключитесь к файлам своего веб-сайта через FTP, и вы увидите множество ключевых файлов и код в каждом из них. Найдите файл с именем page . php .
Если у вас есть спортивный бренд и вы хотите направить пользователей на покупку кроссовок, вы можете настроить таргетинг на тех клиентов, которые читают статьи о беге на вашем сайте.Отличный способ сделать это - отображать конкретный текстовый контент только на тех страницах вашего сайта, которые содержат контент, связанный с запуском. Давайте посмотрим, как это сделать, ниже:
Мы хотим отображать следующий текст на всех страницах, отнесенных к категории «работает» на нашем сайте WordPress: Ознакомьтесь с нашей беговой экипировкой в нашем интернет-магазине!
Мы могли бы использовать следующий код для добавления этого контента на наши страницы, отнесенные к категории «работающие» (если категории страниц поддерживаются темой):
if (is_category ('running')) {
echo «Ознакомьтесь с нашей ходовой частью в нашем интернет-магазине !!»;
}
Это означает, что фраза « Оцените нашу ходовую часть в нашем интернет-магазине!» будет отображаться только на страницах, отнесенных к категории «работающие».Все остальные страницы останутся такими, как были раньше.
Условные теги - это простой метод, который избавляет нас от длительной кривой обучения, необходимой для разработки совершенно нового шаблона страницы. Давайте посмотрим на другой пример условного тега.
Возможно, у вас есть блог или новостной сайт, который объединяет статьи от разных авторов, делая их доступными для ваших читателей на одном централизованном сайте WordPress. Вместо копирования и вставки текста, описывающего автора, на каждой новой странице, условный тег позволяет легко применить биографию или контактную информацию для конкретных авторов статьи.
В данном примере представим, что у нас есть автор, Джон Доу, который пишет несколько сообщений в блогах и статей для вашего сайта. Для каждой статьи Джона мы хотим иметь небольшой фрагмент текста биографии и способ связаться с ним. Что-то вроде «Джон - отмеченный наградами автор множества книг, статей и рассказов. Свяжитесь с ним прямо сегодня по телефону или электронной почте! ».
Мы можем использовать условный тег is_author , чтобы гарантировать, что каждая страница (или сообщение), автором которого он является, включает вышеупомянутое предложение.Код, который вы бы использовали, приведен ниже:
.
if (is_author ('John Doe')) {
echo "Джон - отмеченный наградами автор множества книг, статей и рассказов. Свяжитесь с ним прямо сегодня по телефону или электронной почте!";
}
Создание собственного шаблона страницы WordPress
Конечно, просмотрев множество доступных условных тегов, вы можете решить, что их просто недостаточно и они не полностью соответствуют вашим потребностям. Тогда вы понимаете, что вам действительно нужен уникальный шаблон страницы.Ниже мы описали, как приступить к созданию собственного шаблона, выполнив четыре простых шага.
# 1 Приготовьтесь к худшему
Принятие мер предосторожности перед внесением изменений в свой сайт WordPress имеет решающее значение для обеспечения того, чтобы вы не допустили ошибки, которая влияет на другие страницы и затем становится практически невозможной для исправления.
Во-первых, создайте резервную копию своего сайта. Полное резервное копирование позволяет легко отменить изменения, вызвавшие ошибки, что позволяет идентифицировать их и при необходимости изменять.Если вы столкнетесь с проблемой, которую не удается устранить, вы также можете восстановить сайт до версии из резервной копии, которая, как вы знаете, работает.
Кроме того, при создании собственного шаблона страницы намного проще создать дочернюю тему. Дочерняя тема - это копия вашей исходной предварительно разработанной темы, которую вы можете изменять и изменять, не затрагивая исходную версию. Кроме того, создание дочерней темы не позволяет другим бесплатным или платным темам от WordPress (или других поставщиков, таких как Themeforest) отменять ваши изменения во время будущих обновлений.Мы не хотим тратить время на создание и настройку шаблона страницы только для того, чтобы потерять его во время обновления из WordPress!
# 2 Создание и настройка шаблона страницы по умолчанию
Когда у вас будет готовая дочерняя тема, вы можете приступить к созданию нового шаблона страницы. Опять же, гораздо проще начать с копии шаблона по умолчанию, чем создавать его с нуля. Чтобы создать копию, войдите на свой сайт WordPress с помощью FTP, такого как FileZilla или любого другого, с которым вы, возможно, знакомы.
Как только вы войдете, перейдите к wp-content> themes в правом верхнем углу и найдите папку для вашей текущей темы.
Там вы найдете page.php (именно так, как мы описали ранее в этой статье!). Скопируйте этот файл, переименуйте копию, чтобы не путать ее с оригиналом, и сохраните где-нибудь на своем компьютере.
Поздравляем, вы готовы приступить к редактированию собственного шаблона страницы!
Вы можете редактировать шаблон в любом текстовом редакторе (например, в блокноте), и отличный способ начать - это отредактировать имя шаблона.Ниже приведен код для начала работы с шаблоном:
/ *
* Название шаблона: название вашего шаблона.
* description: описание вашего шаблона
* /
Вставьте имя вашего шаблона там, где код читается как «Имя вашего шаблона», и вставьте свое описание там, где код читает «Описание вашего шаблона».
Теперь у вас есть шаблон страницы WordPress, который можно изменять и настраивать для представления вашего контента именно так, как вы этого хотите.
# 3 Загрузите свой шаблон
После того, как вы изменили свой шаблон по своему желанию, самое время загрузить шаблон страницы на ваш сайт WordPress.Мы предлагаем снова использовать ваш FTP-клиент для этого шага (подробности см. В шаге 1). При загрузке шаблона есть два метода, чтобы ваша работа вступила в силу.
Во-первых, вы можете просто скопировать и вставить шаблон обратно в папку исходной темы вместе с оригиналом (не рекомендуется). Но лучше всего поместить его в папку дочерней темы.
# 4 Назначение вашего шаблона странице
На этом этапе мы сделали резервную копию нашего сайта, создали собственный шаблон и даже загрузили его на наш сайт WordPress.Мы должны закончить, правда? Не так быстро! Нам осталось выполнить еще один последний шаг, чтобы наша страница отображала наш контент именно так, как мы хотели.
После загрузки нового шаблона страницы в WordPress вы не увидите никаких изменений на своем сайте. Это потому, что шаблон еще не связан ни с одной страницей. Нам нужно связать его со страницей или страницами, на которые мы хотим повлиять.
Сначала откройте страницу, на которую вы хотите повлиять, и найдите поле с надписью , атрибуты страницы .
Появится раскрывающееся меню, содержащее ярлык шаблон - щелкните по нему, чтобы просмотреть все доступные шаблоны. Вы должны увидеть имя только что созданного шаблона. Выберите этот, чтобы связать его со страницей и увидеть эффекты вашего нового шаблона страницы!
Теперь, когда мы рассмотрели причины, по которым вам следует рассмотреть возможность настройки своего контента с помощью настраиваемого шаблона страницы WordPress, использования условных тегов для выполнения простых настроек и того, как создать и загрузить полностью настраиваемый шаблон страницы, вы готовы чтобы продемонстрировать контент вашего бренда так, как вы хотите!
Если вам нужна помощь в настройке шаблонов страниц, Belov Digital Agency всегда для вас.С глобальной командой дизайнеров, разработчиков и менеджеров проектов мы можем помочь вам создать сайт WordPress вашей мечты и реализовать красивую страницу для вашего бренда.
Наша миссия Belov Digital Agency - продвигать бизнес, с которым мы работаем. Мы используем инновационный дизайн и технологии веб-сайтов, чтобы вывести ваш бизнес на новый уровень.
Наш комплексный подход фокусируется на вашем уникальном бренде и бизнес-целях на каждом этапе пути.
Давайте отметим вас сегодня в Интернете, запланировав звонок с нами и получив бесплатное предложение для вашего проекта, которое включает подробный процесс, ожидаемые сроки и общую стоимость.Или, если у вас есть какие-либо другие вопросы, на которые нет ответов на нашем сайте, не стесняйтесь писать нам в нашем живом чате ниже.
Как использовать несколько тем WordPress на своих веб-страницах
Ваш веб-сайт часто является первым лидером взаимодействия с вашим брендом. Здесь также потенциальные клиенты совершают покупки, узнают о ваших продуктах и читают о миссии вашей компании.
Вот почему настройка вашего веб-сайта так, чтобы она точно представляла ваш бизнес, приветствовала посетителей и заставляла их проводить время на вашем веб-сайте, является неотъемлемой частью вашего роста.
Часть настройки дизайна вашего веб-сайта WordPress влечет за собой выбор темы. И поскольку вы уже знаете, что можете вносить индивидуальные настройки и изменения стиля в выбранную тему в шаблонах, публикациях и веб-страницах, это, естественно, приводит к вопросу:
Могу ли я использовать несколько тем в WordPress?
Может быть, вы хотите, чтобы ваша домашняя страница имела тему, отличную от остальной части вашего веб-сайта, чтобы она выделялась среди других веб-страниц и обеспечивала незабываемый прием для посетителей, или, может быть, вы хотите настроить страницы продуктов или услуг, чтобы лучше выделить свой бренд .
Оказывается, для этого есть приложение - фактически плагин.
Несколько тем: WordPress
В этой статье мы рассмотрим шаги, необходимые для использования нескольких тем на разных страницах вашего веб-сайта WordPress.
Используйте несколько тем для разных страниц WordPress
- Создайте резервную копию своего веб-сайта.
- Отключите плагины кеширования.
- Включите плагин для нескольких тем.
- Решите, где вы будете использовать несколько тем на своем веб-сайте.
- Измените и настройте свои темы.
- Обратите внимание на ограничения плагина.
1. Создайте резервную копию своего веб-сайта.
Чтобы подготовить свой сайт к работе с несколькими темами, вам сначала нужно выполнить полное резервное копирование вашего сайта WordPress, прежде чем вносить какие-либо изменения.
Это позволит сохранить каждый аспект вашего сайта таким, каким он был во время резервного копирования, включая все сообщения, ссылки, комментарии, дизайн и многое другое - на случай, если что-то будет стерто или ваш сайт будет поврежден.
Существует ряд причин, по которым ваш сайт может быть удален или поврежден, включая активацию нескольких тем на вашем сайте. Вот почему правильное резервное копирование вашего сайта так важно - у вас будет возможность эффективно восстановить свой сайт в случае потери любого контента.
2. Отключите плагины кеширования.
При включении новой темы вы, возможно, не сможете увидеть изменения, которые вы вносите на свой веб-сайт, из-за того, что плагины кеширования вызывают отображение более старых версий ваших страниц.Поэтому не забудьте отключить все плагины для кеширования WordPress.
Это позволяет вам в реальном времени просматривать изменения, которые вы вносите на свой сайт. Отключив плагины кеширования, вы не сможете видеть старые версии своего сайта при включении новых тем.
3. Включите плагин для нескольких тем.
Установите плагин для нескольких тем на своем веб-сайте - плагин, который вам понадобится, называется Multiple Themes.
Источник
4.Решите, где вы будете использовать несколько тем на своем веб-сайте.
После того, как вы установили плагин, перейдите к Appearance , чтобы просмотреть свой новый плагин. Теперь вы можете определить, где вы будете использовать несколько тем на своем веб-сайте.
Источник
Вы можете добавить новую тему на свою домашнюю страницу или на определенную веб-страницу на своем сайте - давайте рассмотрим, как это сделать дальше.
Измените тему на домашней странице
Чтобы использовать плагин Multiple Themes на своей домашней странице, перейдите в «Настройки»> «Домашняя страница сайта».Здесь вы можете выбрать другую тему для главной страницы вашего сайта в раскрывающемся меню. Выбрав тему, нажмите «Сохранить все изменения».
Источник
Есть несколько способов изменить тему на веб-странице - нет правильного или неправильного при выборе между этими вариантами. Это больше о предпочтениях и о том, чего именно вы пытаетесь достичь с помощью нескольких тем.
Изменение темы на веб-странице: метод первый
Первый вариант - выбрать и назначить разные темы для определенных веб-страниц или сообщений на основе постоянной ссылки или URL-адреса этой страницы.
Например, если вы хотите, чтобы все сообщения вашего блога с общей структурой URL имели одну и ту же тему, воспользуйтесь этим методом и выберите Префикс URL.
Для этого прокрутите вниз до параметра префикса URL-адреса и выберите его. Затем щелкните тему, которую хотите использовать, в раскрывающемся меню.
Наконец, введите префикс URL-адреса, который соответствует всем сообщениям вашего блога, например yourwebsite.com/blog. Затем нажмите «Сохранить все изменения».
Источник
Изменение темы на веб-странице - метод второй
Второй вариант - выбрать уникальную тему для определенных веб-страниц или сообщений на основе уникального ключевого слова.Плагин будет искать на вашей странице ключевое слово и применять выбранную тему везде, где ключевое слово указано в URL-адресе.
Для этого прокрутите вниз до раздела «Ключевое слово запроса» и щелкните нужную тему в раскрывающемся меню. Затем введите ключевое слово запроса в поле.
Например, если вы хотите изменить тему для всех отзывов на своем сайте, вы можете ввести «Отзывы» в поле «Ключевое слово запроса» и добавить его к каждому соответствующему URL-адресу.
Источник
Вы также можете использовать эту опцию, чтобы добавить значение запроса, чтобы уникальная тема была добавлена ко всем URL-адресам, содержащим ваше ключевое слово и значение.
Например, предположим, что у вас есть блог на вашем веб-сайте и вы хотите, чтобы определенная тема использовалась для писателя по имени Алиса. Вы должны ввести релевантное ключевое слово в поле Ключевое слово запроса (что-то вроде «Блог»), а затем ввести Алиса в поле с надписью Значение запроса . Затем нажмите Сохранить все Изменения . Все сообщения Алисы будут иметь одну и ту же тему.
После того, как вы решили, как и где вы будете реализовывать свои темы, вы можете дополнительно настроить их в Advanced Settings .Существуют варианты выбора тем, которые будут отображаться на всех страницах вашего веб-сайта, изменения основной темы веб-сайта, выбора тем, которые будут использоваться для определенных URL-адресов, и т. Д.
Например, если вы хотите добавить несколько тем к разным сообщениям и веб-страницам по отдельности, щелкните Расширенные настройки , выберите Для всех страниц и / или сообщений, и выберите темы по отдельности.
5. Измените и настройте свои темы.
Измените и настройте темы, выбрав Внешний вид > Параметры темы .Вы найдете руководство по различным способам настройки тем WordPress и подробные сведения о том, как вы можете просматривать эти изменения в предварительном просмотре, а также активировать их в соответствии с вашими конкретными потребностями.
Источник
Важно отметить, что когда вы применяете несколько тем к разным страницам и сообщениям, ваш веб-сайт не меняет автоматически текущую / активную тему. Вместо этого вам придется временно активировать новую тему, чтобы изменить и настроить ее соответствующим образом.
Для этого нажмите Настроить на вкладке Внешний вид и измените тему по своему вкусу. После завершения сохраните настройки и вернитесь к темам . Затем вы можете повторно активировать старую тему.
6. Обратите внимание на ограничения плагина.
Как и в любом другом случае, важно помнить об ограничениях плагина для работы с несколькими темами. Это позволит вам спланировать, как вы будете включать темы на свой веб-сайт.
Несколько тем WordPress в одном домене
Помните, что ваши единственные возможности, когда дело доходит до использования нескольких тем WordPress в одном домене, включают изменение темы вашей домашней страницы или темы одной из ваших веб-страниц или сообщений по URL-адресу или ключевому слову запроса.
Если вы хотите внести изменения в темы своего сайта каким-либо другим способом, вам придется создать другой веб-сайт с полностью новой темой, то есть создать многосайтовую сеть в WordPress.
Как это выглядит на практике
Вы назначили несколько страниц с разными темами на основе URL-адреса или ключевого слова, чтобы упростить работу над сайтом. Так как же это выглядит на практике?
Считайте вашу домашнюю страницу. Вы хотите, чтобы эта страница выделялась, привлекала внимание и способствовала привлечению внимания посетителей.Здесь вы можете использовать что-то вроде темы Twenty Twenty-One, которая жирная, простая и точная
Источник
Когда дело доходит до страниц продуктов, вам понадобится тема, предназначенная для демонстрации нескольких продуктов и позволяющая пользователям легко переходить по ссылкам и узнавать больше. Здесь стоит рассмотреть такую тему, как Storefront.
Источник
Также неплохо включить на свой сайт страницу «О нас», которая предлагает посетителям понять вашу миссию, ценности и цели.Подумайте об использовании чего-то вроде темы Go, которая проста и понятна, чтобы помочь направить внимание пользователя именно туда, куда вы хотите.
Источник
Начните использовать несколько тем в WordPress
Может быть, вы хотите, чтобы ваша домашняя страница выглядела совершенно иначе, чем остальная часть вашего веб-сайта WordPress. Возможно, вы хотите, чтобы одна из ваших веб-страниц выделялась среди других. Или, может быть, вы хотите определить определенные функции для каждой отдельной страницы.
Какой бы ни была причина, следуйте приведенным выше инструкциям, чтобы добиться уникального и индивидуального вида ваших страниц и сообщений WordPress.
Примечание редактора: этот пост был первоначально опубликован в январе 2019 года и был обновлен для полноты.
.