SOFT
SPRINT

softsprint.net Shop

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:

<?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:

<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/ , но имеет особенность:

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:
<?php
/*
Template Name: Blog
*/
?>
<?php get_header(); ?>
<?php get_template_part('loopblog'); ?> 
<?php get_sidebar(); ?> 	
<?php get_footer(); ?>

Эта конструкция означает, что мы создаём новый шаблон страницы под названием Blog:

/*
Template Name: blog
*/

Детальнее о шаблонах страницы в этой заметке: https://softsprint.net/landing-page-wordpress/
Функция get_template_part(‘loopblog’) подключает файл loopblog.php, который отвечает за вывод цикла постов WordPress. Содержимое файла loopblog.php следующее:

<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 выводим так:

<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 штук на странице:

<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 и заказать Лендинг для себя!

landing

Также Вы можете изучить наш главный сайт на WordPress:
softsprint

CONTACT US
Cookies | Privacy Policy | Terms and ConditionsSoftSprint ©