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

Сегодня интересная статья для новичка, старающегося для своего блога практически!

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

Идея и кодовое решение с блога wp-kama, но !! я несколько код переработал под свои требования, а именно:

1 – добавил к ссылкам похожих записей миниатюры post_thumbnail. 2 – обернул всё это чудо в дивы, меж тем как у Тимура организовано тегами li – мне симпатичнее дивы, ибо к значениям li в шаблонах многое “вкупе” привязано… (ну, так привык)

Что ж, давайте подробнее и по порядку:

Отдёрнем занавес…

 

Добавляем блок похожих по теме записей рубрики (по кольцу)

 

 

 

 

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

 

 

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

 

 

Нынче, показанный код организует (и запросто) более правильную перелинковку, а именно выведет в блоке жёстко предыдущие записи. Это, может быт, более логично в плане оптимизации – рандомность) создаёт беспорядок: т.е при перезагрузке “статьи” записи меняются – этакая своеобразная автоматическая перелинковка статей блога!

 

 

 

 

 

 

 

код перелинковки статей рубрики – предыдущие по теме записи

 

 

 

 

/** Предыдущие записи из рубрики (относительно текущей записи) + кольцевая перелинковка (вызов функции: <?php kama_previous_posts_from_cat (5); ?> )
----------------------------------------------------------------------------------------
Параметры передаваемые функции. В скобках указано дефолтное значение.
post_num (4) = количество ссылок
format ('') = {date:j.M.Y} - {a}{title}{/a} ({comments})
cache ('') = включить кэш (по умолчанию выключен). Пишем 1, чтобы включить
list_tag (li или у меня div) = Тег списка.
echo (true) = Выводить на экран или возвращать для обработки (false)
*/
function kama_previous_posts_from_cat ($post_num=4, $format = '', $cache = '', $list_tag='li', $echo=true){
global $post, $wpdb;

$cache_key = (string) md5( __FUNCTION__ . $post->ID );
$cache_flag = __FUNCTION__;

if ( $cache && $cache_out = wp_cache_get($cache_key, $cache_flag) ){
if ($echo) return print($cache_out);
else return $cache_out;
}

$cat = get_the_category($post->ID);
$cat_id = (int) $cat[0]->term_id;

$same_join = "SELECT ID, post_title, post_date, comment_count, guid
FROM $wpdb->posts p
LEFT JOIN $wpdb->term_relationships rel ON (p.ID = rel.object_id)
LEFT JOIN $wpdb->term_taxonomy tax ON (rel.term_taxonomy_id = tax.term_taxonomy_id)";
$same_and = "AND tax.term_id = '$cat_id'
AND tax.taxonomy = 'category' AND p.post_status = 'publish' AND p.post_type = 'post'";
// пробуем получить предыдущие записи
$sql = "$same_join
WHERE p.ID < {$post->ID}
$same_and
ORDER BY p.post_date DESC
LIMIT $post_num";
$res = $wpdb->get_results($sql);

$count_res = count($res);

// если количество меньше нужного, делаем 2-й запрос
if ( !$res || $count_res<$post_num ){
$exclude = $post->ID;
if ($res) foreach ($res as $id) $exclude .= ','.$id->ID;
$post_num = (int) $post_num-$count_res;
$sql = "$same_join
WHERE p.ID NOT IN ($exclude)
AND p.ID != {$post->ID}
$same_and
ORDER BY p.post_date DESC
LIMIT $post_num";
$res2 = $wpdb->get_results($sql);

$res = array_merge($res,$res2);
}
if (!$res)
return false;

if ($format)
preg_match ('!{date:(.*?)}!',$format,$date_m);

$out = $x = '';
foreach ($res as $pst){
$x = ($x == 'div1') ? 'div2' : 'div1'; //'li1') ? 'li2' : 'li1'
$Title = $pst->post_title;

// прикручиваем миниатюру поста (если такая имеется)
$thumb_id = get_post_thumbnail_id($pst->ID); // прицепляем миниатюру выводить: $img_url
$thumb_url = wp_get_attachment_image_src($thumb_id,'full', true); // прицепляем миниатюру выводить: $img_url
$img_url = $thumb_url[0]; // прицепляем миниатюру выводить: $img_url
$image = $pst->$img_url; // прицепляем миниатюру выводить: $img_url onclick='return !window.open(this.href)'
// окончание цикла привязки миниатюры


$a1 = "<a href='". get_permalink($pst->ID) ."' title='{$Title}'><div class='poss'><img title='{$Title}' src='$img_url' alt='{$Title}' /></div>";
$a2 = "</a>";
//

if ($format){
$date = apply_filters('the_time', mysql2date($date_m[1],$pst->post_date));
$Sformat = str_replace ($date_m[0], $date, $format);
$Sformat = str_replace('{title}', $Title, $Sformat);

$Sformat = str_replace('{a}', $a1, $Sformat);
$Sformat = str_replace('{/a}', $a2, $Sformat);
$Sformat = str_replace('{comments}', (($pst->comment_count==0)?'':$pst->comment_count), $Sformat);
}
else
$Sformat = $a1.$Title.$a2;

$out .= "\n<div class='$x'>" . "{$Sformat}</div>";
}

if ($cache) wp_cache_add($cache_key, $out, $cache_flag);

if ($echo)
return print $out;

return $out;
}
/** предыдущие записи в рубриках **/

 

 

 

На данном этапе в коде нас теперь интересуют див классы, а именно такая строка:

 

$a1 = "<a href='". get_permalink($pst->ID) ."' title='{$Title}'><div class='poss'><img title='{$Title}' src='$img_url' alt='{$Title}' /></div>"; $a2 = "</a>";

 

 

Этот .poss див советую прописать прямо в коде (как показано в строке и коде), хотя можно как-то и в файле шаблона отдельной записи организовать: css примеры ниже…

 

 

 

 

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

 

 

В файле post-single.php ИЛИ single.php (у кого как) в необходимое местечко прописываем этот вызов функции:

 

 

<div class="pos"><?php kama_previous_posts_from_cat (4, '<div class="pos4">{a}{title}{/a}</div><hr class="ds">'); ?></div>

 

 

 

 

 

 

 

css к блоку вывода предыдущих похожих записей из рубрики

 

 

 

 

У меня неоднократно спрашивают…

 

 

как сделать блок похожих записей, чтобы визуально было как у Вас на сайте…

 

 

 

Вот стили css, такие как и у меня:

 

Класс основного блока похожих записей – pos

 

.pos {
margin: 0 24px;
border-radius: 4px 4px;
}

 

 

 

Класс блока ссылки = pos4

 

.pos4 {
border: 1px solid #DEDEDE;
border-radius: 4px 4px;
font-size: 9px;
}

 

 

 

Класс ссылки = pos a

 

.pos a {
background-color: #F5F5F5;
border-radius: 4px 4px;
border-bottom: 1px solid #AAA;
font-style: italic;
font-size: 12px;
display: block;
margin: 2px;
padding: 12px;
}

 

 

 

Класс картинки = pos img

 

.pos img {
width: 103px;
height: 73px;
float: left;
margin: -24px 9px 4px 0;
box-shadow: 1px 5px 17px -4px #777;
transition: all 1s ease-out;
}

 

 

Блок картинки = poss

 

.poss {
margin: 0;
}

 

 

Отдельный div блок “ссылки”.

 

.div1, .div2 {
background-color: #F5F5F5;
border: 1px solid #DEDEDE;
border-radius: 4px;
margin: 5px 18px;
}

 

 

 

Произвольное значение тега: hr (у нас “невидимое” подчёркивание: необходимо для разграничения – правильной геометрии блоков – элементов…) – у нас селектор hr.ds

 

hr.ds{
border:1px solid #F5F5F5;
}

 

 

 

И так далее… всё возможно поправить под свой шаблон 100%.

 

 

 

 

 

 

некоторые преимущества функции переликовки записей по кольцу

 

 

 

1. запросто можно задать (как-то на своё усмотрение) форматы вывода информации о похожих записях: комментарии в коде!
2. используется возможность включения кэширования (может не всегда оправдано, коли на сайте используется сторонний плагин кэша – тестируйте!)
3. ссылки выведутся по id, весма прилично: т.е коли вы поменяте из каких-то соображений дату поста, то – пост будет выведен в соответствии с настройками кода. Перетасовки избегаем!
4. в идее kma использовались теги li, я изменил на div, что, на мой взгляд, решает проблему более тонкой настройки: можно быстренько подогнать под любой шаблон (напоминаю: если хотите вернуть li в коде есть авторский вариант).

 

 

 

 

 

 

 

в качестве постскриптум:

 

Мне не так давно (в комментариях) посетовали на то, что я, мол, пишу не совсем понятно для новичка!!

 

Дело в том, что если приняться расписывать подробнейшим образом, получится пост вроде известного поста Л.Н. Толстого “Война и мир”…

 

Думается, вариант выхода из непоняток прост: спрашивайте… задавайте вопросы коли не ясно что. Есть же комментарии…

 

 

 

Желаю удачи в создании и ведении сайта…

 

 

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

 

 

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

!..подписываясь на обновления mihalica.ru —
...расстаёмся с невежеством..!