Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Как сделать шаблон лэндинга для WordPress

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

Final product image
What You'll Be Creating

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

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

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

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

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

Для этого мы будем работать с несколькими файлами нашей темы:

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

Давайте начнём!

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

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

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

Начальная страница

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

the landing page using a standard page template

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

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

Сначала вам нужно создать шаблон целевой страницы. Сделайте это одним из двух способов:

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

Если вы работаете со сторонней темой, создайте дочернюю тему. Скопируйте файл page.php из основной темы в дочернюю и переименуйте его.

Не называйте этот файл с префиксом page-, так как это запутает WordPress, если вы позже создадите страницу с темже тегом, который вы поставите после page-. Я назову свой landing-page-template.php.

Теперь откройте ваш шаблон. Сверху добавьте эту строку кода:

Сохраните его, и теперь вы сможете выбрать новый шаблон при создании новой страницы на вашем сайте:

Picking a page template in the page editing screen

Теперь удалим боковую панель из файла. Найдите эту строку:

...и удалите её. Сохраните файл. Шаблон вашей новой страницы готов. Но вы ещё не закончили.

Редактирование файла «шапки»

Следующий шаг — отредактировать файл header.php, и удалить любые ссылки, когда используется шаблон этй страницы. Для этого мы будем использовать тег-условие is_page_template().

Откройте файл header.php и найдите код для вставки названия вашего сайта.

Примечание: если вы используете стороннюю тему, скопируйте из родительской темы в дочернюю файл header.php и отредактируйте его.

В моей теме это выглядит так:

Отредактируйте его таким образом, чтобы он был чем-то вроде этого, внеся корректировки для вашей темы:

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

Ещё вам необходимо удалить навигацию. Найдите код для главного меню. В моей теме это выглядит так:

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

Если в вашем файле «шапки» есть какие-либо другие меню или ссылки, оберните их тем же тег-условием, сделайте тоже самое и для любых областей виджетов (блоков).

Сохраните файл header.php и закройте его.

Редактирование файла «подвала»

Заключительный этап — обеспечить, чтобы в нижней части страницы не отображались области виджетов.

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

Откройте шаблон footer.php (или создайте дубликат в дочерней теме, если необходимо).

Найдите код для вывода ваших виджетов. Вот мой:

Теперь оберните это в тег-условие так же, как и в файле заголовка.

Дальше, нам нужно внести правки в «подвал». Это может быть ссылка на вашу домашнюю страницу и/или на сайт WordPress.

Вот, что у меня:

Теперь используйте тег-условие для вывода на целевой странице «подвала» без ссылок:

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

Настройка стиля

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

Итак, допустим, у вас есть следующий стиль для содержимого и боковой панели:

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

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

Законченная страница

Вот моя целевая страница без ссылок:

the landing page with all links removed

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

Надеюсь, ваша целевая страница принесёт вам массу удовольствия. Удачи!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.