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

Як створити шаблон Лендінг для WordPress

by
Difficulty:IntermediateLength:MediumLanguages:

Ukrainian (українська мова) translation by Andy Yur (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.