От автора: сегодня речь пойдет о целевой странице и о том, как создать шаблон для WordPress. Что это дает? Как известно, одной из целей веб-сайта является генерация лидов. Это можно сделать несколькими способами: у вас может быть форма, чтобы люди могли связаться с вами, вы можете предлагать людям создавать учетную запись при покупке товаров на вашем сайте или у вас может быть лидо-магнит, который вы даете в обмен на адрес электронной почты.
Что вы будете создавать
Если вы используете лидо-магнит или у вас на сайте есть страница, специально предназначенная для продажи одной вещи — будь то подписка, услуга или продукт — тогда вы хотите, чтобы люди не покидали эту страницу, не купив что-то или, по крайней мере, не оставив свой адрес электронной почты.
Эта страница называется целевой страницей. Это страница, предназначенная для того, чтобы стать частью вашей воронки продаж, генерировать лиды или продавать что-то. Цель этой страницы очень проста, и вы не хотите, чтобы люди делали что-нибудь еще, когда попадают на нее.
Чтобы свести к минимуму вероятность ухода людей до того, как они купили что-то или зарегистрировались, вам нужно уменьшить количество ссылок на целевой странице. Она не должна содержать виджетов и навигационных меню. Вам не нужно, чтобы люди покидали страницу для просмотра вашего сайта. Даже ссылку на главную страницу в заголовке нужно вместе с информационными ссылками в переместить в самый низ страницы.
В этом руководстве я покажу вам, как создать шаблон такой страницы для вашей темы WordPress. Она не будет содержать ссылок на что-либо вне содержимого страницы. У посетителей страницы не будет других вариантов, кроме как нажать кнопку «Купить» или «Зарегистрироваться».
Для этого мы будем работать с несколькими файлами в нашей теме:
Мы создадим новый пользовательский шаблон страницы для целевых страниц.
Мы отредактируем файл заголовка, чтобы при отображении этого шаблона ссылки отсутствовали.
Мы отредактируем файл футера, чтобы удалить виджеты и любые информационные ссылки.
Давайте начнем!
Что вам понадобится
Чтобы следовать этому руководству, вам понадобятся:
Рабочая установка WordPress — не добавляйте целевую страницу на сайт, пока вы ее не протестировали.
Тема, которую вы можете редактировать. Если это сторонняя тема, создайте дочернюю тему и отредактируйте ее.
Редактор кода.
Начальная страница
Я создала на своем сайте условную страницу для использования в качестве целевой. Вот как выглядит обычный шаблон страницы:
В ходе работы я удалю навигационное меню, боковую панель и области виджета в футере, и я обеспечу, чтобы ничто за пределами контента не являлось кликабельной ссылкой.
Создание шаблона целевой страницы WordPress
Сначала вам нужно создать шаблон целевой страницы. Сделайте это одним из двух способов:
Если вы работаете со своей темой, создайте дубликат page.php и переименуйте его.
Если вы работаете со сторонней темой, создайте дочернюю тему. Создайте дубликат page.php из родительской темы в дочерней теме и переименуйте его.
Не задавайте имя файла, начинающееся с page-, так как это запутывает WordPress, если позже вы создадите страницу с помощью слага, используемого после page-. Я назову свой файл шаблона landing-page-template.php.
Теперь откройте этот файл шаблона. Добавьте вверху следующую строку кода:
|
1 2 3 |
*/ Template Name: Landing Page Template /* |
Сохраните файл, и теперь вы увидите, что вы можете выбрать этот шаблон при создании новой страницы на своем сайте:
Теперь удалите из файла боковую панель. Найдите эту строку:
|
1 |
<?php get_sidebar(); ?> |
… и удалите ее. Сохраните файл. Ваш новый шаблон страницы готов. Но мы еще не закончили.
Редактирование файла заголовка
Следующий шаг — отредактировать файл header.php, чтобы удалить любые ссылки, когда используется этот шаблон страницы. Для этого мы будем использовать условный тег is_page_template().
Откройте файл header.php и найдите код для названия вашего сайта.
Примечание. Если вы используете стороннюю тему, создайте файл header.php в своей дочерней теме, который будет дубликатом файла из родительской темы, и отредактируйте его.
В моей теме это выглядит так:
|
1 2 3 |
<a href="<?php echo site_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> <?php bloginfo( 'name' ); ?> </a> |
Отредактируйте файл своей темы, чтобы он выглядел примерно так:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
Если используется шаблон целевой страницы, имя сайта все равно будет отображаться, но оно не будет отображаться как ссылка. Вам также необходимо удалить меню навигацию. Найдите код для своего меню. В моей теме это выглядит так:
|
1 2 3 4 5 6 7 8 9 |
<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 --> |
Отредактируйте файл так, чтобы весь код для меню помещался внутри условного тега, который проверяет, используем ли мы шаблон целевой страницы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?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 (или создайте дубликат в дочерней теме, если это необходимо). Найдите код для вывода виджетов. Вот мой:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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> |
Теперь оберните это в условный тег так же, как и в файле заголовка.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?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. Вот мой:
|
1 2 3 4 5 6 7 8 9 10 11 |
<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="//wordpress.org/">WordPress</a>. </small><!-- #credits --> </section><!--#colophon--> |
Теперь используйте условный тег для вывода на целевой странице раздела информации без ссылок:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?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="//wordpress.org/">WordPress</a>. </small><!-- #credits --> </section><!--#colophon--> <?php } ?> |
Дважды проверьте файл футера на наличие других ссылок и, если они есть, оберните их в условный тег.
Настройка стилей
Вы можете обнаружить, что после удаления боковой панели из шаблона целевой страницы, вам нужно настроить стиль для контента. Если область контента по-прежнему занимает только две трети экрана, вы можете использовать для шаблона страницы класс body, сгенерированный WordPress, чтобы исправить это.
Итак, предположим, у вас есть следующий стиль для контента и боковой панели:
|
1 2 3 4 5 6 7 8 |
.content { float: left; width: 65%; } .sidebar { float: right; width: 32%; } |
Вам нужно добавить ниже дополнительный стиль, чтобы настроить таргетинг на класс контента в шаблоне целевой страницы WordPress:
|
1 2 3 |
.page-template-landing-page-template .content { width: 100%; } |
Вам нужно будет настроить это, чтобы учесть любые поля или отступы, которые вы используете, но общая идея вам должна быть понятна.
Окончательная страница
Вот моя целевая страница без ссылок:
Сейчас она выглядит немного пустой, но вы будете наполнять ее большим количеством яркого контента, направленного на стимулирование людей покупать или подписываться — изображения, большие красные кнопки и тому подобное! И вы можете видеть, что нечего отвлекает посетителя от содержимого страницы.
Надеюсь, ваша целевая страница принесет пользу вашему бизнесу. Удачи!
Автор: Rachel McCollin
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
