Настройка шаблонов страниц в WordPress — урок 23

Шаблоны страниц в WordPress добавлять очень просто, если необходимо стилизовать шаблон для всех страниц, то можно в корне темы создать файл page.php. Создадим файл и поместим туда код из файла single.php. Шаблон создан, далее можно будет убирать и добавлять что-то свое (новые элементы оформления, дополнительные сайдбары, меню …).

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

wordpress create page themplate

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

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

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

В корне вашей темы есть файл с именем onecolumn.html, переименуем его на tmp-onecolumn.php, приставку tmp мы добавляем, чтобы в дальнейшем не путаться где шаблоны страниц, а где другие файлы. После переименования файла, добавьте в верхнюю часть шаблона комментарий вида:

wordpress create first themplate - курсы по wordpress

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

wordpress create top area - курсы по wordpress

создать нижнюю часть шаблона - курсы wordpress

Для того чтобы шаблон начал работать мы должны указать для какой именно страницы его необходимо применить. Заходим в панель администратора -> Страницы -> about и выберем новый шаблон и обновим страницу.

Выбор шаблона на странице wordpress

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

Заменяем содержимое тега <section> на код который мы уже использовали в шаблоне page.php, а именно на вот такой:

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

Видоизменим код вывода миниатюры

Меняем вот этот код:

На вот такой:

До изменения кода.

wordpress страница без картинки

После изменения кода.

wordpress страница без миниатюры

Я думаю, из изображений приведенных выше понятно, о каком исправлении шла речь. Исправьте также вывод миниатюры в файлах archive.php, single.php и page.php самостоятельно.

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

Исходники текущего урока

zip wordpress theme archive


Купить хостинг WordPress
Репетитор по wordpress
Услуги репетитора онлайн. Список курсов которые я веду
  • Базовый курс по веб-дизайну;
  • Верстка сайтов;
  • Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
  • Разработка сайтов на PHP.
Подробнее читайте на странице репетитор по WordPress
*/

Николаенко Максим

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


Вам может также понравиться...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Шаблоны для WordPress
Самый лучший хостинг в Украине
Стабильный хостинг для Drupal