softsprint menu Заказать

Landing Page на WordPress. Как создать?

Ноябрь 16, 2014 в 10:53 | wiki

Существует много решений, как создать Landing Page на базе WordPress – всё ограничивается фантазией разработчика и требованиями заказчика. Сегодня мы рассмотрим один из подходов создания лендинга на WordPress.

landing softsprintСхема нашего сайта на WordPress:

Логика следующая: на стартовую страницу выводим посты во всю ширину окна браузера – это и будут наши блоки лендинга (на схеме 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 (детальнее было описано здесь: http://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 и рассматривался здесь: http://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 особенности:

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
*/

Детальнее о шаблонах страницы в этой заметке: http://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 («Без категории»).

Некоторый комментарии:

Также хотим обратить внимание на альтернативный способ вывода постов с помощью функции 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 и заказать Лендинг для себя!

landing

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

Давайте обсудим

softsprint heart

Наши контакты

Львов, Украина
mob: +380 97 551 44 55
skype: softsprint.net

Скажите Привет!