Статьи

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

Февраль 5, 2019
Конечный продукт
Что вы будете создавать

Если вы что-то купили в Интернете, вы, вероятно, натолкнулись на целевую страницу. Это очень эффективный способ максимизации конверсии с веб-сайта.

Но что такое целевая страница и как ее создать для своего сайта WordPress?

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

  • WordPress
    Как создать дочернюю тему WordPress
    Рэйчел Макколлин
  • Темы WordPress
    Двадцать девятнадцать разрывов: использование новой темы WordPress по умолчанию
    Дэвид Гвайер
  • WordPress
    Создание отзывчивой целевой страницы с помощью WPBakery (Visual Composer)
    Ашраф Хатхибелагал
  • WordPress
    Создать домашнюю страницу с плагином Elements для WordPress
    Ашраф Хатхибелагал

Что такое целевая страница?

Целевая страница — это страница вашего сайта, предназначенная для продажи чего-либо.

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

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

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

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

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

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

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

Вот целевая страница на одном из моих сайтов:

моя целевая страница с кнопкой для подписки на мою рассылку и без других ссылок

Это действительно просто. Он не имеет ссылок, меню навигации и только одной кнопки, которая ведет вас к форме регистрации.

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

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

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

Что вам нужно

Для этого вам понадобится следующее:

  • разработка разработки вашего сайта
  • Ваша собственная тема или дочерняя тема сторонней темы (не редактируйте сторонние темы напрямую)
  • редактор кода

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

  • WordPress
    Как создать дочернюю тему WordPress
    Рэйчел Макколлин

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

В вашей теме (или вашей дочерней теме) создайте новый шаблон страницы. Вы можете сделать это, продублировав шаблон page.php или создав пустой файл и скопировав в него содержимое page.php . Я звоню на мою посадочную страницу .

Вот мой существующий файл page.php :

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?php
/**
 * The template for displaying all pages.
 */
get_header();
 
    <?php
    if ( have_posts() ) while ( have_posts() ) : the_post();
 
    <article id=»post-<?php the_ID(); ?>» <?php post_class();
         
        <?php if ( has_post_thumbnail() ) { ?>
         
            <h2 class=»entry-title desktop»><?php the_title();
         
            <div class=»quarter right»>
                <?php the_post_thumbnail( ‘large’ );
            </div>
             
            <section class=»entry-content three-quarters left»>
                <h2 class=»entry-title mobile»><?php the_title();
                <?php the_content();
            </section><!— .entry-content —>
         
        <?php }
             
        else { ?>
         
            <h2 class=»entry-title desktop»><?php the_title();
     
            <section class=»entry-content»>
                <?php the_content();
            </section><!— .entry-content —>
             
        <?php } ?>
         
    </article><!— #post-## —>
 
<?php endwhile;
 
<?php get_sidebar();
<?php get_footer();

Давайте пробежимся по содержимому этого файла:

  • Во-первых, вызов файла header.php .
  • Затем, условная проверка, чтобы видеть, есть ли показанное изображение. Если это так, это отображается справа выровненным. Это относится к моей теме — у вас может быть или не быть что-то подобное.
  • Цикл для отображения заголовка и содержимого страницы.
  • Звонок на боковую панель.
  • Звонок в нижний колонтитул.

Чтобы создать шаблон целевой страницы, нам нужно сделать несколько вещей с этим файлом:

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

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

Добавление закомментированного текста для создания шаблона страницы

В своем новом файле Landing-page.php добавьте строку закомментированного текста, чтобы сообщить WordPress, что это шаблон страницы. Вот мой:

1
2
3
4
5
/**
* Template Name: Landing page
* The template for displaying the landing page.
*
*/

Теперь, когда вы редактируете или создаете страницу на экране редактирования страницы, вы сможете выбрать этот шаблон в разделе « Атрибуты страницы » на вкладке « Документ » в правой части экрана редактирования страницы:

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

Удаление условного кода

Теперь давайте отредактируем условную проверку. Вам нужно будет сделать это, только если он есть в вашем файле page.php .

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
<?php
if ( have_posts() ) while ( have_posts() ) : the_post();
 
    <article id=»post-<?php the_ID(); ?>» <?php post_class();
                     
        <h2 class=»entry-title»><?php the_title();
                     
        <section class=»featured-image one-third left»>
            <?php if ( has_post_thumbnail() ) {
                the_post_thumbnail( ‘medium’ );
            } ?>
        </section>
             
        <section class=»entry-content right two-thirds»>
            <?php the_content();
        </section><!— .entry-content —>
    </article><!— #post-## —>
 
<?php endwhile: endif;

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

Удаление вызова на боковой панели

Теперь давайте удалим этот вызов боковой панели.

Удалите get_sidebar() . Оставьте вызов нижнего колонтитула там — мы отредактируем нижний колонтитул, чтобы вскоре удалить любые ссылки.

Редактирование верхнего и нижнего колонтитула

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

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

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

Удаление навигации из заголовка

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

Начните с создания копии вашего заголовочного файла. Назовите это header-landing.php .

Теперь, в вашем файле landing-page.php , отредактируйте вызов заголовка так, чтобы он выглядел так:

1
get_header( ‘landing’ );

Сделав это, вы можете отредактировать файл header-landing.php .

Вот мой код для названия сайта:

01
02
03
04
05
06
07
08
09
10
11
<hgroup class=»site-name one-third left»>
    <!— site name and description — site name is inside a div element on all pages except the front page and/or main blog page, where it is in a h1 element —>
    <h1 id=»site-title» class=»one-half-left»>
        <a href=»<?php echo home_url( ‘/’ ); ?>» title=»<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>» rel=»home»>
            <?php bloginfo( ‘name’ );
        </a>
    </h1>
   
    <h2 id=»site-description»><?php bloginfo( ‘description’ );
   
</hgroup>

Мы все еще хотим показать имя сайта, поэтому мы редактируем код для вывода без ссылки:

1
2
3
4
5
6
7
8
9
<hgroup class=»site-name one-third left»>
    <!— site name and description — site name is inside a div element on all pages except the front page and/or main blog page, where it is in a h1 element —>
    <h1 id=»site-title» class=»one-half-left»>
        <?php bloginfo( ‘name’ );
    </h1>
   
    <h2 id=»site-description»><?php bloginfo( ‘description’ );
   
</hgroup>

Теперь давайте удалим меню навигации. Вы просто удаляете весь код для меню навигации в вашем файле header-landing.php .

Вот код:

01
02
03
04
05
06
07
08
09
10
11
<nav class=»menu main right»>
 
 <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 —>

Просто удалите все это. Просто!

Удаление ссылок из нижнего колонтитула

Теперь давайте перейдем к нижнему колонтитулу.

Как и в случае с заголовочным файлом, вам необходимо создать еще одну версию файла нижнего колонтитула. Дублируйте footer.php и назовите его footer-landing.php .

В вашем файле landing-page.php отредактируйте вызов нижнего колонтитула так, чтобы он выглядел следующим образом:

1
<?php get_footer( ‘landing’ );

Теперь давайте отредактируем файл footer-landing.php .

В моем файле нижнего колонтитула у меня есть область виджета:

1
2
3
4
5
if ( is_active_sidebar( ‘footer-widget-area’ ) ) { ?>
    <aside class=»footer-widget-area full-width» role=»complementary»>
        <?php dynamic_sidebar( ‘footer-widget-area’ );
    </aside>
<?php }

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

В моем файле также есть код для колофона, который содержит ссылки:

01
02
03
04
05
06
07
08
09
10
11
<section class=»colophon» role=»contentinfo»>
    <small class=»copyright left»>
        &copy;
            <?php bloginfo( ‘name’);
        </a>
    </small><!— #copyright —>
 
    <small class=»credits right»>
        Proudly powered by <a href=»https://wordpress.org/»>WordPress</a>.
    </small><!— #credits —>
</section><!—#colophon—>

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

1
2
3
4
5
6
7
8
9
<section class=»colophon» role=»contentinfo»>
    <small class=»copyright left»>
        &copy;
    </small><!— #copyright —>
 
    <small class=»credits right»>
        Proudly powered by WordPress.
    </small><!— #credits —>
</section><!—#colophon—>

Теперь в нижнем колонтитуле или на целевой странице не будет ссылок.

Редактирование таблицы стилей

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

У меня есть следующий стиль макета для моего контента и боковой панели по умолчанию:

1
2
3
4
5
6
7
8
#content {
  width: 65%;
  float: left;
}
.sidebar {
  width: 32%;
  float: right;
}

Мне нужно добавить стили для таргетинга контента только на этом шаблоне страницы:

1
2
3
4
.page-template-landing-page #content {
  width: 100%;
  float: none;
}

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

Создание ваших страниц

Последний шаг — создать целевую страницу. Создайте новую страницу в администраторе WordPress, используя новый шаблон целевой страницы. Он будет содержать текст, побуждающий людей покупать или зарегистрироваться, а также форму или кнопку покупки.

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

Если вы нажмете кнопку на первой целевой странице моего сайта, вы получите эту простую страницу регистрации:

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

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

Шаблон целевой страницы уменьшает отвлекающие факторы и увеличивает конверсию

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

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

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

  • WordPress
    Как создать дочернюю тему WordPress
    Рэйчел Макколлин
  • Темы WordPress
    Двадцать девятнадцать разрывов: использование новой темы WordPress по умолчанию
    Дэвид Гвайер
  • WordPress
    Создание отзывчивой целевой страницы с помощью WPBakery (Visual Composer)
    Ашраф Хатхибелагал
  • WordPress
    Создать домашнюю страницу с плагином Elements для WordPress
    Ашраф Хатхибелагал

38
Share: