В WordPress, как правило, каждая страница наследует общий макет сайта, включающий шапку (header), меню, боковую панель (sidebar) и подвал (footer). Однако, в некоторых случаях возникает потребность в создании страницы, свободной от этих элементов. Это может быть обусловлено маркетинговыми задачами, требованиями к дизайну или необходимостью предоставить пользователю контент без отвлекающих факторов.
Объяснение потребности в кастомных страницах
Стандартный макет WordPress оптимизирован для навигации по сайту и предоставления общей информации. Однако, когда требуется сконцентрировать внимание пользователя на конкретном контенте, наличие шапки, меню и боковой панели может отвлекать и снижать конверсию. Кастомные страницы позволяют полностью контролировать пользовательский опыт и адаптировать страницу под конкретную цель.
Примеры использования: целевые страницы, страницы продаж, специальные акции
Страницы без шапки, меню, боковой панели и подвала часто используются для:
- Целевых страниц (landing pages): Оптимизированные страницы для привлечения трафика из рекламных кампаний, где важно, чтобы пользователь сосредоточился на конкретном предложении.
- Страниц продаж: Сосредоточены на убеждении пользователя совершить покупку, не отвлекая его навигацией по сайту.
- Страниц специальных акций и конкурсов: Страницы, предназначенные для продвижения определенного события или предложения, где важна максимальная концентрация внимания.
- Страниц благодарности после подписки или покупки: Упрощенный дизайн помогает пользователю оставаться сосредоточенным на завершении транзакции.
Преимущества страниц без шапки, меню, боковой панели и подвала
- Улучшенная конверсия: Устранение отвлекающих элементов повышает вероятность совершения целевого действия.
- Сосредоточенность на контенте: Пользователь видит только необходимую информацию, что улучшает восприятие.
- Гибкий дизайн: Полный контроль над макетом страницы позволяет реализовать уникальные дизайнерские решения.
- Увеличение скорости загрузки: Удаление лишних элементов может положительно сказаться на скорости загрузки страницы, особенно на мобильных устройствах.
Способ 1: Использование шаблонов страниц WordPress
Шаблоны страниц – это мощный инструмент WordPress, позволяющий определять структуру и внешний вид отдельных страниц. Создание кастомного шаблона – это надежный способ получить страницу без стандартных элементов.
Создание нового шаблона страницы в WordPress
- Создайте новый файл в папке с темой (например,
wp-content/themes/ваша-тема/template-blank.php). - Добавьте следующий код в начало файла:
<?php
/**
* Template Name: Blank Page
*/
get_header(); // Только для примера - обычно здесь ничего не нужно
?>
<main>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
the_content();
}
}
?>
</main>
<?php
get_footer(); // Только для примера - обычно здесь ничего не нужно
?>
Редактирование шаблона: удаление шапки, меню, боковой панели и подвала
Чтобы создать полностью пустой шаблон, удалите вызовы функций get_header() и get_footer().
<?php
/**
* Template Name: Blank Page
*/
?>
<main>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
the_content();
}
}
?>
</main>
Этот код создаст шаблон, который будет отображать только контент страницы.
Применение созданного шаблона к нужной странице
- Перейдите в админ-панель WordPress.
- Откройте страницу, для которой хотите использовать шаблон.
- В метабоксе «Атрибуты страницы» выберите созданный шаблон («Blank Page») в выпадающем списке «Шаблон».
- Сохраните страницу.
Дополнительные настройки и кастомизация шаблона
Вы можете добавить в шаблон любой HTML и PHP код, необходимый для реализации желаемого дизайна. Например, можно добавить собственные стили CSS или JavaScript.
Способ 2: Использование плагинов для создания страниц без стандартных элементов
Многие плагины для создания страниц (page builders) предоставляют возможность создавать страницы без шапки, меню и подвала. Это удобно, так как не требует написания кода.
Обзор популярных плагинов (например, Elementor, Beaver Builder, Divi)
- Elementor: Один из самых популярных page builders с интуитивно понятным интерфейсом и большим количеством шаблонов.
- Beaver Builder: Надежный и удобный плагин с drag-and-drop интерфейсом.
- Divi Builder: Мощный плагин от Elegant Themes с широкими возможностями кастомизации.
Установка и активация выбранного плагина
- Перейдите в раздел «Плагины» -> «Добавить новый» в админ-панели WordPress.
- Найдите выбранный плагин через поиск.
- Установите и активируйте плагин.
Создание новой страницы с использованием плагина и настройка отображения
- Создайте новую страницу в WordPress.
- Нажмите кнопку «Редактировать в [название плагина]».
- В настройках страницы плагина найдите опцию для выбора шаблона или отключения шапки, меню и подвала.
- Создайте контент страницы, используя инструменты плагина.
Настройка плагина для удаления стандартных элементов страницы
Большинство page builders имеют настройки, позволяющие отключить шапку, подвал и другие элементы. Обычно это делается через выбор шаблона «Blank» или отключение соответствующих опций в настройках страницы.
Способ 3: Скрытие элементов с помощью CSS
Этот метод предполагает использование CSS для скрытия ненужных элементов. Это быстрый способ, но он не удаляет элементы из HTML-кода, а лишь скрывает их.
Определение CSS-классов или ID для скрытия элементов
Используйте инструменты разработчика в браузере (обычно вызываемые нажатием клавиши F12) чтобы определить CSS-классы или ID элементов, которые нужно скрыть. Например, для скрытия шапки можно использовать класс .site-header или ID #masthead.
Добавление CSS-кода в тему или с помощью плагина для CSS
- Перейдите в раздел «Внешний вид» -> «Настроить» -> «Дополнительные стили (CSS)» в админ-панели WordPress.
- Добавьте следующий CSS-код:
.site-header,
#masthead,
.site-footer,
#colophon,
.sidebar,
#secondary {
display: none !important;
}
Замените .site-header, #masthead, .site-footer, #colophon, .sidebar, #secondary на актуальные классы и ID вашего сайта. Использование !important гарантирует, что ваши стили переопределят стили темы.
Также можно использовать плагины для добавления CSS, например, «Simple Custom CSS» или «Additional CSS».
Преимущества и недостатки использования CSS для скрытия элементов
- Преимущества: Быстрота и простота реализации.
- Недостатки: Элементы остаются в HTML-коде, что может незначительно влиять на скорость загрузки. Скрытые элементы все равно будут загружаться браузером, что может быть неэффективно.
Рекомендации по оптимизации CSS для скорости загрузки страницы
- По возможности, избегайте использования
!important. - Используйте специфичные селекторы, чтобы избежать конфликтов с другими стилями.
- Минимизируйте CSS-код (удалите пробелы и комментарии).
- По возможности, объедините CSS-файлы в один, чтобы уменьшить количество HTTP-запросов.
Заключение: Выбор оптимального способа и дальнейшие шаги
Выбор способа создания страницы без стандартных элементов зависит от ваших потребностей и навыков. Использование шаблонов страниц – это надежный способ, требующий некоторого знания PHP и HTML. Плагины для создания страниц – удобный вариант для тех, кто предпочитает визуальный редактор. Скрытие элементов с помощью CSS – быстрый, но менее эффективный метод.
Сравнение рассмотренных способов и рекомендации по выбору
- Шаблоны страниц: Лучший выбор для сложных задач и уникального дизайна.
- Плагины для создания страниц: Оптимальный вариант для пользователей без опыта программирования.
- CSS: Подходит для быстрых изменений и простых задач.
Оптимизация страницы для SEO и удобства пользователей
Независимо от выбранного способа, важно оптимизировать страницу для SEO и удобства пользователей. Убедитесь, что страница имеет уникальный заголовок, мета-описание и контент. Проверьте, что страница быстро загружается и корректно отображается на различных устройствах.
Тестирование страницы на различных устройствах и браузерах
Обязательно протестируйте созданную страницу на различных устройствах (компьютеры, планшеты, смартфоны) и в разных браузерах (Chrome, Firefox, Safari, Edge), чтобы убедиться, что она корректно отображается и функционирует.