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

  1. Начните расти вместе с Cloudways уже сегодня!
  2. Мустасам Салим

Время чтения: 5 минут

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

Управляемый хостинг WordPress на оптимизированных облачных серверах

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

Узнайте, как Genesis Framework позволяет настраивать и создавать дочерние темы с нуля в среде WordPress.

Пользовательский шаблон страницы WordPress может быть использован для ряда целей. Некоторые идеи включают в себя:

  • Показать последние сообщения каждой категории
  • Вставить Google Map или любой скрипт
  • Список всех авторов.
  • Недавно загруженные изображения
  • Индивидуальный дизайн страницы для портфолио
  • Страница контактов

Внешний вид всех страниц и сообщений, созданных на веб-сайте WordPress, обрабатывается файлом шаблона с именем page.php . Создание или редактирование пользовательского шаблона страницы в WordPress требует базовых знаний HTML, CSS и PHP.

Просто открой любой Текстовый редактор и вставьте в него следующий код.

<? php / * Имя шаблона: PageWithoutSidebar * /?>

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

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

Войдите в свою панель хостинга. В этом примере я использую Cloudways - управляемый хостинг WordPress. Перейдите в папку / wp-content / themes . Откройте папку с текущей темой и загрузите туда файл PageWithoutSidebar.php .

php

Перейдите в Панель администратора WordPress > Страницы> Добавить новый . Вы можете увидеть новый пользовательский шаблон страницы, указанный справа.

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

Создайте новую страницу и установите для ее шаблона значение PageWithoutSidebar. После этого опубликуйте его.

После этого опубликуйте его

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

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

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

Теперь пришло время добавить несколько строк кода для отображения содержимого страницы.

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

Внешний вид страниц по умолчанию создается файлом page.php, расположенным в папке / wp-contents / themes / YOUR THEME / . Откройте page.php и скопируйте этот код.

&lt;? php get_header (); ?> <div id = "primary" class = "content-area"> <main id = "main" class = "site-main" role = "main"> &lt;? php // Запустить цикл. while (have_posts ()): the_post (); // Включить шаблон содержимого страницы. get_template_part ('template-parts / content', 'page'); // Если комментарии открыты или у нас есть хотя бы один комментарий, загрузите шаблон комментария. if (comments_open () || get_comments_number ()) {comments_template (); } // Конец цикла. ENDWHILE; ?> </ main> <! - .site-main -> &lt;? php get_sidebar ('content-bottom'); ?> </ div> <! - .content-area -> &lt;? php get_sidebar (); ?> &lt;? php get_footer (); ?>

Вставьте этот код в PageWithoutSidebar.php чуть ниже этой строки кода.

&lt;? php / * Имя шаблона: PageWithoutSidebar * /?>

Сохрани это!

Ваш полный файл PageWithoutSidebar.php будет выглядеть следующим образом.

&lt;? php / * Имя шаблона: PageWithoutSidebar * /?> &lt;? php get_header (); ?> <div id = "primary" class = "content-area"> <main id = "main" class = "site-main" role = "main"> &lt;? php // Запустить цикл. while (have_posts ()): the_post (); // Включить шаблон содержимого страницы. get_template_part ('template-parts / content', 'page'); // Если комментарии открыты или у нас есть хотя бы один комментарий, загрузите шаблон комментария. if (comments_open () || get_comments_number ()) {comments_template (); } // Конец цикла. ENDWHILE; ?> </ main> <! - .site-main -> &lt;? php get_sidebar ('content-bottom'); ?> </ div> <! - .content-area -> &lt;? php get_sidebar (); ?> &lt;? php get_footer (); ?>

Вернитесь на свою страницу и обновите ее. Вы увидите, что все работает так же, как и в стандартной теме WordPress Twenty Sixteen.

Вы увидите, что все работает так же, как и в стандартной теме WordPress Twenty Sixteen

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

Откройте файл PageWithoutSidebar.php . Прокрутите вниз до конца файла и удалите :

&lt;? php get_sidebar (); ?>

Это строка кода, которая получает боковую панель на странице. После удаления строки сохраните ее . Откройте URL страницы и боковой панели больше нет!

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

Вернитесь к PageWithoutSidebar.php и найдите:

<div id = "primary" class = "content-area">

Просто измените «content-area» на «site-content-fullwidth», и все готово. Обновите страницу, и содержимое будет на всю ширину.

Обновите страницу, и содержимое будет на всю ширину

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

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

Начните расти вместе с Cloudways уже сегодня!

Мы никогда не идем на компромисс в отношении производительности, безопасности и поддержки.

Мустасам Салим

Мустасам - менеджер сообщества WordPress в Cloudways - A Управляемый хостинг WordPress Платформа, где он активно работает и любит делиться своими знаниями с сообществом WordPress. Когда он не работает, вы можете найти его играющим в сквош со своими друзьями или защищающимся в футболе и слушающим музыку. Вы можете отправить ему электронное письмо по адресу [email protected]

Lt;?
Php / * Имя шаблона: PageWithoutSidebar * /?
Lt;?
Php get_header (); ?
ENDWHILE; ?
Php get_sidebar ('content-bottom'); ?
Php get_sidebar (); ?
Php get_footer (); ?
Lt;?
Php / * Имя шаблона: PageWithoutSidebar * /?