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

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

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

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

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

Купить что-нибудь.

Зарегистрироваться для чего-нибудь, это может быть подписка на услугу или курс, или список рассылки.

Бесплатный курс «Основы создания тем WordPress»

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

Скачать курс

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

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

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

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

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

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

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

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

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

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

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

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

установка WordPress для тестирования или разработки

редактор кода

установленная тема

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Бесплатный курс «Основы создания тем WordPress»

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

Скачать курс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Автор: Rachel McCollin

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

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

Бесплатный курс «Основы создания тем WordPress»

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

Скачать курс

Основы создания тем WordPress

Научитесь создавать мультиязычные темы с нестандартной структурой страниц

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: