Я думаю, что можно с уверенностью сказать, что если вы блоггер, вы хотите выделить самый последний контент в своем блоге, чтобы люди его увидели и прочитали. Есть несколько способов сделать это, в том числе использовать разные стили для первого поста на странице блога, чтобы выделить его, или вывести его на боковую панель.
В этом уроке я покажу вам, как продвинуться дальше, чем вы, используя CSS: вместо того, чтобы просто по-другому оформлять свой первый пост в блоге, вы будете выводить для него разный контент. В частности, первый пост будет иметь заголовок, избранные изображения и контент, в то время как другие посты будут иметь только заголовок, избранные изображения и выдержки.
Вы можете адаптировать эту технику: если вам не нужно так много подробностей, вы можете изменить цикл в каждом из запросов, с которыми мы будем работать, чтобы (например) первое сообщение имело заголовок, изображение и выдержку, а другие только заголовок и изображение. Или вы могли бы опустить рекомендуемое изображение для последующих постов. Тебе решать.
Техника, которую мы будем использовать для этого, включает использование класса WP_Query для написания дополнительного запроса перед основным запросом в home.php шаблона home.php , который управляет главной страницей блога. Затем мы будем использовать pre_get_posts() для изменения основного запроса, чтобы последний пост не выводился дважды. Я создам home.php тему по умолчанию для темы Twenty Fifteen и создам для home.php файл home.php , а также таблицу стилей для настройки дочерней темы.
Что вам нужно
Чтобы следовать этому уроку, вам понадобится:
- установка для разработки WordPress
- установлена копия темы Twenty Fifteen (или вы можете работать со своей собственной темой, если хотите)
- посты, добавленные на ваш сайт — я добавил большую часть своих, импортировав данные модульного теста темы
- редактор кода
Настройка детской темы
Если вы работаете с темой Twenty Fifteen, первым шагом будет настройка вашей дочерней темы. Создайте новую папку в каталоге wp-content/themes и дайте ей имя — я называю мой tutsplus-blog-page-two-loops . Теперь создайте пустой файл style.css в этой папке и добавьте в него следующее:
|
01
02
03
04
05
06
07
08
09
10
11
|
/*
Theme Name: Tuts+ Use Two Loops on Your Main Blog Page
Theme URI: http://rachelmccollin.co.uk/wptutsplus-taxonomy-archive-list-by-second-taxonomy/
Description: Theme to support WPTutsPlus tutorial on creating a custom taxonomy archive.
Author: Rachel McCollin
Author URI: http://rachelmccollin.co.uk/
Template: twentyfifteen
Version: 1.0
*/
@import url(«../twentyfifteen/style.css»);
|
Это сообщает WordPress, что ваша тема является дочерней по отношению к теме Twenty Fifteen и импортирует таблицу стилей из этой темы. Возможно, вы захотите отредактировать некоторые детали, чтобы отразить тот факт, что это ваша тема.
Создание файла шаблона для страницы блога
Так как это главная страница блога, которую вы хотите изменить, вам нужно создать файл шаблона для этого в своей дочерней теме. Файл шаблона, который вам нужно создать, это home.php , который home.php главной страницей блога, независимо от того, является ли она главной страницей вашего сайта.
Создайте файл с именем home.php в папке вашей темы.
Теперь откройте файл index.php в Twenty Fifteen и скопируйте код в начало и конец этого файла (то есть не в цикл). Ваш файл будет выглядеть примерно так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<?php
get_header();
<div id=»primary» class=»content-area»>
<main id=»main» class=»site-main» role=»main»>
<header>
<h1 class=»page-title screen-reader-text»><?php single_post_title();
</header>
<?php // Previous/next page navigation.
the_posts_pagination( array(
‘prev_text’ => __( ‘Previous page’, ‘twentyfifteen’ ),
‘next_text’ => __( ‘Next page’, ‘twentyfifteen’ ),
‘before_page_number’ => ‘<span class=»meta-nav screen-reader-text»>’ .
) );
</main><!— .site-main —>
</div><!— .content-area —>
<?php get_footer();
|
Если вы используете свою собственную тему, скопируйте эквивалентный код из файла index.php вашей темы, чтобы у вас были элементы для вашей страницы, но без цикла.
Добавление первого цикла
Следующим шагом является создание первого цикла, который будет отображать самый последний пост в полном объеме.
Под закрывающим </header> в файле home.php добавьте аргументы для запроса:
|
1
2
3
|
$args = array(
‘posts_per_page’ => ‘1’,
);
|
Это будет просто запрос на самый последний пост. Обратите внимание, что вам не нужно указывать тип записи, и по умолчанию это 'post' .
Теперь добавьте цикл под ваши аргументы:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
$query = new WP_query ( $args );
if ( $query->have_posts() ) { ?>
<?php while ( $query->have_posts() ) : $query->the_post();
<article id=»post-<?php the_ID(); ?>» <?php post_class( ‘first-post’ );
<?php the_title( sprintf( ‘<h2 class=»entry-title»><a href=»%s» rel=»bookmark»>’, esc_url( get_permalink() ) ), ‘</a></h2>’ );
<?php if ( has_post_thumbnail() ) { ?>
<a href=»<?php the_permalink(); ?>»>
<?php the_post_thumbnail( ‘medium’, array(
‘class’ => ‘left’,
‘alt’ => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))
) );
</a>
<?php } ?>
<section class=»entry-content»>
<?php the_content();
</section><!— .entry-content —>
<footer class=»entry-footer»>
<?php twentyfifteen_entry_meta();
<?php edit_post_link( __( ‘Edit’, ‘twentyfifteen’ ), ‘<span class=»edit-link»>’, ‘
</footer><!— .entry-footer —>
</article><!— #post-## —>
<?php // End the loop.
endwhile;
rewind_posts();
} ?>
|
Этот цикл выводит заголовок сообщения, миниатюру, если таковая имеется, и содержимое.
Обратите внимание, что я добавил дополнительный класс .first-post в post_class() шаблона post_class() . Если вы хотите выделить свой первый пост с помощью CSS, этот дополнительный класс предоставляет вам простой способ сделать это.
Очень важно добавить rewind_posts() после цикла, иначе следующий цикл не будет работать.
Добавление второго цикла
Второй цикл очень похож, но вместо использования WP_Query он просто обращается к основному запросу.
Ниже только что добавленного цикла добавьте второй цикл:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<?php while ( have_posts() ) : the_post();
<article id=»post-<?php the_ID(); ?>» <?php post_class();
<?php the_title( sprintf( ‘<h2 class=»entry-title»><a href=»%s» rel=»bookmark»>’, esc_url( get_permalink() ) ), ‘</a></h2>’ );
<?php if ( has_post_thumbnail() ) { ?>
<a href=»<?php the_permalink(); ?>»>
<?php the_post_thumbnail( ‘medium’, array(
‘class’ => ‘left’,
‘alt’ => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))
) );
</a>
<?php } ?>
<section class=»entry-summary»>
<?php the_excerpt();
</section><!— .entry-summary —>
<footer class=»entry-footer»>
<?php twentyfifteen_entry_meta();
<?php edit_post_link( __( ‘Edit’, ‘twentyfifteen’ ), ‘<span class=»edit-link»>’, ‘
</footer><!— .entry-footer —>
</article><!— #post-## —>
<?php // End the loop.
endwhile;
|
Этот цикл очень похож на первый, но с двумя отличиями:
- Он выводит выдержку вместо содержания.
- Он не включает
.first-post.
Теперь сохраните ваш файл.
Смещение основного запроса с помощью pre_get_posts
В настоящий момент, если вы проверите свою главную страницу блога, вы увидите, что ваше последнее сообщение отображается дважды. Мы исправим это, pre_get_posts основной запрос с pre_get_posts хука pre_get_posts .
Создайте новый файл в вашей теме с именем functions.php . В качестве альтернативы, если вы работаете со своей собственной темой, и у нее уже есть файл функций, откройте ее.
Добавьте этот код в ваш файл функций:
|
1
2
3
4
5
6
7
8
|
<?php
// offset the main query on the home page
function tutsplus_offset_main_query ( $query ) {
if ( $query->is_home() && $query->is_main_query() ) {
$query->set( ‘offset’, ‘1’ );
}
}
add_action( ‘pre_get_posts’, ‘tutsplus_offset_main_query’ );
|
Это фильтрует основной запрос, но только на домашней странице, добавляя смещение 1.
Теперь сохраните ваш файл и посмотрите на главную страницу блога:
Есть проблема. Поскольку в моем блоге есть заметка, она отображается над самой последней записью, а это не то, что мне нужно. Он также отображает полное содержание как самого последнего сообщения, так и заметки.
Исправление липких сообщений
Это легко исправить. home.php файл home.php и добавьте еще один аргумент к аргументам вашего первого запроса:
|
1
|
‘ignore_sticky_posts’ => true
|
Это гарантирует, что WordPress игнорирует липкие сообщения при запуске первого цикла. Ваш первый набор аргументов запроса теперь будет выглядеть так:
|
1
2
3
4
|
$args = array(
‘posts_per_page’ => ‘1’,
‘ignore_sticky_posts’ => true
);
|
Теперь сохраните файл еще раз и проверьте страницу своего блога:
Так-то лучше! Самый последний пост находится вверху в полном объеме, а липкий пост — под ним, только с его выдержкой. Если вы прокрутите вниз дальше, вы увидите, что другие посты также просто показывают отрывок:
Если вы хотите игнорировать липкие сообщения во втором цикле, вы можете сделать это, добавив аргумент ignore_sticky_posts во второй запрос. Я хочу, чтобы липкие посты работали так, как они должны работать для всех, кроме моего самого последнего поста, поэтому я не буду.
Исправление нумерации страниц
Вы заметите, что если вы перейдете ко второй и последующим страницам постов (то есть страницам с разбивкой по страницам) в своем блоге, будут отображаться те же посты, что и на первой странице, а это означает, что отображаются только ваши десять последних постов! Это потому, что смещение основного запроса нарушило нумерацию страниц.
К счастью, это легко исправить, добавив функцию, добавленную в хук pre_get_posts .
Снова откройте файл functions.php и отредактируйте функцию так, чтобы она выглядела следующим образом:
|
1
2
3
4
5
|
function tutsplus_offset_main_query ( $query ) {
if ( $query->is_home() && $query->is_main_query() && !$query->is_paged() ) {
$query->set( ‘offset’, ‘1’ );
}
}
|
Здесь мы добавили условный тег is_paged() . Это проверяет страницы, разбитые на страницы, отличные от самой первой, поэтому возвращает true, если посетитель просматривает вторую или последующую страницу постов. Используя !$query->is_paged() , мы гарантируем, что запрос будет смещен, только если страница не разбита на страницы.
Теперь сохраните ваш файл и проверьте снова. Нумерация страниц теперь будет работать нормально.
Вы заметите, что тот же самый недавний пост по-прежнему отображается в верхней части страницы. Это потому, что страница использует один и тот же шаблон и те же два цикла.
На моем сайте я счастлив оставить все как есть, потому что я хочу, чтобы последнее сообщение было очень заметным. Однако, если вы хотите изменить это, вы добавите дополнительный аргумент в ваш первый запрос, а именно: 'paged' => false .
Резюме
Изменить способ вывода сообщений на главной странице вашего блога легко, используя класс pre_get_posts хуком pre_get_posts . В этом уроке вы научились:
- добавьте дополнительный цикл на страницу вашего блога, используя
WP_Queryчтобы вывести первое сообщение полностью - изменить основной запрос, чтобы первый пост не выводился дважды
- исправлять ошибки с липкими постами и нумерацией страниц
Вы можете адаптировать эту технику, чтобы отображать последние сообщения из данной категории, использовать другой контент в цикле и многое другое.