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

0

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

Все знают что блог или сайт состоит из множества страниц, статей, товаров и т. д. А как сделать на 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.

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

  • Прямо в самом верху разместите эту строку: <?php /* Template Name: Landing Page */ ?>
  • Измените путь к каждому внешнему файлу, добавив путь к текущей теме. Например, строка вроде <link rel=»stylesheet» href=»css/style.css»> становится <link rel=»stylesheet» href=»<?php bloginfo( ‘template_url’ ); ?>/css/style.css»>
  • Как создать целевую страницу в WordPress

  • Прямо перед закрывающим тегом </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».
  • Вот эффект:

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

    И вот код финальных файлов. Файл 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?

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

    Источник

    Комментарии закрыты.