mojwp.ru
Назад

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

Опубликовано: 18.03.2015
22
263

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

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

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

Внимание! Я выпустил новую тему Romb для ваших статейников и блогов. Максимально быстрая по Google PageSpeed и максимальная оптимизация под SEO.

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

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

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

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

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

Screenshot_4

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

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

img

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

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

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

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

Далее в этот же файл 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 с новой строки вставим такое:

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

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

Screenshot_9

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

Screenshot_8

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

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

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

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

Послесловие

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

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

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

Давай, оцени статью!

Автор:
Виталий
Поделиться
Комментарии:
  • Елена
    Опубликовано: 03.04.2015 Ответить на сообщение

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

    • Виталий
      Опубликовано: 03.04.2015 Ответить на сообщение

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

  • Макс
    Опубликовано: 04.05.2015 Ответить на сообщение

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

    • Виталий
      Опубликовано: 04.05.2015 Ответить на сообщение

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

  • Андрей
    Опубликовано: 12.05.2015 Ответить на сообщение

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

    • Виталий
      Опубликовано: 12.05.2015 Ответить на сообщение

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

  • keyy
    Опубликовано: 19.11.2015 Ответить на сообщение

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

  • Денис Майнер
    Опубликовано: 27.05.2016 Ответить на сообщение

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

    • Виталий
      Опубликовано: 02.06.2016 Ответить на сообщение

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

  • Pokemon
    Опубликовано: 06.10.2016 Ответить на сообщение

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

  • Сергей
    Опубликовано: 27.12.2016 Ответить на сообщение

    Виталий, здравствуйте! Скажите, пожалуйста, таким способом можно прикручивать к Вордпрессу и лендинги, созданные на Bootstrap?

    • Виталий
      Опубликовано: 27.12.2016 Ответить на сообщение

      Добрый. Да.

  • Сергей
    Опубликовано: 01.01.2017 Ответить на сообщение

    Виталий, день добрый.
    А в какой function.php прописывать алгоритм? в function.php темы wp или создать в папке lending?

    • Виталий
      Опубликовано: 02.01.2017 Ответить на сообщение

      Добрый.
      В статье указано, что в functions.php шаблона

  • Сергей
    Опубликовано: 02.01.2017 Ответить на сообщение

    Виталий подскажите пожалуйста, почему у меня лендинг привязывается к основному домену? те получается либо лендинг, либо основной сайт на вордпрессе? И я понимаю, что лендинг в этом случае можно редактировать только руками в папке Landing? а использовать инструменты темы вордпресса уже не получится…правильно? или возможно оформить лендинг как Запись в основном сайте?
    Заранее спасибо)

    • Виталий
      Опубликовано: 02.01.2017 Ответить на сообщение

      Вы наверно не прочитали статью полностью, а только отрывки/выдержки.
      По поводу редактирования: ваш лэнд не натянут же на WP? Соотв. вы не сможете его редактировать. Включаем логику;))

  • Orestos
    Опубликовано: 13.01.2017 Ответить на сообщение

    Есть лендинг, где только файлы index.html, main.css, картинки (все файлы кинул в папку Landing1), а файла index.php нет. Закинул содержимое index.html в файл page-1.php, сделал новую страницу на сайте, в настройках в админке прописал файл шаблона page-1. Все открывается, но файл main.css не хочет ни в какую читать и картинки не появляются, же несколько раз переправлял коды адресов, все бесполезно, были такие пути прописаны src=»/Landing1/main.css» и т.д. Может это из-за того, что я внес файл index.html, а не файл index.php в файл шаблона страницы?

    • Виталий
      Опубликовано: 13.01.2017 Ответить на сообщение

      В браузере CTRL+U и посмотрите есть ли подключение файла стилей, а так же корректность его пути.

  • Анжела
    Опубликовано: 16.02.2017 Ответить на сообщение

    Подскажите, у меня партнерский лендинг и в нем 2 основные папки с файлами и одинаковыми именами: собственно сам шаблон bastion и __MACOSX, на какую из этих папок менять ссылки? Хотя пробовала уже по-всякому, в итоге просто читая страница.

    • Виталий
      Опубликовано: 16.02.2017 Ответить на сообщение

      По всей видимости на bastion. Посмотрите какого типа там файлы лежат.
      Если не получается, значит что-то не так делаете. Тут уже нужно разбираться по месту.

  • Владимир
    Опубликовано: 05.05.2017 Ответить на сообщение

    Здравствуйте, Виталий. А если необходимо привязать лендинг с index.html, а не php? Это возможно? Если да, подскажите порядок действий. Спасибо! Владимир.

  • Михаил
    Опубликовано: 27.09.2018 Ответить на сообщение

    Здравствуйте, Виталий. Хотелось бы узнать а как можно прикрутить много лендинг пейдж
    или можно ли создать папки в вордпресс где бы находились лендинг пейдж

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.