Добро пожаловать, друзья, на блог для начинающих вебмастеров. Сегодня, я хочу развить тему прошлого поста о похожих новостях для статьи. Только, сегодня, мы посмотрим, как вывести похожие новости для 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: ВНИМАНИЕ! Уважаемые, друзья! Просьба сообщать в комментариях, если какой-то код не работает. При этом сообщайте, пожалуйста, версию вашего движка. Это поможет сделать статью лучше, и при этом позволит избежать различных проблем и ошибок. Заранее благодарю.
@ Вова: :mrgreen: Выслал. Бывает)). Дак восстановите доступ.
Блин, Михаил, у меня что-то всё не как у людей, оказывается я забыл пароль к своей почте gmail, пожалуйста, вышлите мне на мыло, только удалите этот адрес из комментов. Достал я вас, извините…
@ Вова: Хорошо, вышлю на основе этого кода. Думаю до нужного сами допилите. Отпишитесь, как получите — выслал.
@ Михаил Веб:
Михаил, я все понимаю, личное время и т.д., но мне нужно здесь и сейчас (горит, как говориться), нельзя ли на почту набросок кода и css для горизонтального вывода, пожалуйста :oops:
А на блок подписываюсь, спасибо.
@ Вова: Позже будет статья — подписывайтесь.
Как сделать вывод случайных записей (из всех имеющихся)? Также с картинкой?
@ Роман: Понятно. Пока на блоге нет статьи, про это, а в комментариях постить целый пост не очень хочется. Пишите, через форму обратной связи, скину код.
Да, именно такая реализация!
@ Роман: Вы имеете ввиду реализацию, как у меня на главной или что-то другое. Вообщем покажите пример реализации, так проще будет понять, что вы имеете ввиду.
Уже нашел, спасибо! Такой вот вопрос, может не совсем по теме: как возможно реализовать функцию показа миниатюр, допустим в «недавно добавленных рубриках» или «последние новости», «последние коментарии» расположенных в сайдбарах? Может плагин какой-то есть, или код? Буду очень признателен, а то в сети ничего подобного по этому вопросу не нашел, но видел такую реализацию.
@ Роман: Насчет рамок не понял, что вы имеете ввиду, там же есть рамки?
Прошу прощения, все получилось. Хотелось бы узнать, как возможно реализовать способ выведения похожих постов с рамками, только для перваго варианта, т е не по тегам? Если Вам не трудно, поясните.
Здравствуйте! Нужна помощь, возможно что-то не так сделал. Добавил код из первго примера и все сделал как написано выше, но в результате получил строчку из ромбиков со знаком вопроса. Помогите разобраться где ошибся. Заранее спасибо!
@ Igor: Пожалуйста. А в чем конкретно проблема? Сейчас проверил, в Мозилле все также, как и везде.
Хром и Опера отображают хорошо, криво смотрится в Мозилле. Пока оставляю и спасибо за код!
@ Александр: Да, вывести можно в принципе в любом месте. Другой вопрос, зачем похожие новости в сайдбаре?
Возникла потребность в выводе похожих записей но в виджетах. Скажите можно поместить вывод не под текстом а в сайдбаре?
Спасибо за материал. Хочу спросить можно ли как-то сделать, чтобы выводились прошлые записи, а не постоянно разные, а то я сомневаюсь, что это понравится ПС.
Чтобы выводились не разные записи, удалите из кода строку:
И все. Должно работать.
Но в таком случае, если я не ошибаюсь, будут показываться только первые например 5 записей из категории/метки. А это тоже не ахти, т. к. вес будет передаваться не одинаково, а только на первые посты.
А вам какой вывод необходим? Многие используют данную функцию и никто не жалуется. И похожие записи выводятся больше для посетителей, а потом уже для ПС. Для ПС используйте перелинковку из текста. И как бы вы не мучились — не получится абсолютно одинаковое распределение веса.
Вообщем, мне не понятно, что вас смущает. Если вам не подходит данная функция найдите другую или же воспользуйтесь плагином, для этих целей.
То, что для пользователей — это ясно, но это не значит, что на это так же хорошо отреагирует и ПС. Все подходит, просто хотел узнать ответ на вопрос.
«первые например 5 записей из категории/метки» — да это так.
«вес будет передаваться не одинаково» — да.
Но вы не добьетесь передачи одинакового веса используя данную функцию или любую другую, или даже плагин для вывода похожих новостей, потому что кроме этого есть ссылки из текста статьи, возможно ссылки на предыдущую и следующую статью и т.д. А все это, сразу нарушит равномерность.
Просто регулируйте равномерность, например, с помощью ссылок из статьи.
Спасибо за интересную статью. Завтра буду как раз над этим тоже работать. Вот ваша статья и пригодится.
Пожалуйста, Елена.
Спасибо, Михаил!
Подробно, просто и доходчиво! Понравилось, забил в закладки, чтобы вернуться подсмотреть шпаргалку ;-)
Не за что, Юрий.