Как создать целевую страницу в WordPress
Доброго времени суток, друзья!
Все знают что блог или сайт состоит из множества страниц, статей, товаров и т. д. А как сделать на WordPress Landing Page (LP, целевая (посадочная) страница)? В этой статье я расскажу вам как это можно сделать.
Название целевой страницы в основном предназначено для представления сценария, в котором посетитель заходит на ваш сайт 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.
Чтобы справиться с этим. Сделайте следующее:
- Начните с того, что зайдите в этот обзор LeadPages и выберите понравившийся шаблон.
- Просмотрите, что доступно, и скачайте шаблон, который выглядит наиболее перспективным. (Примечание: для этого требуется согласие.)
- Извлеките архив и переименуйте файл index.html, скажем, в page-landing-template.php
- Отредактируйте файл и сделайте следующее:
- Прямо в самом верху разместите эту строку: <?php /* Template Name: Landing Page */ ?>
- Измените путь к каждому внешнему файлу, добавив путь к текущей теме. Например, строка вроде <link rel=»stylesheet» href=»css/style.css»> становится <link rel=»stylesheet» href=»<?php bloginfo( ‘template_url’ ); ?>/css/style.css»>
- Прямо перед закрывающим тегом </body> добавьте: <?php wp_footer(); ?>
- Загрузите файлы шаблона на свой 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.
Это плагин, который дает вам доступ к таким вещам, как кнопки (плоские, 3D, разные цвета и т. д.), анимации, аккордеоны и множество других элементов сайта. Все сделано через, как вы уже догадались, шорткоды. Плюс есть много функций настройки, и документация очень хороша (примеры и прочее).
Заключение
Очевидно, что целевые страницы WordPress изначально не предназначались для поддержки целевых страниц, но это, в конце концов, не является такой проблемой. В конце концов, различные плагины, компоновщики тем, пользовательские шаблоны страниц и даже внешние сервисы, такие как LeadPages, делают работу с целевыми страницами чем-то, с чем может справиться каждый разработчик.
Что вы взяли для себя из этой статьи? Какой ваш предпочитаемый способ создания целевой страницы в WordPress?
А у меня на этом все — до встречи!
Здорово. Очень грамотная статья про лендинг пейдж.
Отлично!)
Я использую для таких страниц плагин инстабилдер. Он мне достался бесплатно бонусом к одной обучающей школе. Очень хороший функционал,мне нравится.