Ваш путь: Главная » Контент, шапка site, Сниппеты, хаки, функции » текущая страница

возможно заказать разработку или сопровождение, услуги вашего сайта/блога


обновлено 2024-02-13 в теме: Контент, шапка site; Сниппеты, хаки, функции
Запросто с WordPress создание и продвижение сайтов ATs media

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

Что ж, продолжим статью добавления ссылок на похожие записи… но уже прикрепим к ним миниатюры изображений. Всё настраиваемо и адаптивно!

Оптимизация, о которой речь, нынче очень полезна, и в плане перелинковки, и относительно удобств посетителю и админом.

Посудите: в нынешнем адаптивном “длинном” дизайне шаблонов, вывод ссылок похожих записей СЕГОДНЯШНИМ СПОСОБОМ правильный подход – в отличие размещения в сайдбаре, ибо посетитель редко достигает низа (футерной части) – ведь виджеты расположены ближе к подвалу, если смотреть сайт с телефона или планшета.


…а посему нужно как можно полезнее использовать основное статейное место сайта.

 

 

 

настраиваем похожие по теме записи и миниатюры

 

 

 

Рекомендую вернуться к статье, ссылка на которую выше, так будет понятнее.

 

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

 

 

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

Если вам нужно выводить ссылки на другие посты рубрики вверху страницы, то код, который ниже, нужно прописывать перед показанной формулировкой функции, а вот если в финале, то – после этого вызова функции, где-нить после ?> (подробнее в предыдущей статье).

 

 

 

некоторые умудряются использовать сразу два способа вывода похожих постов: и без картинок – где-то в сайдбаре, и с картинками в финалах статей…

 

 

 

А вот и нужный код вывода в записи тематически-похожих записей (пояснения работы кода чуть ниже):

 

 

<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><a href="<?php the_permalink() ?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>">
<?php the_post_thumbnail(); ?><br /><?php the_title(); ?></a></li>
<?php
}
echo '</ul>';
}
wp_reset_query();
}
?>
</div>

 

 

Прописывайте этот код так, чтобы не “разрывать” процессы/циклы иных функций файла post-single.php

 

…сохраняйте и смотрите что получилось на сайте… Файл стилей пока не трогаем.

 

 

Обратите внимание на див класс <div class=″sample-posty″>, который образует селектор CSS .sample-posty – если вы уже пробовали способ вывода аналогичных статей рубрики БЕЗ картинок, то удалите или закомментируйте относящийся к нему селектор.

Файл стилей style.css не нужно бессмысленно загружать!

 

 

Также возможен способ перемены имени показанного кода css ниже, если предыдущий селектор удалять жаль. Например sample-posty замените на sample-posty2 или как-то иначе…

 

 

Собственно вот код CSS, относящийся к сегодняшний теме:

 

 

/*похожие записи*/
.sample-posty p{
font-weight: 700;
color: #878787;
font-size: 16px;
margin: 5px 0;
font-style: italic;
}
.samp {
font-weight: 700;
color: #878787;
}
.sample-posty li{
float: left;
width: 110px;
margin: 0;
padding: 0;
background: #f8f8f8;
}
/*li:hover{}*/
.sample-posty li a{
text-align: center;
/*display: block;*/
padding: 5px;
}
.sample-posty li img{
width: 95px; /*ширина картинки*/
height: 67px; /*высота картинки*/
}

 

 

Повторяться разъяснениями свойств селекторов CSS и их значений сегодня не стану, ибо в прошлых статьях уже много говорили.

 

 

 

 

А вот к php коду вывода интересных записей по теме дам пояснения…

 

 

 

Вот строка: ‘category__in’ => $category_ids, – если её заменить такой – ‘tag__in’ => $tag_ids,

то сортировка близких по духу статей будет отрабатываться по тегам.

 

Настроек ради, обратите внимание на строку ‘orderby’=>rand,

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

 

Далее ‘caller_get_posts’=>1 – запрещает повторение одноимённых статей.

 

Cтрока ‘showposts’=>3 – цифра, есть количество выводимых ссылочек на похожие темы.

 

 

 

Таким образом, регулируя вышепоказанные настройки, вы сможете добиться оптимального результата своим требованиям отображения похожих записок блога – в финале поста, или же перед его стартом (где-то в информационном описании статьи) – как оформить статью тегами h3 – h4-5

 

 

Думается, на этой высокой ноте настроек своего настроения можно и закончить на сегодня)

 

 

А коли не ясно, всегда можно спросить в комментариях…

 

 

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

Очень рекомендую! да и способ более продвинутый!!

 


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

 


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

 

 

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !


Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...





Нажатия на кнопочки определяют Ваше высокое гражданское сознание

Поделитесь соображениями: Ваши мысли очень важны!

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©


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

    Ответить - Сурен

    • Здравствуйте!

      но не говорите как вывести первое изображение записи.

      Можно вывести и “первое изображение записи”, однако, предложенный код рассчитан на вывод миниатюры. Так как миниатюра имеет меньший вес (т.к размер генерируется движком)…
      А если выводить любую первую картинку (если в записи нет миниатюр), то для начала нужно настроить генерацию необходимого размера картинки…
      Как правило в теле статьи используются большие по размеру фотки, а их НЕцелесообразно выводить в качестве миниатюр для “похожих записей”…
      Мы же не имеем цели тормозить скорость загрузки страницы!?
      Словом, нужно определиться, что наиболее важно для вас, а потом уж править код!

      Ответить - Михаил