Создайте собственный шаблон страницы в теме WordPress

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 <? php get_header (); ?>

<div class = "content-area">
                <main class = "site-main" role = "main">
                                <? php
                                // Запускаем цикл.
                                в то время как (имеют_посты ()): the_post ();

                                                // Включаем шаблон содержимого страницы.
                                                get_template_part ('части шаблона / контент', 'страница');

                                                // Если комментарии открыты или у нас есть хотя бы один комментарий, загружаем шаблон комментария.
                                                if (comments_open () || get_comments_number ()) {
                                                                comments_template ();
                                                }

                                                // Конец цикла.
                                конец пока;
                                ?>

                </main> <! - .site-main ->

                <? php get_sidebar ('content-bottom'); ?>

</div> <! - .content-area ->

<? php get_sidebar (); ?>
<? php get_footer (); ?>

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

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

Сохрани это!

Ваш полный файл PageWithoutSidebar.php будет выглядеть, как показано ниже.

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

<? php get_header (); ?>

<div class = "content-area">

                <main class = "site-main" role = "main">

                                <? php

                                // Запускаем цикл.
                                в то время как (имеют_посты ()): the_post ();

                                                // Включаем шаблон содержимого страницы.
                                                get_template_part ('части шаблона / контент', 'страница');

                                                // Если комментарии открыты или у нас есть хотя бы один комментарий, загружаем шаблон комментария.
                                                if (comments_open () || get_comments_number ()) {

                                                                comments_template ();

                                                }

                                                // Конец цикла.
                                конец пока;

                                ?>

                </main> <! - .site-main ->

                <? php get_sidebar ('content-bottom'); ?>

</div> <! - .content-area ->

<? php get_sidebar (); ?>

<? php get_footer (); ?>

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

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

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

 <? php get_sidebar (); ?>

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

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

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

 <div class = "content-area">

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

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

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