Добро пожаловать, друзья, на блог для начинающих вебмастеров. Сегодня, я хочу развить тему прошлого поста о похожих новостях для статьи. Только, сегодня, мы посмотрим, как вывести похожие новости для WordPress без плагина. Причем вывод мы сделаем с картинками и с описаниями, как это сделали для dle. Конечно, для wordpress существует множество различных плагинов, которые могут облегчить жизнь в этом деле, но мы ведь не ищем легких путей, да и лишние плагины нам не к чему, когда можно все сделать и без них.
Содержание:
Вывод похожих постов wordpress с картинками из категории.
Вывод похожих постов wordpress с картинкой из меток (тегов).
Похожие новости wordpress с картинкой из меток (тегов), без плагинов.(Обновление от 13.07.2013)
Вывод похожих постов wordpress с картинкой и описанием.
Вывод похожих постов wordpress с картинками и описанием (второй способ).
Вывод похожих постов wordpress с картинками из категории, без плагинов
Чтобы вывести похожие новости, достаточно добавить код в файл singe.php (одна запись). Куда добавлять код, это уже полет вашей фантазии, но обычно код прописывается после статьи, то есть после:
<?php the_content(); ?>
Вот код, после вставки, которого, у вас под статьей начнут отображаться похожие новости wordpress.
<div class="related_posts">
<h3>Ваш заголовок для блока с похожими постами</h3>
<?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'=>3,
'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" title="<?php the_title(); ?>"><div id="box-cel"><?php the_post_thumbnail(array( 150,150 )); ?><br><?php the_title(); ?></div></a></li>
<?php
}
echo '</ul>';
}
wp_reset_query();
}
?></div>
Данный код будет выводить список похожих новостей из этой же рубрики, в которой находится новость. Конечно, можно сделать и по другому, например, чтоб выводился список из использованных в статье тегов. Но все же, я склоняюсь к такому выводу, потому что выводить похожие посты wordpress из категории, на мой взгляд правильнее, нежели из тегов. Хотя, вы можете считать по другому.
Что вы можете поменять в этой структуре на свой лад?
'showposts'=>3,
Данная строка отвечает за количество похожих сообщений. То есть, если цифра будет пять, а не три, то выводиться будет пять постов.
<?php the_post_thumbnail(array( 150,150 )); ?>
Здесь вы можете заменить размер миниатюры на свой. Сейчас, он равен 150 пикселям, по обоим сторонам.
Похожие новости wordpress с картинкой из меток (тегов), без плагинов
Все же, покажу вывод из тегов. Вдруг кому-нибудь пригодится. Здесь все просто. Берете код, который предназначен для вывода с помощью рубрик. Находите в нем такую строку:
'category__in' => $category_ids,
И заменяете ее на:
'tag__in' => $tag_ids,
И все, с этого момента, похожие новости wordpress будут выводиться из меток.
После добавления кода вывода похожих новостей в код вашего шаблона. Должно выглядеть примерно так:
Как видите — приемлемо, но можно сделать лучше. Например, прописать в css, следующие стили:
.related_posts{
width: 580px;
height: 300px;}
.related_posts ul li{
height: 205px;
border: 1px solid #C3B17F;
border-radius: 3px;
float: left;
list-style: none;
margin: 1px;
padding: 15px;
text-align: center;
width: 158px;
overflow: hidden;}
.related_posts ul li:hover {
background:#F9E9C2;
border: 1px dashed #39B6F9;
}
И тогда данный блок станет выглядеть вот так:
И при наведении, будет подсвечиваться рамка вокруг картинки. Главное не забудьте стили, которые я вам даю редактировать под свои нужды и параметры.
Похожие новости wordpress с картинкой из меток (тегов), без плагинов.(Обновление от 13.07.2013)
Обновление связано с тем, что предыдущий вариант кода возможно не правильно выводит похожие записи wordpress из тегов (меток). Поэтому, если у кого-то есть проблемы с правильным выводом постов, попробуйте предложенный ниже вариант кода. Надеюсь на обратную связь.
<?php
$orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
echo '<div class="related_posts"><h4>Похожие статьи</h4>';
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>6,
'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() ?>" title="<?php the_title(); ?>"><div id="box-cel"><?php the_post_thumbnail(array( )); ?><?php the_title(); ?></div>
</a></li>
<?php
}
echo '</ul></div>';
}
wp_reset_query();
}
?>
В этом варианте кода использован такой же вывод похожих статей. За исключением того, что не использован рандомный вывод. Также, как и в предыдущем варианте, есть возможность изменить количество выводимых новостей в строке:
'posts_per_page'=>6,
Просто поменяйте числовое значение на нужное. То есть цифру шесть.
Похожие посты wordpress с картинкой и описанием, без плагинов
Еще, похожие статьи, можно вывести не только с картинкой и названием, но и с описанием. В прошлой статье, о похожих новостях dle, была просьба показать примерно такой же вывод, то есть с описанием, но для wordpress.
На самом деле, для того, чтобы вывести описание, достаточно просто дописать нашу конструкцию. И самый простой варианта, это добавить:
<?php the_excerpt(); ?>
Тогда наш код станет выглядеть так:
<div class="related_posts">
<h3>Ваш заголовок для блока с похожими постами</h3>
<?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'=>3,
'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" title="<?php the_title(); ?>"><div id="box-cel"><?php the_post_thumbnail(array( 150,150 )); ?><br><?php the_title(); ?></div></a></li><?php the_excerpt(); ?>
<?php
}
echo '</ul>';
}
wp_reset_query();
}
?></div>
При добавлении данной функции, у нас начнет выводиться наша цитата. Которая будет обрезаться по умолчанию после 55 слов и заканчиваться она будет так: […] Данное описание вы можете заполнять сами, при добавлении новости. Для этого достаточно в настройках экрана, поставить галочку, рядом с пунктом «цитата» и при написании статьи, заполнять поле. Если вас не устраивает, что цитата расчитана на 55 слов, а вам нужно меньше, то это так же поправимо. Для того, чтобы обрезать описание на необходимом количестве слов, достаточно добавить в файл functions.php фильтр. Выглядит он так:
function new_excerpt_length($length) {
return 20;
}
add_filter('excerpt_length', 'new_excerpt_length', 99999);
Где «20» — это количество слов после которого описание будет обрезано. 99999 — это приоритет перед различными плагинами, которые могут использовать данную функцию. И выглядеть это будет так:
Остается только поиграть со стилями. Кстати, если поле «цитата» не будет заполнено, то будет выводится первые 20 слов из самой статьи. И учтите, что если вы добавите фильтр на 20 слов, то на страницах категорий, описание также будет обрезано.
Похожие статьи wordpress с картинками и описанием, без плагинов (второй способ)
Есть еще один способ добавления описания, для похожих новостей. И в этом случае, описание будет браться из meta-описания вашей статьи, если вы используете плагин All In One SEO Pack и заполняете поле с описанием, то описание будет взято именно оттуда. А если поле с описанием не будет заполнено, то будет выведена надпись об этом.
Итак, чтобы сделать вывод описания из meta, нужно взять наш изначальный код и найти, например, закрывающий тег li (вы можете поэкспериментировать, куда добавить описание):
</li>
И после, добавить:
<?php
$my_descr = get_post_meta($post->ID, "_aioseop_description", true);
if ($my_descr){
echo "$my_descr";
}
else echo "Нет описания для данной страницы ";
?>
Вот и все, теперь остается только отредактировать стили css. Например, можно сделать так:
Для этого, после:
else echo "Нет описания для данной страницы ";
?>
Добавить:
<hr>
И в стили css (style.css), добавить:
hr{
clear: both;
border: 1px solid #C3B17F;}
#box-cel img{
float: left;
margin: 0 10px 10px 0;}
И все.
На этом, я сегодня буду заканчивать. Кто в чем-то не разобрался, спрашивайте в комментариях. И не забывайте ставить лайки и плюсы, если вам помог данный пост.
Удачи, друзья!
UPD: ВНИМАНИЕ! Уважаемые, друзья! Просьба сообщать в комментариях, если какой-то код не работает. При этом сообщайте, пожалуйста, версию вашего движка. Это поможет сделать статью лучше, и при этом позволит избежать различных проблем и ошибок. Заранее благодарю.
@ Андрей:
Эти изображения для похожих постов и есть миниатюры. Просто данный плагин автоматически берет изображение из статьи и создает из него миниатюру, после чего выводит в блоке похожих новостей.
Если перейдете по ссылке, которую я Вам опубликовал в прошлом комментарии, там сможете найти код, который делает тоже самое в очень упрощенном виде. Но при этом естественно придется покопаться в коде.
@ Михаил Веб:
Миниатюры я не использовал с самого начала, просто добавлял картинку, она и выводилась на первой странице и внутри записи.
использую на данный момент плагин (WordPress Related Posts)сайт нагружает очень сильно, но сделал чтоб в похожих записях выводились не все посты, а только за последний месяц, то-есть выводится 5 постов и всем им не больше месяца.
Нашел код, который выводит первую картинку, но настроить под него стили, чтоб корректно отображалось не получается. Если не получится с этим кодом, добавлю миниатюры.
@ Авадим:
Здравствуйте.
Не совсем Вас понял. Вы предлагаете на основе этого кода, создать плагин?
Изображения, к сожалению, пока добавлять в комментарии невозможно.
@ Андрей:
Здравствуйте.
А чем Вам миниатюры не угодили?
Что за плагин?
Можно поступить, например, таким образом, чтобы миниатюры назначались автоматически. Подробнее об этом можно прочесть в этой статье: http://sdelaemblog.ru/miniatyuri-wordpress/
Так, очень понравился плагин, мне бы хотелось его улучшить, знаю как программируются виджеты в WordPresse, ну там чтобы не добавлять в тему а сразу в любой сайдбар, так, смотрите, есть возможность подключить еще и теги, если допилить админ часть, есть идея, как это сделать. Смотрите задумка такая — сейчас поясню на примере рисунка
Здравствуйте, подскажите как можно выводить похожие посты с картинками, но без использования миниатюр, по такому прицепу у меня работает плагин, от которого я хочу избавится. Миниатюры я не использовал…
@ Алексей:
Пожалуйста!
А чем оформление хуже? В чем разница?
Спасибо! Все работает! Только оформление немного похуже чем когда плагин выводит.
@ Анатолий:
Пожалуйста, рад, что все получилось.
Спасибо я попробовал всё заработала.
@ Micro: Благодарю за Ваше ожидание и замечание о проблеме. Статья обновлена. Попробуйте так:
http://sdelaemblog.ru/poxozhie-novosti-wordpress-s-kartinkoj-i-opisaniem-bez-plaginov/#name5
Надеюсь на положительный результат. :-) Сообщите, пожалуйста, о результате.
Спасибо. Впрочем, я не утверждал что код неработоспособен, просто в моем случае с метками не работает (с категориями все ок). Если появится обновленный код, то обязательно проверю. Сейчас юзаю вывод по категориям… На счет форматирования — я использовал форматирование (иконка code), но видимо поспешил и что-то упустил, потому так коммент выелся.
@ Micro: :-? Значит смотрите. Сейчас на сайте, в статьях выводятся два блока похожих новостей.
Первый: «Похожие статьи» — выводит статьи из тегов. Код использован другой — не тот, что используется в статье.
Второй блок: «Сейчас читают» — вывел специально для Вас из тегов. Используется вывод из тегов (из статьи) и отключен random.
И как видите вывод абсолютно одинаков. Похожие записи выводятся из тегов, как в первом случае, так и во втором.
Единственная разница — я использую более свежую версию wordpress — может из-за этого, но не факт. И тема соответственно другая.
Вывод: Я по-прежнему убежден, что предложенный мной вывод работоспособен. Но не проверял на разных версиях, увы.
А вообще, спасибо, за замечание. На выходных постараюсь найти время и обновить статью — добавлю другой код, для вывода из тегов. Но на версии, боюсь не проверю, так как времени не хватает.
Если я Вас не убедил, то дождитесь обновления статьи — я сообщу об этом здесь, в комментариях. После чего, проверьте другой код и если не сложно, напишите о результате.
Да, и по поводу форматирования кода в комментах. Народ, для кого добавлена панель? В ней есть все необходимое — используйте. И коды будут отображаться правильно, и мне не придется править Ваши комментарии.
точно не работает по тегам)) выводит в этом случае тотальный рандом без оглядки на теги и категории…. Тема twentyTwelwe, wp3.42 ( некоторым записям присвоено несколько тегов). Код так отформатировался в комментах, в файл код вставлен правильно…
@ Micro: Боюсь Вы ошибаетесь. Все прекрасно работает. Кстати, обратите внимание на код, который добавили в комментарий — он не корректен.
========================
1
И заменяете ее на:
1
так кстати не выводит статьи из тегов, выводятся из рубрик
@ Майя: Не за что. :-)
@ Михаил Веб:
Большое спасибо.8)
@ Майя: Здравствуйте. Чтобы горизонтальный ряд был не один, просто укажите большее количество похожих записей. Но при этом, у блока должна быть ширина в пикселях. Если стили брали отсюда, то в коде ширина указана. Поменять количество постов можно в строке:
Вместо цифры «3», укажите, например, шесть, тогда будет два горизонтальных ряда.
Закрыть блок от индексации очень просто. Достаточно добавить тег noindex, перед кодом и после, то есть открывающий и закрывающий. Должно выглядеть примерно так:
Ну, а чтобы закрыть ссылки в nofollow. Достаточно ссылке добавить атрибут rel=»nofollow». То есть просто замените:
На:
Михаил Веб пишет:
Михаил, еще один вопрос, как закрыть блок от индексации добавить nofollow?