Landing Page на WordPress. Как создать?
Существует много решений, как создать Landing Page на базе WordPress – всё ограничивается фантазией разработчика и требованиями заказчика. Сегодня мы рассмотрим один из подходов создания лендинга на WordPress.
Схема нашего сайта на WordPress:
- Главная страница представляет собой обычный Landing Page с шапкой меню сверху (header) и подвалом снизу (footer). По центру последовательно расположены блоки лендинга, каждый из которых представляет собой обычный пост WordPress (post 1, post 2, post 3);
- Внутренний блог (blog) с постами (post 3, post 4, post 5) и боковой панелью меню слева (sidebar menu);
- Страницы сайта (page) в стиле: «о нас», «контакты», прочие.
Логика следующая: на стартовую страницу выводим посты во всю ширину окна браузера – это и будут наши блоки лендинга (на схеме post 1, post 2, post 3). Поскольку наш сайт имеет также блог, в нём должны быть исключены посты с главной страницы – зачем же дублировать контент!?
Рассмотрим конкретный пример. Файл index.php отвечает за загрузку главной страницы — наш landing page:
1 2 3 | <?php get_header(); ?> <?php get_template_part('landing');?> <?php get_footer(); ?> |
Функция get_template_part(‘landing’) подключает файл landing.php (детальнее было описано здесь: https://softsprint.net/wordpress-part-2/) , который выводит цикл постов на наш Landing page:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div id="landing"> <?php global $query_string; query_posts($query_string . "&cat=1"); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article class="landing"> <h3><?php the_title(); ?></h3> <?php the_content(); ?> </article> <?php endwhile; ?> <?php else : ?> <div class="else"> <h2>По Вашему запросу ничего не найдено!</h2> </div> <?php endif; ?> </div> |
Цикл вывода постов является стандартным для WordPress и рассматривался здесь: https://softsprint.net/the-loop-wordpress-part-4/ , но имеет особенность:
1 2 | global $query_string; query_posts($query_string . "&cat=1"); |
Функция query_posts () применяется для указания, какие именно посты нужно показывать в базовом Цикле WordPress; изменяет Цикл WordPress и выводит посты заново. В нашем случае выводим посты из категории №1 (по умолчанию — «Без рубрики»), за что отвечает параметр «cat=1».
Вообще, функция query_posts () возвращает список постов «с нуля» — без базовых настроек WordPress (например не определяется, какая страница показывается – архив, категория, по дате т.д.).
Строчка global $query_string как раз и отвечает за присвоение базовых настроек вывода постов в цикле WordPress. В итоге получается, что благодаря global $query_string выполняется стандартный вывод постов WordPress, но только из категории №1 («Без рубрики») благодаря query_posts($query_string . «&cat=1»).
Формирование главной страницы Лендинга рассмотрели. Теперь перейдём к рассмотрению следующей задачи: внутренний блог (blog) с обычными постами (post 3, post 4, post 5) и боковой панелью меню слева (sidebar menu). Задача имеет 2 особенности:
- нужно выводить все посты, кроме тех, что отображаются на стартовой странице – нашем лендинге;
- блог должен открываться по адресу нужной нам страницы, например, http://site.com/blog
Создаём файл blog.php по аналогии с index.php:
1 2 3 4 5 6 7 8 9 | <?php /* Template Name: Blog */ ?> <?php get_header(); ?> <?php get_template_part('loopblog'); ?> <?php get_sidebar(); ?> <?php get_footer(); ?> |
Эта конструкция означает, что мы создаём новый шаблон страницы под названием Blog:
1 2 3 | /*
Template Name: blog
*/ |
Детальнее о шаблонах страницы в этой заметке: https://softsprint.net/landing-page-wordpress/
Функция get_template_part(‘loopblog’) подключает файл loopblog.php, который отвечает за вывод цикла постов WordPress. Содержимое файла loopblog.php следующее:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div id="blog"> <?php query_posts('cat=-1'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article class="blog"> <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3> <p class="time"><?php the_time('F j, Y'); ?> в <?php the_time('g:i a'); ?> | <?php the_category(', '); ?> | <?php comments_number('Нет комментариев', '1 комментарий', '% комментариев'); ?></p> <?php the_content('read more >'); ?> </article> <?php endwhile; ?> <div class="navigation"> <?php posts_nav_link(); ?> </div> <?php else : ?> <div class="post"> <h2>По Вашему запросу ничего не найдено!</h2> </div> <?php endif; ?> </div> |
Следует обратить внимание, что параметр функции query_posts() изменился на ‘cat=-1’ (добавился минус) по сравнению с файлом landing.php. Это означает, что теперь мы выводим посты из всех категорий, кроме категории №1 («Без рубрики»), т.е., исключаем посты с главной страницы – нашего Landing Page.
Также удалено обращение к глобальной переменной $query_string, которое отвечает за присвоение базовых настроек вывода постов в цикле WordPress. Если мы оставим обращение к $query_string (по аналогии с файлом landing.php), то вместо вывода постов в виде блога на странице http://site.com/blog будет отображаться только содержимое этой страницы.
Последняя составляющая схемы нашего сайта — страницы сайта (page, archive, category, прочие). Цикл постов, например, для archive.php выводим так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div id="blog"> <?php global $query_string; query_posts($query_string . "&cat=-1"); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article class="blog"> <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3> <p class="time"><?php the_time('F j, Y'); ?> в <?php the_time('g:i a'); ?> | <?php the_category(', '); ?> | <?php comments_number('Нет комментариев', '1 комментарий', '% комментариев'); ?></p> <?php the_content('read more >'); ?> </article> <?php endwhile; ?> <div class="navigation"> <?php posts_nav_link(); ?> </div> <?php else : ?> <div class="post"> <h2>По Вашему запросу ничего не найдено!</h2> </div> <?php endif; ?> </div> |
Т.е., задаём параметр «cat=-1», чтобы выводить в архивах блога посты из всех категорий, кроме категории №1 («Без категории»).
Некоторый комментарии:
- Почему на стартовой странице лендинга мы выводим посты именно из категории №1 («Без категории»)? Ответ: После установки WordPress категория №1 («Без категории») создаётся автоматически, поэтому при добавлении постов не нужно им присваивать какую-либо категорию – они сразу попадут в наш лендинг (на стартовую страницу)
- Нужно ли страницам блога присваивать категорию? Ответ: Да, нужно! Например, можно создать категорию «Блог» или любую/любые другие. Если мы не присвоим вообще категорию посту, он автоматически будет добавлен в категорию №1 и попадёт на стартовую страницу – прямо в лендинг
- Как поменять порядок размещения постов на лендинге? Ответ: по умолчанию посты выводятся в хронологическом порядке – самые свежие сверху. Поменять порядок можно с помощью плагина Post Types Order. Ссылка: https://wordpress.org/plugins/post-types-order/
Также хотим обратить внимание на альтернативный способ вывода постов с помощью функции get_posts() , который может быть использован неограниченное число раз на странице (например, в подвале, в сайдбаре и т.д.). Разница между query_posts() и get_posts() в том, что get_posts() не вмешивается в базовый запрос, а создает отдельный экземпляр класса WP_Query. Итак, смотрим пример вывода постов из категории №1 в кол-ве 9 штук на странице:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id="content"> <?php $my_posts = get_posts('numberposts=9&category=1'); foreach ($my_posts as $post) : setup_postdata($post); ?> <article class="post"> <h3><?php the_title(); ?></h3> <p class="time"><?php the_time('F j, Y'); ?> в <?php the_time('g:i a'); ?> | <?php the_category(', '); ?> | <?php comments_number('Нет комментариев', '1 комментарий', '% комментариев'); ?></p> <?php the_content(); ?> </article> <?php endforeach; ?> <?php wp_reset_postdata(); ?> </div> |
На сегодня всё, а пока можете посмотреть наш Landing Page и заказать Лендинг для себя!