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

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

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

Добро пожаловать, друзья, на блог для начинающих вебмастеров. Сегодня, я хочу развить тему прошлого поста о похожих новостях для статьи. Только, сегодня, мы посмотрим, как вывести похожие новости для 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. Михаил Веб

    @ Вова: :mrgreen: Выслал. Бывает)). Дак восстановите доступ.

    Ответить
  2. Вова

    Блин, Михаил, у меня что-то всё не как у людей, оказывается я забыл пароль к своей почте gmail, пожалуйста, вышлите мне на мыло, только удалите этот адрес из комментов. Достал я вас, извините…

    Ответить
  3. Михаил Веб

    @ Вова: Хорошо, вышлю на основе этого кода. Думаю до нужного сами допилите. Отпишитесь, как получите — выслал.

    Ответить
  4. Вова

    @ Михаил Веб:
    Михаил, я все понимаю, личное время и т.д., но мне нужно здесь и сейчас (горит, как говориться), нельзя ли на почту набросок кода и css для горизонтального вывода, пожалуйста :oops:
    А на блок подписываюсь, спасибо.

    Ответить
  5. Михаил Веб

    @ Вова: Позже будет статья — подписывайтесь.

    Ответить
  6. Вова

    Как сделать вывод случайных записей (из всех имеющихся)? Также с картинкой?

    Ответить
  7. Михаил Веб

    @ Роман: Понятно. Пока на блоге нет статьи, про это, а в комментариях постить целый пост не очень хочется. Пишите, через форму обратной связи, скину код.

    Ответить
  8. Роман

    Да, именно такая реализация!

    Ответить
  9. Михаил Веб

    @ Роман: Вы имеете ввиду реализацию, как у меня на главной или что-то другое. Вообщем покажите пример реализации, так проще будет понять, что вы имеете ввиду.

    Ответить
  10. Роман

    Уже нашел, спасибо! Такой вот вопрос, может не совсем по теме: как возможно реализовать функцию показа миниатюр, допустим в «недавно добавленных рубриках» или «последние новости», «последние коментарии» расположенных в сайдбарах? Может плагин какой-то есть, или код? Буду очень признателен, а то в сети ничего подобного по этому вопросу не нашел, но видел такую реализацию.

    Ответить
  11. Михаил Веб

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

    Ответить
  12. Роман

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

    Ответить
  13. Роман

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

    Ответить
  14. Михаил Веб

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

    Ответить
  15. Igor

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

    Ответить
  16. Михаил Веб

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

    Ответить
  17. Александр

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

    Ответить
  18. Тарас

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

    Ответить
    1. Михаил Веб

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

      'orderby'=>rand,

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

      Ответить
      1. Тарас

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

        Ответить
        1. Михаил Веб

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

          Ответить
          1. Тарас

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

            Ответить
            1. Михаил Веб

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

              Ответить
  19. Елена

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

    Ответить
    1. Михаил Веб

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

      Ответить
  20. Юрий

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

    Ответить
    1. Михаил Веб

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

      Ответить

Нажимая на кнопку "Комментировать" Вы согласшаетесь с условиями политики конфиденциальности

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

Навигация по статье
Как включить смайлики wordpress и заменить на свои?

Сегодня не увидишь сайтов, которые не использовали бы на своих страницах смайлы. Ведь именно эти эмоциональные картинки добавляют прилив динамики на сайт и посетители могут высказать свои эмоции, которые довольно сложно передать словами. Но не каждый, особенно начинающий, вебмастер знает, что смайлики есть даже на движке wordpress. Просто для их вывода нужно добавить небольшой php-код…

Как включить смайлики wordpress и заменить на свои?

Как добавить форму поиска на сайт wordpress?

Сегодня я расскажу, как добавить форму поиска на сайт wordpress без использования виджетов, если она отсутствует. Ведь с помощью виджетов поиск по сайту можно поставить только в боковую колонку (сайдбар), но это не всегда то место, где хотелось бы видеть форму поиска. Поэтому сегодня мы разберем вопросы: как быстро определить будущее местоположение в самом коде темы и конечно же как добавить поиск в нужное место на сайте вордпресс.

Как добавить форму поиска на сайт wordpress?

Тег more — как редактировать ссылку читать далее на wordpress

Вывод тега more на wordpress в том виде, в котором нужно вам, а не по умолчанию. Вместо надоевшего «Читать Далее» можно написать любой текст, вплоть до уникального текста ссылки, для каждой статьи. Кроме этого можно изменить сам внешний вид и расположение тега more на wordpress. При этом, от Вас не потребуется никаких знаний — нужно всего лишь прочитать пост и будет Вам счастье.

Тег more — как редактировать ссылку читать далее на wordpress