Как создать целевую страницу на WordPress

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

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

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

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

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

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

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

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

Итак, начнем. Я собираюсь создать этот шаблон целевой страницы для темы Twenty Twenty, и это означает создание дочерней темы, чтобы я не редактировала стороннюю тему.

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

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

Итак, начнем.

Создайте дочернюю тему

Если вы работаете над своей собственной темой, вы можете пропустить этот раздел. Но если вы используете стороннюю тему, которую вы скачали из каталога тем или купили на ThemeForest или из другого источника, вам понадобится дочерняя тема. Следуйте руководству по созданию дочерней темы и сохраните новую тему в каталоге wp-content/themes.

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

Теперь вам нужно создать шаблон страницы, который будет шаблоном целевой страницы. Вам нужно продублировать любой шаблон, используемый для страниц вашей темы, и переименовать новый файл. Для многих тем это page.php. Для Twenty Twenty это singular.php. Вы можете использовать иерархию шаблонов WordPress, чтобы определить, какой файл шаблона используется.

Если вы работаете с дочерней темой, скопируйте дубликат в дочернюю тему. Если вы работаете в основной теме, сохраните дубликат в основной теме. Примечание: не делайте этого на своем сайте!

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

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

Вот полное содержимое моего нового файла landing-page-template.php. Ваш будет выглядеть иначе, если вы работаете с другой темой.

<?php
/** * The template for displaying single posts and pages. * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty * @since Twenty Twenty 1.0 */ get_header();
?> <main id="site-content" role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content', get_post_type() ); } } ?> </main><!-- #site-content --> <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> <?php get_footer(); ?>

Теперь пришло время отредактировать файл. Начните с закомментированного текста вверху. Замените его текстом, необходимым для шаблонов страниц:

<?php
/**
* Template Name: Landing Page
*
*/

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

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

<?php get_sidebar(); ?>

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

Теперь футер. Вам не нужно удалять футер полностью, поскольку вам все еще нужны колофон и вызов wp_footer, поэтому вместо удаления вызова get_footer() оставьте его там и создайте новый файл футера для целевой страницы. В Twenty Twenty футер не работает стандартным образом. В моем файле шаблона есть два вызова:

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> <?php get_footer(); ?>

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

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

Теперь сохраните файл. Мы вернемся к этому в ближайшее время.

Создайте заголовок для целевой страницы

Теперь пришло время создать заголовок для целевой страницы без меню навигации, виджетов или ссылок. Сделайте копию файла header.php вашей темы (либо в основной теме, либо в дочерней теме) и назовите ее header-landing.php.

Удалите ссылку в логотипе или названии сайта

Найдите название сайта или логотип в файле заголовка. Он может состоять из функции:

twentytwenty_site_logo();

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

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/xxx.jpg" >

Замените xxx.jpg в коде выше именем файла собственного логотипа и убедитесь, что вы используете правильный путь. Если у вашего сайта размещен заголовок сайта вместо изображения логотипа, используйте это:

<div class="site-title faux-heading"> <?php bloginfo( 'name' ); ?> </div>

Примечание: классы, которые я использовала выше, относятся к Twenty Twenty. Отредактируйте их для своей темы. Если ваша тема работает более стандартным образом, чем Twenty Twenty, вы, вероятно, обнаружите, что этот код уже существует. Все, что вам нужно сделать, это удалить все элементы <a>, окружающие его, чтобы заголовок сайта или логотип остались на своем месте, но не действовали как ссылки.

Удалите меню навигации

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

<div class=“header-navigation-wrapper"> </div><!-- .header-navigation-wrapper —>

Если вы работаете с Twenty Twenty, удалите этот раздел и все в нем. Если нет, то вам нужно найти div, aside или section с похожим названием. Twenty Twenty также содержит внутри этих элементов две кнопки навигации для мобильных устройств:

<button class="toggle search-toggle mobile-search-toggle"> </button> <button class="toggle nav-toggle mobile-nav-toggle"> </button>

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

Удалите все области виджетов или другой код со ссылками

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

И, наконец, в Twenty Twenty в конце файла есть модальное меню, которое я тоже хочу удалить. Опять же, ваша тема может не иметь его — Twenty Twenty сложнее, чем многие! Мой файл header-landing.php теперь выглядит намного проще:

<?php
/** * Header file for the Twenty Twenty WordPress default theme. * * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials * * @package WordPress * @subpackage Twenty_Twenty * @since Twenty Twenty 1.0 */ ?><!DOCTYPE html> <html class="no-js" <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <link rel="profile" href="https://gmpg.org/xfn/11"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <?php wp_body_open(); ?> <header id="site-header" class="header-footer-group" role="banner"> <div class="header-inner section-inner"> <div class="header-titles-wrapper"> <div class="header-titles"> <?php // Site title or logo. bloginfo( 'name' ); // Site description. twentytwenty_site_description(); ?> </div><!-- .header-titles --> </div><!-- .header-titles-wrapper --> </div><!-- .header-inner --> </header><!-- #site-header —>

Сохраните изменения и вернитесь к файлу шаблона. Найдите строку, которая вызывает заголовок:

get_header();

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

get_header( 'landing' );

Теперь сохраните файл.

Создайте футер для целевой страницы

Теперь пришло время создать футер для вашей целевой страницы. Сделайте дубликат файла footer.php и назовите его footer-landing.php. Откройте свой новый файл. Найдите любой код для областей виджетов и удалите его. Twenty Twenty не содержит областей виджетов в файле footer.php; они находятся во включаемом файле, к которому я уже удалила вызов.

Вам также нужно будет отредактировать колофон, чтобы удалить ссылки. Вот колофон в Twenty Twenty:

<div class="footer-credits"> <p class="footer-copyright">&copy; <?php echo date_i18n( /* translators: Copyright date format, see https://www.php.net/date */ _x( 'Y', 'copyright date format', 'twentytwenty' ) ); ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a> </p><!-- .footer-copyright --> <p class="powered-by-wordpress"> <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>"> <?php _e( 'Powered by WordPress', 'twentytwenty' ); ?> </a> </p><!-- .powered-by-wordpress --> </div><!-- .footer-credits -->

Удалите все ссылки в коде. Мой код теперь выглядит так:

<div class="footer-credits"> <p class="footer-copyright">&copy; <?php echo date_i18n( /* translators: Copyright date format, see https://www.php.net/date */ _x( 'Y', 'copyright date format', 'twentytwenty' ) ); ?> <?php bloginfo( 'name' ); ?> </p><!-- .footer-copyright --> <p class="powered-by-wordpress"> <?php _e( 'Powered by WordPress', 'twentytwenty' ); ?> </p><!-- .powered-by-wordpress --> </div><!-- .footer-credits -->

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

<?php get_footer(); ?>

Отредактируйте его, чтобы вызвать новый файл футера:

<?php get_footer( 'landing' ); ?>

Мой файл шаблона теперь выглядит так:

<?php
/**
* Template Name: Landing Page
*
*/ get_header();
?> <main id="site-content" role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content', get_post_type() ); } } ?> </main><!-- #site-content --> <?php get_footer( 'landing' ); ?>

Сохраните файл шаблона, и, если вы работаете с дочерней темой, активируйте ее в админпанели WordPress.

Используйте шаблон для создания целевой страницы

Создайте новую статическую страницу для целевой страницы, присвоив ей название, соответствующее тому, что вы хотите, чтобы она делала. Создайте содержимое, а затем, в Атрибутах страницы раздела Документ правой панели, выберите из выпадающего списка Шаблон — Landing Page.

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

Заключение

Целевая страница гораздо эффективнее, если вы обеспечите, чтобы единственным действием, которое люди могут предпринять, было нажатие кнопки «Купить». Создав шаблон целевой страницы в своей теме WordPress, вы повысите эффективность целевой страницы и получите больше продаж или подписок. Следуйте этому руководству, и у вас будет мощная целевая страница для вашей темы!

Автор: Rachel McCollin

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

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