Как прикрутить Landing Page к существующей странице сайта на WordPress

На конкретном примере сайта покажу как прикрутить Landing Page (посадочную страницу) к уже существующей странице сайта на WordPress, которую вы прокачивали ранее ссылочным. Т.е. по итогу URL страницы не изменится, при этом обойдемся без 301 редиректа.

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

На днях обратился автор сайта http://checho.ru/, у которого уже был готов лендинг и мне необходимо было только установить по определенному URL. Ранее страница была в стиле шаблона всего сайта, а должна быть в своем стиле.

В данном случае это статичная страница (Page). Однако у вас может быть и страница записей. По этой причине в статье расскажу как действовать в этих случаях.

Прикручиваем лендинг к статичной странице

Сам лендинг в рассматриваемом случае состоит из нескольких файлов.

Как прикрутить Landin Page к существующей странице сайта на WordPress

Чтобы не засорять шаблон сайта лишними файлами, было решено папку с файлами хранить в /wp-content/

Screenshot_4

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

По итогу можно выбирать для любой страницы (Page) свое оформление. На скриншоте ниже пример:

img

Сейчас аккурат расскажу как сделать такой шаблон с лендингом.

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

В page-1.php сразу в начале вставляем такой код:

<?php
/*
Template Name: Семантическое ядро
*/
?>

Подобная запись позволит вывести название шаблона в админке (показывал на скриншоте выше). Название "Семантическое ядро" можете менять на произвольное. Это для удобства ориентации по шаблонам страниц. В данном случае делал для страницы про сем. ядро, поэтому так и назвал.

Далее в этот же файл page-1.php вам нужно скопировать все, что есть в файле index.php вашего лендинга. Именно в нем будет лежать лицевая часть вашего лендинга, которая уже потом может ссылаться на другие файлы (если их у вас много, как на примере).

Screenshot_5

Получившийся файл page-1.php необходимо закачать в папку с вашим шаблоном сайта, чтобы стал задействован в процессе. Делаем это.

На данный момент уже в админке вы увидите новый шаблон, однако он не будет выглядеть так как запланировано. Причина в том, что в index.php лендинга будут прописаны относительные пути до картинок, скриптов и прочего. Т.е. вот так примерно:

Screenshot_6

У нас же сейчас бывший файл index.php лендинга превратился в page-1.php и лежит в другом месте. Поэтому по всему файлу page-1.php нужно прописать правильный путь до папки с лендингом (в примере это папка Landing, которая лежит в папке /wp-content/). Делаем это по всему файлу и по итогу получится нечто подобное:

Клик для увеличения

Клик для увеличения

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

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

Прикручиваем лендинг к странице записей

WordPress понимает иерархию файлов шаблона. Не буду сейчас грузить этой информацией и перейдем к делу. Кто хочет может погуглить про иерархию.

Необходимо открыть файл функций шаблона functions.php и сразу после <?php с новой строки вставим такое:

/* шаблон одиночной записи */
function mojwp_single($mojwp_template) {
global $wp_query, $post;
if(file_exists(TEMPLATEPATH . '/single-' . $post->ID . '.php')) {
return TEMPLATEPATH . '/single-' . $post->ID . '.php';
}
if(file_exists(TEMPLATEPATH . '/single.php')) {
return TEMPLATEPATH . '/single.php';
}
return $mojwp_template;
}
add_filter('single_template', 'mojwp_single');

Данный код позволит создавать отдельный шаблон выбранной вами записи. Мы включили приоритет загрузки файлов шаблона одиночной записи по ID вашей статьи.

У каждой записи есть свой уникальный ID. Наведите на кнопки в админке

Screenshot_9

и снизу браузера увидите нечто подобное

Screenshot_8

Цифра 4113 в данном случае и будет ID записи.

Теперь осталось создать в папке с шаблоном вашего сайта файл single-4113.php и разместить в нем код с файла лендинга index.php полностью, чтобы WordPress автоматически подгрузил шаблон для указанной по ID записи.

Т.е. для одиночной записи не нужно прописывать вручную название шаблона и потом выбирать. Достаточно разместить один раз представленный код в functions.php и потом создавать файлы вида single-N.php, где N - цифра ID записи.

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

Послесловие

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

Вроде ничего не забыл. Если что спрашивайте в комментариях.

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 10 комментариев
  1. Елена (1 комм.):

    Здравствуйте! Прошу прощения, что обращение без имени.Не могу найти на сайте Ваше имя.
    Если я правильно поняла, то, чтобы прикрутить лендинг к статичной странице я должна где-то или взять, или заказать исходники этой страницы, а потом уже следовать вашей инструкции? Спасибо! С уважением, Елена!

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Добрый.
      У вас должен быть лендинг и его остается прикрутить по инструкции к вашему текущему сайту на WordPress.
      Т.е. у вас должно быть 2 вещи:
      1. Лендинг
      2. Свой сайт на WordPress

  2. Макс (1 комм.):
    http://moytom.ru

    Доброго времени суток !
    А у меня такой вопрос: есть допустим стандартная тема Twenty Twelve как в ней убрать хидер и футер (короче все кроме коментариев). Хочеться сделать чистый лист а потом с помощью плагина Page Builder by SiteOrigin собрать свою страницу !

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Добрый.
      Ищите в коде где убирается информация хидера и футера, удаляете ее.
      Здесь вам понадобятся некоторые знания php и функций wordpress, чтобы найти нужное. Либо обратитесь за услугами людей, кто в этом разбирается.

  3. Андрей (129 комм.):
    http://tvoiwp.ru/

    Отличная статья Виталий, у Вас наверное страница с ошибкой 404 сделана данным способом?...
    Данной статьей Вы сразу задавили два плагина которые предназначены для создания лендинга (torpage и WP Pagе).

    • Виталий (1674 комм.):
      http://mojWP.ru/

      404 типа того. Просто стили для страницы 404.php заданы
      Плагины это не "задавать" данным способом) Нужна же разработка самой страницы. Прикрутить - это уже второе.

  4. keyy (1 комм.):

    У меня страница лендинга index.html (создавал в muse), а не index.php Что делать в данном случае?

  5. Денис Майнер (1 комм.):
    http://maining48.ru

    Такая же ситуация. Есть лендинг. То есть страница с магазином. Там несколько индексов и html и php ,css
    Как все это прикрутить. И не будет ли лендинг ограничен шаблоном темы Вордпресс

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Это у вас уже не лендинг, а отдельный сайт. Как субдомен добавьте и все.

  6. Pokemon (1 комм.):
    http://go-po.ru

    Брат, огромное спасибо! Перерыл весь интернет и форумы, только ты смог помочь прикрутить статическую страницу к движку! Все работает!

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 13.37MB | MySQL:71 | 0,453sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html