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

Доброго времени суток, друзья!

Все знают что блог или сайт состоит из множества страниц, статей, товаров и т. д. А как сделать на WordPress Landing Page (LP, целевая (посадочная) страница)? В этой статье я расскажу вам как это можно сделать.

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

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

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

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

Так что же делает целевые страницы на WordPress особенными?

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

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

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

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

Итак, в итоге, элементы, которые делают хорошую целевую страницу в WordPress, а также элементы, на которых мы сосредоточимся в этом посте:

  • Простая структура с минимальным дизайном.
  • Нет боковых панелей. Боковые панели делают дизайн отвлекающим.
  • Нет подвала сайта.
  • Минимальный заголовок. Таким образом, посетитель может получить доступ к копии.
  • Если вы собираетесь использовать логотип, сделайте его не кликабельным.

Способ №1: очевидный – плагины

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

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

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

Способ №2: перетаскивание компоновщиком тем

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

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

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

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

Способ №3: LeadPages

(Примечание. Это платное решение.)

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

Планы начинаются от 25 долларов в месяц.

Я перечисляю это здесь, потому что это удивительно простой в использовании инструмент. Поэтому, если вы предпочитаете вкладывать деньги, а не свое время, LeadPages – это решение для вас.

Способ №4: Взлом LeadPages

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

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

Единственная сложность заключается в том, что эти целевые страницы являются чистым HTML, поэтому они не являются WordPress-совместимыми сразу. Поэтому нам нужно сделать их совместимыми с WordPress.

Чтобы справиться с этим. Сделайте следующее:

  1. Начните с того, что зайдите в этот обзор LeadPages и выберите понравившийся шаблон.
  2. Просмотрите, что доступно, и скачайте шаблон, который выглядит наиболее перспективным. (Примечание: для этого требуется согласие.)
  3. Извлеките архив и переименуйте файл index.html, скажем, в page-landing-template.php
  4. Отредактируйте файл и сделайте следующее:
  • Прямо в самом верху разместите эту строку: <?php /* Template Name: Landing Page */ ?>
  • Измените путь к каждому внешнему файлу, добавив путь к текущей теме. Например, строка вроде <link rel=”stylesheet” href=”css/style.css”> становится <link rel=”stylesheet” href=”<?php bloginfo( ‘template_url’ ); ?>/css/style.css”>

Взлом LeadPages

  • Прямо перед закрывающим тегом </body> добавьте: <?php wp_footer(); ?>
  1. Загрузите файлы шаблона на свой FTP-сервер прямо в папку текущей темы.

(Примечание: возможно, вы заметили, что в приведенном выше примере и стили, и файлы JS жестко запрограммированы в заголовке. Это не лучшее решение для WordPress, и его следует избегать всякий раз, когда вы создаете свою собственную тему. Однако здесь мы работаем с тем, что имеем из шаблона LeadPages, и пытаемся максимально быстро включить эту целевую страницу в WordPress, поэтому мы просто оставим все как есть.)

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

Способ №5: Созданный вручную пользовательский шаблон страницы

Это самый старый подход, когда мы говорим о WordPress.

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

Заметка. “Способ №4” в этом списке в основном заключается в создании пользовательского шаблона страницы и размещении в нем стандартного шаблона LeadPages.

Лучший способ создать целевую страницу в WordPress вручную с помощью пользовательского шаблона страницы – просто взять шаблон page.php по умолчанию и поэкспериментировать с его структурой CSS/HTML.

Например, работая с предыдущей стандартной темой WordPress – Twenty Fourteen, вы можете легко избавиться от левой боковой панели по умолчанию, шапки сайта, подвала (футера) сайта и всего остального. То, что я сделал здесь, это:

  • Я взял файл page.php по умолчанию, сделал копию и назвал ее page-lp-example.php.
  • Затем я взял файлы header.php и footer.php по умолчанию и также сделал их копии (header-lp-example.php и footer-lp-example.php ).
  • В page-lp-example.php я изменил вызовы по умолчанию get_header и get_footer на те, которые используют мои новые шаблоны: get_header (‘lp-example’); и get_footer (‘lp-example’);,
  • Также в page-lp-example.php я удалил вызов get_sidebar ();,
  • Наконец, я удалил все блоки HTML, которые мне не нужны на целевой странице, из всех трех файлов.
  • Я назвал шаблон “LP Example”.

Вот эффект:

Созданный вручную пользовательский шаблон страницы

И вот код финальных файлов. Файл header-lp-example.php:

    <!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
    <div id="main" class="site-main">

Файл page-lp-example.php:

    <?php /* Template Name: LP Example */
get_header('lp-example'); ?>
    <div id="main-content" class="main-content">
           <div id="primary" class="content-area">
           <div id="content" class="site-content" role="main">
           <?php
           // Start the Loop.
           while ( have_posts() ) : the_post();
                 // Include the page content template.
                 get_template_part( 'content', 'page' );
           endwhile;
           ?>
           </div><!-- #content -->
           </div><!-- #primary -->
     </div><!-- #main-content -->
<?php get_footer('lp-example');

Файл footer-lp-example.php:

           </div><!-- #main -->
       <footer id="colophon" class="site-footer" role="contentinfo">
             <div class="site-info">
             </div><!-- .site-info -->
       </footer><!-- #colophon -->
 </div><!-- #page -->
 <?php wp_footer(); ?>
 </body>
 </html>

Теперь все, что осталось – взять эту целевую страницу и использовать ее для демонстрации предложения.

Бонус: как превратить вашу целевую страницу в WordPress

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

Вы можете создать эти элементы вручную, либо в Photoshop, либо через CSS/HTML, но есть более быстрое решение, которое называется Shortcodes Ultimate.

целевую страницу в WordPress

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

Заключение

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

Что вы взяли для себя из этой статьи? Какой ваш предпочитаемый способ создания целевой страницы в WordPress?

А у меня на этом все – до встречи!

Вам понравилась статья?
плохохорошо (Пока оценок нет)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на WordPress, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!
2 комментария к статье "Как создать целевую страницу в WordPress"
  1. Юрич: 08.08.2019 в 13:11 - Ответить

    Отлично!)

  2. Sergey: 08.08.2019 в 12:57 - Ответить

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