Улучшаем блок «Похожие записи» от JetPack

Недавно я упоминал JetPack в своей подборке базовых плагинов для WordPress, в частности, его модуль «Похожие посты». Не скажу, что это самое лучшее решение, но мне нравится и полностью устраивает. Но вот стандартный вид и расположение немного печалит.

На просторах нашёл заметку о том, как сделать этот блок лучше. Ниже приведу выдержки из неё.

Изменение места вывода блока похожих постов

По умолчанию Джетпак выводит похожие записи сразу после окончания текста поста. В большинстве случаев это хорошо, но может понадобиться изменить положение, чтобы сначала шла более важная информация.

Чтобы не потерять изменения при обновлении темы, рекомендую использовать дочернюю тему для подобных изменений. Да, и не забудьте сделать бэкап на случай, если что-то пойдёт не так.

Чтобы переместить блок, сначала нужно его отключить. Добавьте в functions.php вашей темы следующий код:

//Убираем блок похожих постов JetPack из расположения в конце поста по умолчанию
function jetpackme_remove_rp() {
	if ( class_exists( 'Jetpack_RelatedPosts' ) ) {
		$jprp = Jetpack_RelatedPosts::init();
		$callback = array( $jprp, 'filter_add_target_to_dom' );
		remove_filter( 'the_content', $callback, 40 );
	}
}
add_filter( 'wp', 'jetpackme_remove_rp', 20 );

Теперь перейдите в файл шаблона, отвечающий за страницу записи. В стандартной теме WordPress это файл single.php, но в разных темах может быть разная структура. Например, у меня в теме Flatsome этот файл находится в /template-parts/posts/content-single.php

Открыв файл шаблона, определите место, в котором хотите вывести блок похожих записей и вставьте код:

<?php echo do_shortcode( '[jetpack-related-posts]' ); ?>

Увеличиваем число похожих постов с 3 до 6

По умолчанию Джетпак выводит три поста и в плагине нет никаких настроек, чтобы изменить их количество.

Добавьте в functions.php код:

function jetpackme_more_related_posts( $options ) {
    $options['size'] = 6;
    return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_more_related_posts' );

Готово! Теперь будет выводиться по шесть постов. Однако, учитывайте, что в мобильной версии сайта получится довольно длинная вертикальная портянка. Если у вас есть какой-то контент ниже, до него могут и не долистать.

Немного стилей

Встроенные стили блока незамысловаты, что с одной стороны делает их довольно универсальными, с другой стороны выглядеть они могут чужеродно. Волшебного набора стилей «Сделать круто» не приведу, т. к. многое зависит от используемой вами темы, но поделюсь некоторыми, которые использовал сам.

Здесь для всего блока добавил внутренние поля, скруглил углы, сделал светло-серым фон и убрал внешние отступы:

#jp-relatedposts {
	padding: 30px;
	border-radius: 0.5em;
	background: #f1f1f1;
	margin: 0
}

Прячем горизонтальную линию над блоком похожих постов:

#jp-relatedposts h3.jp-relatedposts-headline em:before {
	display: none
}

Убираем непрозрачность по умолчанию:

div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post {
	-moz-opacity: 1;
	opacity: 1;
}

div#jp-relatedposts div.jp-relatedposts-items div.jp-relatedposts-post:hover {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

Скругляем изображения и добавляем отступ, чтобы заголовок записи не прилипал к миниатюре:

.jp-relatedposts-post-img {
	margin-bottom: 1.3em;
	border-radius: 0.5em
}

Делаем заголовки крупнее и жирнее:

/*Задаём размер заголовка блока*/
#jp-relatedposts h3.jp-relatedposts-headline {
	font-size: 1.6em
}

/*Задаём шрифт для заголовка блока и заголовков постов*/
#jp-relatedposts h3.jp-relatedposts-headline em,
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
	font-family: "Manrope", sans-serif;
	font-weight: bold
}

/*Делаем заголовки постов крупнее и увеличиваем межстрочный интервал*/
#jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title {
	font-size: 1em !important;
	line-height: 1.6 !important
}

Кстати, если вы вставите кастомные стили для JetPack в файл стилей темы style.css, вам придётся расставить кучу !important. Иначе Джетпак просто проигнорирует вашу тягу к прекрасному.

На этом пока всё. Если будет что добавить — дополню. Успехов!