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

От автора: сегодня речь пойдет о целевой странице и о том, как создать шаблон для WordPress. Что это дает? Как известно, одной из целей веб-сайта является генерация лидов. Это можно сделать несколькими способами: у вас может быть форма, чтобы люди могли связаться с вами, вы можете предлагать людям создавать учетную запись при покупке товаров на вашем сайте или у вас может быть лидо-магнит, который вы даете в обмен на адрес электронной почты.

Что вы будете создавать

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

Эта страница называется целевой страницей. Это страница, предназначенная для того, чтобы стать частью вашей воронки продаж, генерировать лиды или продавать что-то. Цель этой страницы очень проста, и вы не хотите, чтобы люди делали что-нибудь еще, когда попадают на нее.

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

В этом руководстве я покажу вам, как создать шаблон такой страницы для вашей темы WordPress. Она не будет содержать ссылок на что-либо вне содержимого страницы. У посетителей страницы не будет других вариантов, кроме как нажать кнопку «Купить» или «Зарегистрироваться».

Для этого мы будем работать с несколькими файлами в нашей теме:

Давайте начнем!

Что вам понадобится

Чтобы следовать этому руководству, вам понадобятся:

Начальная страница

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

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

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

Сначала вам нужно создать шаблон целевой страницы. Сделайте это одним из двух способов:

Не задавайте имя файла, начинающееся с page-, так как это запутывает WordPress, если позже вы создадите страницу с помощью слага, используемого после page-. Я назову свой файл шаблона landing-page-template.php.

Теперь откройте этот файл шаблона. Добавьте вверху следующую строку кода:

*/
Template Name: Landing Page Template
/*

Сохраните файл, и теперь вы увидите, что вы можете выбрать этот шаблон при создании новой страницы на своем сайте:

Теперь удалите из файла боковую панель. Найдите эту строку:

<?php get_sidebar(); ?>

… и удалите ее. Сохраните файл. Ваш новый шаблон страницы готов. Но мы еще не закончили.

Редактирование файла заголовка

Следующий шаг — отредактировать файл header.php, чтобы удалить любые ссылки, когда используется этот шаблон страницы. Для этого мы будем использовать условный тег is_page_template().

Откройте файл header.php и найдите код для названия вашего сайта.

Примечание. Если вы используете стороннюю тему, создайте файл header.php в своей дочерней теме, который будет дубликатом файла из родительской темы, и отредактируйте его.

В моей теме это выглядит так:

<a href="<?php echo site_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> <?php bloginfo( 'name' ); ?>
</a>

Отредактируйте файл своей темы, чтобы он выглядел примерно так:

<h1 id="site-title"> <?php if ( is_page_template( 'landing-page-template.php' ) ) { bloginfo( 'name' ); } else { ?> <a href="<?php echo site_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> <?php bloginfo( 'name' ); ?> </a> <?php } ?> </h1>

Если используется шаблон целевой страницы, имя сайта все равно будет отображаться, но оно не будет отображаться как ссылка. Вам также необходимо удалить меню навигацию. Найдите код для своего меню. В моей теме это выглядит так:

<nav class="menu main"> <div class="skip-link screen-reader-text"> <a href="#content" title="<?php esc_attr_e( 'Skip to content', 'tutsplus' ); ?>"><?php _e( 'Skip to content', 'tutsplus' ); ?></a> </div> <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?> </nav><!-- .main -->

Отредактируйте файл так, чтобы весь код для меню помещался внутри условного тега, который проверяет, используем ли мы шаблон целевой страницы:

<?php if ( ! is_page_template( 'landing-page-template.php' ) ) { ?> <nav class="menu main"> <div class="skip-link screen-reader-text"> <a href="#content" title="<?php esc_attr_e( 'Skip to content', 'tutsplus' ); ?>"><?php _e( 'Skip to content', 'tutsplus' ); ?></a> </div> <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?> </nav><!-- .main --> <?php } ?>

Если в вашем файле заголовка есть какие-либо другие меню или ссылки, заключите их в такие же теги — то же касается виджетов. Теперь сохраните файл header.php и закройте его.

Редактирование файла футера

Заключительный этап — обеспечить, чтобы в футере не отображались какие-либо области виджетов. Мы будем использовать тот же условный тег, чтобы выводить области виджетов, только если не используется шаблон целевой страницы.

Откройте шаблон footer.php (или создайте дубликат в дочерней теме, если это необходимо). Найдите код для вывода виджетов. Вот мой:

<div class="fatfooter"> <?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) { ?> <div class="one-third left widget-area first"> <?php dynamic_sidebar( 'first-footer-widget-area' ); ?> </div><!-- .first .widget-area --> <?php } ?> <?php if ( is_active_sidebar( 'second-footer-widget-area' ) ) { ?> <div class="one-third left widget-area second"> <?php dynamic_sidebar( 'second-footer-widget-area' ); ?> </div><!-- .first .widget-area --> <?php } ?> <?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) { ?> <div class="one-third left widget-area third"> <?php dynamic_sidebar( 'third-footer-widget-area' ); ?> </div><!-- .first .widget-area --> <?php } ?> </div>

Теперь оберните это в условный тег так же, как и в файле заголовка.

<?php if ( ! is_page_template( 'landing-page-template.php' ) ) { ?> <div class="fatfooter"> <?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) { ?> <div class="one-third left widget-area first"> <?php dynamic_sidebar( 'first-footer-widget-area' ); ?> </div><!-- .first .widget-area --> <?php } ?> <?php if ( is_active_sidebar( 'second-footer-widget-area' ) ) { ?> <div class="one-third left widget-area second"> <?php dynamic_sidebar( 'second-footer-widget-area' ); ?> </div><!-- .first .widget-area --> <?php } ?> <?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) { ?> <div class="one-third left widget-area third"> <?php dynamic_sidebar( 'third-footer-widget-area' ); ?> </div><!-- .first .widget-area --> <?php } ?> </div> <?php } ?>

Затем нам нужно внести поправки в раздел информации. Это может быть ссылка на вашу домашнюю страницу и / или на сайт WordPress. Вот мой:

<section class="colophon" role="contentinfo"> <small class="copyright left"> Copyright <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> <?php bloginfo( 'name' ); ?> </a> </small><!-- #copyright --> <small class="credits right"> Proudly powered by <a href="http://wordpress.org/">WordPress</a>. </small><!-- #credits --> </section><!--#colophon-->

Теперь используйте условный тег для вывода на целевой странице раздела информации без ссылок:

<?php if ( is_page_template( 'landing-page-template.php' ) ) { ?> <section class="colophon" role="contentinfo"> <small class="copyright left"> Copyright <?php bloginfo( 'name' ); ?> </small><!-- #copyright --> <small class="credits right"> Proudly powered by WordPress. </small><!-- #credits --> </section><!--#colophon--> <?php } else { ?> <section class="colophon" role="contentinfo"> <small class="copyright left"> Copyright <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> <?php bloginfo( 'name' ); ?> </a> </small><!-- #copyright --> <small class="credits right"> Proudly powered by <a href="http://wordpress.org/">WordPress</a>. </small><!-- #credits --> </section><!--#colophon--> <?php } ?>

Дважды проверьте файл футера на наличие других ссылок и, если они есть, оберните их в условный тег.

Настройка стилей

Вы можете обнаружить, что после удаления боковой панели из шаблона целевой страницы, вам нужно настроить стиль для контента. Если область контента по-прежнему занимает только две трети экрана, вы можете использовать для шаблона страницы класс body, сгенерированный WordPress, чтобы исправить это.

Итак, предположим, у вас есть следующий стиль для контента и боковой панели:

.content { float: left; width: 65%;
}
.sidebar { float: right; width: 32%;
}

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

.page-template-landing-page-template .content { width: 100%;
}

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

Окончательная страница

Вот моя целевая страница без ссылок:

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

Надеюсь, ваша целевая страница принесет пользу вашему бизнесу. Удачи!

Автор: Rachel McCollin

Источник: https://code.tutsplus.com/

Редакция: Команда webformyself.