SdelaemBlog

Создание Сайтов и их настройка

Похожие новости WordPress с картинкой и описанием, без плагинов.

Главная Статьи WordPress Похожие новости WordPress с картинкой и описанием, без плагинов.
#WordPress

18 декабря 2012

Добро пожаловать, друзья, на блог для начинающих вебмастеров. Сегодня, я хочу развить тему прошлого поста о похожих новостях для статьи. Только, сегодня, мы посмотрим, как вывести похожие новости для WordPress без плагина. Причем вывод мы сделаем с картинками и с описаниями, как это сделали для dle. Конечно, для wordpress существует множество различных плагинов, которые могут облегчить жизнь в этом деле, но мы ведь не ищем легких путей, да и лишние плагины нам не к чему, когда можно все сделать и без них.

Похожие новости 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 будут выводиться из меток.

После добавления кода вывода похожих новостей в код вашего шаблона. Должно выглядеть примерно так:

 Вывод похожих постов 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 с картинкой

И при наведении, будет подсвечиваться рамка вокруг картинки. Главное не забудьте стили, которые я вам даю редактировать под свои нужды и параметры.

Похожие новости 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 — это приоритет перед различными плагинами, которые могут использовать данную функцию. И выглядеть это будет так:

Вывод похожих постов wordpress с картинкой и описанием.

Остается только поиграть со стилями. Кстати, если поле «цитата» не будет заполнено, то будет выводится первые 20 слов из самой статьи. И учтите, что если вы добавите фильтр на 20 слов, то на страницах категорий, описание также будет обрезано.

Похожие статьи wordpress с картинками и описанием, без плагинов (второй способ).

Есть еще один способ добавления описания, для похожих новостей. И в этом случае, описание будет браться из meta-описания вашей статьи, если вы используете плагин All In One SEO Pack и заполняете поле с описанием, то описание будет взято именно оттуда. А если поле с описанием не будет заполнено, то будет выведена надпись об этом.

Вывод похожих постов wordpress с картинками и описанием (второй способ).

Итак, чтобы сделать вывод описания из meta, нужно взять наш изначальный код и найти, например, закрывающий тег li (вы можете поэкспериментировать, куда добавить описание):

</li>

И после, добавить:

<?php
$my_descr = get_post_meta($post->ID, "_aioseop_description", true);
if ($my_descr){
echo "$my_descr";
}
else echo "Нет описания для данной страницы ";
?>

Вот и все, теперь остается только отредактировать стили css. Например,  можно сделать так:

Вывод похожих постов wordpress с картинками и описанием

Для этого, после:

else echo "Нет описания для данной страницы ";
?>

Добавить:

<hr>

И в стили css (style.css), добавить:

hr{
clear: both;
border: 1px solid #C3B17F;}
#box-cel img{
float: left;
margin: 0 10px 10px 0;}

И все.

На этом, я сегодня буду заканчивать. Кто в чем-то не разобрался, спрашивайте в комментариях. И не забывайте ставить лайки и плюсы, если вам помог данный пост.

Удачи, друзья!

UPD: ВНИМАНИЕ! Уважаемые, друзья! Просьба сообщать в комментариях, если какой-то код не работает. При этом сообщайте, пожалуйста, версию вашего движка. Это поможет сделать статью лучше, и при этом позволит избежать различных проблем и ошибок. Заранее благодарю.

Оставьте свой коммент
ДОСТАВКА СТАТЕЙ ПОЧТОЙ, на дом

Комментарии

  1. Юрий

    Спасибо, Михаил!
    Подробно, просто и доходчиво! Понравилось, забил в закладки, чтобы вернуться подсмотреть шпаргалку ;-)

    5 лет назад19.12.2012 Ответить
    • Михаил Веб

      Не за что, Юрий.

      5 лет назад19.12.2012 Ответить
  2. Елена

    Спасибо за интересную статью. Завтра буду как раз над этим тоже работать. Вот ваша статья и пригодится.

    5 лет назад19.12.2012 Ответить
    • Михаил Веб

      Пожалуйста, Елена.

      5 лет назад19.12.2012 Ответить
  3. Тарас

    Спасибо за материал. Хочу спросить можно ли как-то сделать, чтобы выводились прошлые записи, а не постоянно разные, а то я сомневаюсь, что это понравится ПС.

    5 лет назад26.12.2012 Ответить
    • Михаил Веб

      Чтобы выводились не разные записи, удалите из кода строку:

      'orderby'=>rand,

      И все. Должно работать.

      5 лет назад26.12.2012 Ответить
      • Тарас

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

        5 лет назад26.12.2012 Ответить
        • Михаил Веб

          А вам какой вывод необходим? Многие используют данную функцию и никто не жалуется. И похожие записи выводятся больше для посетителей, а потом уже для ПС. Для ПС используйте перелинковку из текста. И как бы вы не мучились — не получится абсолютно одинаковое распределение веса.
          Вообщем, мне не понятно, что вас смущает. Если вам не подходит данная функция найдите другую или же воспользуйтесь плагином, для этих целей.

          5 лет назад26.12.2012 Ответить
          • Тарас

            То, что для пользователей — это ясно, но это не значит, что на это так же хорошо отреагирует и ПС. Все подходит, просто хотел узнать ответ на вопрос.

            5 лет назад26.12.2012 Ответить
            • Михаил Веб

              «первые например 5 записей из категории/метки» — да это так.
              «вес будет передаваться не одинаково» — да.
              Но вы не добьетесь передачи одинакового веса используя данную функцию или любую другую, или даже плагин для вывода похожих новостей, потому что кроме этого есть ссылки из текста статьи, возможно ссылки на предыдущую и следующую статью и т.д. А все это, сразу нарушит равномерность.
              Просто регулируйте равномерность, например, с помощью ссылок из статьи.

              5 лет назад26.12.2012 Ответить
  4. Александр

    Возникла потребность в выводе похожих записей но в виджетах. Скажите можно поместить вывод не под текстом а в сайдбаре?

    4 года назад31.01.2013 Ответить
  5. Михаил Веб

    @ Александр: Да, вывести можно в принципе в любом месте. Другой вопрос, зачем похожие новости в сайдбаре?

    4 года назад31.01.2013 Ответить
  6. Igor

    Хром и Опера отображают хорошо, криво смотрится в Мозилле. Пока оставляю и спасибо за код!

    4 года назад21.02.2013 Ответить
  7. Михаил Веб

    @ Igor: Пожалуйста. А в чем конкретно проблема? Сейчас проверил, в Мозилле все также, как и везде.

    4 года назад21.02.2013 Ответить
  8. Роман

    Здравствуйте! Нужна помощь, возможно что-то не так сделал. Добавил код из первго примера и все сделал как написано выше, но в результате получил строчку из ромбиков со знаком вопроса. Помогите разобраться где ошибся. Заранее спасибо!

    4 года назад21.02.2013 Ответить
  9. Роман

    Прошу прощения, все получилось. Хотелось бы узнать, как возможно реализовать способ выведения похожих постов с рамками, только для перваго варианта, т е не по тегам? Если Вам не трудно, поясните.

    4 года назад21.02.2013 Ответить
  10. Михаил Веб

    @ Роман: Насчет рамок не понял, что вы имеете ввиду, там же есть рамки?

    4 года назад21.02.2013 Ответить

Чтобы оставить комментарий, заполните, пожалуйста форму ниже:

Смайлы

Обязательно для Заполнения!

Обязательно для Заполнения!

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Отправить жалобу разработчику сайта

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

[contact-form-7 404 "Not Found"]

Спасибо большое за поддержку проекта! :)

Для поддержки проекта, выберите убодный способ для оплаты: