Как добавить в статью ссылки на похожие записи — с миниатюрами — без плагина

Нынче мы реализуем на своём блоге или сайте вывод похожих по теме записей, не применяя плагинов, и вопрос – как сделать красивые ссылки на другие интересные посты в финале статьи отпадёт.

Тем паче что в следующем посте мы настроим ссылочный вариант похожего полезного контента, но уже с миниатюрками, настраиваемыми под любой адаптивный дизайн. Способы отлично и здорово рабочие. И также без плагинов..!

…без лишнего засорения и утяжеления блога.

Приступим:

оформляем ссылки на другие тематические посты нашего сайта

…нам потребуется, наша уверенность и сосредоточенность… и, конечно же, файл, отвечающий за вывод контента вообще (в корне вашей темы)

У меня этот файл с именем post-single.php у вас может быть и иной, к примеру просто single.php – смотрите…

Упреждаю: всё это достаточно легко реализуется, а вся сложность предприятия кроется в наладке отображения, то бишь дизайна – ведь у каждого из нас свои уникальные сайты) а ещё пуще и свои прихоти к картинке своего детища web проекта.

Единственное ! вам будет нужно покопаться в селекторах css в своём шаблоне, – я ниже предложу в общем-то рабочие свойства css ссылок на похожие записи.

Значится так: открываем файл вывода статей… и прикинем, определимся с местом вывода других записей рубрики (можно будет настроить отображение похожих записей поля МЕТОК, но далее…) –

…обычно всю эту похоЖесть контента выводят в финале статей.

Отыщите в своём файле что-то похожее на приведённый код ниже. Именно сыщите этот кусочек the_content('') – этот вензель (функция) отвечает за вывод всей массы статьи, так сказать…

Что ещё: в вашем коде, возможно, не будет строки 3 (точнее, будет, несколько отличаться…) – это “листалка” длинных текстов статей. Если вам также нужно на своём сайте разбивать длинные статьи на части или страницы, то вот статья: Как разбить текст статьи на части или странички wordpress

<?php
     the_content('');
     wp_link_pages( array( 'before' => '<div class="lists"><p>' . __( 'Следующая страничка:', 'themater' ) . '', 'after' => '</p></div>' ) );
           
 ?>

А мы продолжаем:

…пропишем в своём файле после тега ?> ( приведённого выше кода) следующее решение организующее полезный вывод ссылок на аналогичные статьи блога – в общем полезная примочка сайту – пассивная перелинковка страниц!

<div class="sample-posty">
<p>читайте также:</p>
<?php
$categories = get_the_category($post->ID);
if ($categories) {
        $category_ids = array();
	foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
	$args=array(
	'category__in' => $category_ids,
	'post__not_in' => array($post->ID),
	'showposts'=>5,        // колличество отображаемых ссылок
        'orderby'=>rand,       // рандомное отображение ссылок, возможно закомментить или удалить строку
	'caller_get_posts'=>1);// запрет показа ссылки читаемой записи
	$my_query = new wp_query($args);
	if( $my_query->have_posts() ) {
	echo '<ul>';
	while ($my_query->have_posts()) {
	$my_query->the_post();
?>   
<li><span><a href="<?php the_permalink() ?>" rel="nofollow" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></span></li>
<?php
}
echo '</ul>';
}
wp_reset_query();
}
?></div>

Теперь, как вы догадались, подредактируем файл стилей style.css, конечно же, если это вам необходимо.

как оформить ссылки похожих записей блога/сайта – CSS

Перед этим действом давайте поступим так, ибо правильнее: как только пропишите и сохраните вашу редакцию post-single.php или single.php обновите страничку со статьёй и взгляните на то, что у вас получилось без применения стилистики CSS приведённой ниже.

Но коли необходимы css-регулировки, то – вот код.

Он приблизительный (ибо требования у всех разные) – но в нём есть всё нужное для старта и правки/подстройки к своему дизайну. Также вы можете поубирать ненужные селекторы/свойства.

/*похожие записи*/
.sample-posty p{
font-weight: 700; /*жирный шрифт*/
color: #878787; /*цвет шрифта заголовка*/
font-size: 16px; /*размер шрифта*/
margin: 5px 0; /*положение*/
font-style: italic; /*наклон щрифта*/
}
.sample-posty li{
/*float:left; раскомментировать, если выводить в ширину имена постов*/
font-weight: 700;
color: #878787; /*размер названия поста*/
margin: 10px 0 0 10px; /*положение*/
padding: 0;
font-style: italic;
}

На этом занавес представления опускается…
…на рампы пыль печальная ложится…

Online консультация по настройкам и созданию сайтов на WordPress