Домой / WordPress / Полезное / Вывод связанных записей красиво и без плагина
Похожие статьи без плагина
Похожие статьи без плагина

Вывод связанных записей красиво и без плагина

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

В этой статье расскажу как сделать красивый вывод связанных записей безо всяких плагинов. Представлю два варианта: первый - просто вывод связанных записей и второй - с картинками и кратким описанием.

В Сети можно найти много подобных описаний и все они по своему заслуживают внимания. Более того, на их примерах можно понять, как это вообще работает и сделать что-то своё. Я бы и не стал делать свой вариант, если-бы предложенные устроили меня на все 100%.

Однако вот не устроили... То связанные записи выводятся не очень привлекательно, то картинки слишком большие, практически в полный рост (зачем это в данном случае?), то заголовок "Связанные записи" выводится даже тогда, когда записей-то таковых и нет вовсе.

Поэтому и взялся я за их доработку.

Итак, хватит лить воду...

Первый вариант:

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

Выглядит он вот так:

Первый вариант

 

Щёлкните по картинке для увеличения...

 

Для подобного отображения связанных материалов в файл single.php, который находится в папке /wp-content/themes/Ваша_тема вставить следующий код:

 

<!-- Похожие записи -->
<?php $tags = wp_get_post_tags($post->ID);
if ($tags) {
 $tag_ids = array();
 foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
 $args=array(
 'tag__in' => $tag_ids, // Сортировка происходит по тегам (меткам)
 'orderby'=>rand, // Добавляем условие сортировки рандом (случайный подбор)
 'caller_get_posts'=>1, // Запрещаем повторение ссылок
 'post__not_in' => array($post->ID),
 'showposts'=>5 // Цифра означает количество выводимых записей
 );
 $my_query = new wp_query($args);
 if( $my_query->have_posts() ) {
echo '<div class="related">';
echo '<h3>Материалы по теме:</h3>';
echo '<ul>';
 while ($my_query->have_posts()) {
 $my_query->the_post();
 ?>
 <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
 <?php
 }
 echo '</ul></div>';
 }
 wp_reset_query();
 }
 ?>
<!-- Похожие записи /-->

Этот код лучше всего вставить сразу после статьи... Перед строкой:

<?php comments_template(); ?>

Это как раз перед выводом комментариев. Но, в принципе, поэкспериментируйте для нахождения более подходящего, на Ваш взгляд, места.

Приведу и CSS такого вывода:

/*похожие записи*/
.related {
padding: 10px 10px 4px 10px;
background: url("images/widget.png") repeat-x scroll 0 0 #DDDDDD;
 border: 1px solid #DDDDDD;
 border-radius: 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
 margin-bottom: 10px;
 padding: 10px;
 text-align: left;
}
.related h3 { 
margin-bottom: 2px;
color: #215B9B;
text-shadow: #5DB6FA 0px 1px 1px;
} 
.related a { 
text-decoration: none; 
} 
.related a:hover { 
color: #ff0000; 
text-decoration: none; 
}
/*похожие записи*/

Код стиля вставьте в конец файла style.css, который лежит в той-же папке, что и single.php. Естественно, что стиль Вы можете  изменить под свой шаблон и вкус.

Кстати, если Вы обратили внимание, начало и конец любого кода я отмечаю некими указателями наподобие - <!-- Похожие записи --> ... Кто-то может подумать, что это лишнее. Однако я настоятельно рекомендую использовать подобные указатели-пояснения. Это Вы сейчас помните что именно и для чего вставлено. Где эта вставка начинается, и где заканчивается. Но пройдет месяц - другой... пол-года... и Вы уже не вспомните что это за код такой и для чего он нужен. Тем более, если своих вставок будет несколько.

Ну вот и всё. Первый вариант работает. Строго и сердито - ничего лишнего.

 

 

Второй вариант.

Это, собственно, несколько расширенный первый. И выглядит он примерно вот так:

Вывод связвнных записей

 

Щелкните по картинке для увеличения...

 

 

 

 

Согласитесь - уже повеселее!

Для реализации такого вывода связанных записей переходим всё в ту-же папку /wp-content/themes/Ваша_тема и делаем три очень простых шага.

1. В файл functions.php вставляем следующий код:

#  Возвращает ссылку на миниатюру
function catch_that_image() {
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id);
$image_url = $image_url[0];
  if(empty($image_url)) {
    $image_url = "http://obg.kz/wp-content/uploads/2013/obg.png"; // Ссылка на заглушку
  }
return $image_url;
}

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

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

Кроме всего прочего мы сможем обращаться к этой функции для вставки миниатюр записей в любое место блога!

2. Правим файл single.php, точно так-же, как и в первом варианте, только вставляем вот этот код:

<!-- Вывод связанных записей -->                        
<?php $tags = wp_get_post_tags($post->ID);
if ($tags) {
 $tag_ids = array();
 foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
 $args=array(
 'tag__in' => $tag_ids, // Сортировка происходит по тегам (меткам)
 'orderby'=>rand, // Добавляем условие сортировки рандом (случайный подбор)
 'caller_get_posts'=>1, // Запрещаем повторение ссылок
 'post__not_in' => array($post->ID),
 'showposts'=>5 // Цифра означает количество выводимых записей
 );
 $my_query = new wp_query($args);
 if( $my_query->have_posts() ) {
echo '<div>';
echo '<h3>Материалы по теме:</h3>';
echo '<table width="100%" border="0" >';
         while ($my_query->have_posts()) {
            $my_query->the_post();
        ?>
            <tr><td>
            <a href="<?php the_permalink() ?>"><img align="left" style="margin-right: 10px; float: left;" src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" width="50"/></a>
            <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
            <br /><?php the_content_rss('', TRUE, '', 24); ?>
            </td></tr>
        <?php
        }
        echo '</table></div>';
    }
 wp_reset_query();
 }
 ?>            
<!-- Вывод связанных записей End -->

Размером картинки можно управлять меняя параметр width="50" в конце 22-й строки кода. Высота будет меняться пропорционально. Поэкспериментируйте для достижения наиболее приемлемого для вас результата. Но на мой взгляд, в данном случае, большие картинки будут выглядеть не совсем к месту.

3. Файл стилей style.css дополняем стилем первого варианта - тут ничего менять не пришлось.

Ну вот и все! Вывод связанных записей красиво и без плагина готов. Выбирайте вариант по своему вкусу.

Удачи Вам и до встречи на моём блоге!

 

 

Смотрите также

Огни большого города http://obg.kz

Как масштабировать изображения в CSS

В этой статье поделюсь способом как масштабировать изображения в css.    Конечно-же придуман этот способ …

Огни большого города http://obg.kz

Как по клику на кнопке открыть страницу в новой вкладке

Как по ссылке открыть страницу в новой вкладке знают все. Добавляем в ссылку атрибут target="_blank" …

40 комментариев

  1. К сожалению, второй вариант с картинками ставится  не все темы — у меня вышибло половину функций и вход в админку.

    • Не думаю, что тема тут имеет значение. Возможно Вы что-то не так скопировали или вставили.

      Файл single.php никак не влияет на админку.

      Значит дело только в functions.php. Заметил, что иногда WordPress неправильно считывает строку, закомментированную знаком решётки (#). Попробуйте удалить эту строку

      #  Возвращает ссылку на миниатюру

      Или заменить её на 

      /*  Возвращает ссылку на миниатюру */

      И внимательно проверьте вставленный код!

      Лучше его вставить в самый конец файла перед закрывающим тегом

       ?>

      На всякий случай — версия WordPress какая? У меня 3.5.2…

      Если не получится — напишите, обязательно разберёмся.

      • Спасибо, Александр, у меня уже стоял код без картинки, я его и решил оставить, раз этот не пошёл.
        Думаю, Вы не совсем правы, что тема тут ни причём: у меня это не первый раз, когда ввожу рекомендуемые, проверенные коды, происходит нечто подобное или вообще сайт вырубает.
        Думаю, что это всё же связано с несовместимостью каких-то команд шаблона и встраиваемых кодов. Например, я грешу, на особенности файла стилей моей темы.

        • Владимир, решать, конечно Вам, но уж больно интересно что там за шаблон такой, который скрипты гасит?
          Я бы вот ради любопытства начал бы искать причину…
          Например попробовал-бы убрать 22-ю строку кода из single.php
          И собственно весь вставленный код из functions.php. Если проблема уйдет, то уже легче будет с остальным разбираться.
          Представленный код не имеет никаких наворотов, всё на встроенных командах движка и для линейки 3.5 должен работать.
          Кроме того, могут мешаться какие-то уже установленные плагины… Нет, ну я бы точно поэкспериментировал…
          Если шаблон у Вас не самодельный и не платный, есть в открытом доступе, то дайте пожалуйста ссылку — я поставлю себе на локалку и вычислю проблему.
          Уверен, что всё можно решить и обойти.

  2. Спасибо за интересную информацию. Хотел бы это использовать на своем блоге. Не хочу применять плагины. Мне больше нравиться второй вариант. Есть вопрос. Как выводятся связные записи? Ссылки на них надо проставлять или это делается автоматически?

    • Спасибо. Для этого и пишу. Мне тоже больше нравится второй вариант. У меня на блоге именно он и работает.
      В данном коде связанные записи выводятся автоматически по меткам. Никаких ссылок делать не надо. Просто вставляете код и всё. Можно регулировать количество связанных записей (в коде это строка дана с пояснением), а так-же можно рулить количеством слов в описании, за это отвечает строка [code language=»php» ]

  3. БлагоДарю, Александр!
    Оказывается как всё легко и просто.
    Поставил на днях себя 1 вариант без картинок. Всё замечательно встало — мне нравится.
    Плагин удалил у себя WordPress Related Posts — который выводил похожие записи.
    А сегодня заметил у себя на хостинге в Лог ошибках вот такие надписи, к примеру:
    [Sun Jul 14 00:46:50 2013] [error] [client 62.221.89.115] PHP Fatal error: Call to undefined function wp_related_posts() in /home/users2/r/rodoswet/domains/rodoswet.ru/wp-content/themes/Golden_Fields/404.php on line 34, referer: http://www.rodoswet.ru/o-suete-mira-v-kotorom-my-zhivyom-mir-kotoryj-sozdali-svoimi-myslyami-i-chuvstvami/ [Sun Jul 14 00:49:01 2013] [error] [client 46.41.91.42] PHP Fatal error: Call to undefined function wp_related_posts() in /home/users2/r/rodoswet/domains/rodoswet.ru/wp-content/themes/Golden_Fields/404.php on line 34, referer: http://www.rodoswet.ru/wp-content/themes/Golden_Fields/style.css
    и они постоянно идут…
    нагрузку не сервер не делают, сайт работает нормально.
    Но понятно, что это связано как то, с плагином который удалил.
    Как это устранить, и что сделать надо? Возможно подскажите Александр.
    с уважением,

    • Здравствуйте… У меня такое ощущение, что остались какие-то следы плагина WordPress Related Posts… и система продолжает в какие-то моменты пытаться делать его вызовы.

      Попробуйте очистить кэш — должно помочь. Если нет, напишите, будем разбираться дальше. Но в любом случае предложенный код не порождает такие ошибки…

      Кстати, если поможет, пожалуйста напишите тоже… может и ещё кто-то воспользуется…

      • У меня тоже такое чувство, что не всё подчистил от плагина, где-то что-то ещё остались следы… 
        Тоже отпишусь, как руки дойдут, а то урывками всё делаю, времени на всё не хватает к сожалению, ну и опыта тоже ))

  4. ничего не выводится вообще

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

      Ну и еще как предположение — этот код выводит связанные записи по меткам. Есть метки в статьях? Если нет меток таких-же как в и в конкретной статье, то ничего и не выведет.

  5. А мне у Вас понравилось)))
    В последнее время люблю ставить что-то кодом, а не плагином. И вот такие похожие статьи можно поставить. У меня, правда, стоит код похожих, но он без миниатюры. А с миниатюрами у меня стоял плагин, который пришлось выключить вообще на сайте из-за того, что он давал очень большую нагрузку на сервер хостинга.
    Попробую поставить Ваш вариант кода с миниатюрами.

    • Спасибо. Конечно попробуйте. Тем более, что размером миниатюры Вы можете управлять сами.

      • Что-то не получилось. Все коды прописала в нужных файлах темы. Правда, у меня код надо вставлять в loop-single.php Сохранила и ничего нет на сайте. Похожие записи не появились с миниатюрами

        • Попробуйте этот код:

                                
          Еще статьи по этой теме:
          < ?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'=>5,
          'orderby'=>rand,
              'caller_get_posts'=>1);
              $my_query = new wp_query($args);
              if( $my_query->have_posts() ) {
              echo '
              ';
                  while ($my_query->have_posts()) {
                  $my_query->the_post();
              ?>
              < ?php the_post_thumbnail(); ?>
              ' rel="bookmark' title='< ?php the_title(); ?>'>< ?php the_title(); ?>
              < ?php the_content_rss('', TRUE, '', 12); ?>
              < ?php
              }
              echo '
          ';
          }
          wp_reset_query();
          }
          ?>
          

          можете посмотреть как у меня на сайте это выллядит, например на этой странице: http://allactions.ru/limonnik-kitajskij/  вставлял я его в файл single.php

        • Ирина, тот код, что привел andy выводит не совсем связанные записи… Он выводит записи из той-же категории. Иногда это как раз и нужно.

          Мой код выводит записи связанные по меткам (тегам). У andy мой код тоже не сработал.

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

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

          Если с понятием «метки» есть какие-либо затруднения — могу объяснить. Там все просто.

          • Александр! Что такое метки, я знаю прекрасно. Использую для каждой статьи свою метку. Много меток на сайте — это плохо. А облако меток вообще не стоит ставить в виджетах. Это лишнее направление поисковикам, совсем не нужное для сайта.
            Может быть именно из-за этого и не работает Ваш код. Попробую тот, который дал andy

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

    • Ирина, код от andy абсолютно нормальный и рабочий. Другое дело, что просто так его копировать не надо. Сначала скопируйте его в текстовый редактор, желательно Notepad++, и исправьте все кавычки!!! Вордпресс любитель все это коверкать. Просто внимательно посмотрите и исправьте. В коде допускаются только одинарные или двойные кавычки, никаких елочек и разнонаправленных косых апострофов!

      По поводу меток… Ой как тут все запущено… 🙂

      Много меток на сайте — это плохо.

      Кто Вам такое сказал? Если не хотите ставить облако меток, так и не ставьте, но вот это:

      Использую для каждой статьи свою метку.

      На мой взгляд совершенно не имеет смысла! Мне кажется Вы не совсем точно понимаете суть этих меток. У меня каждая статья имеет несколько меток, от одной, до трех, как правило. Например все статьи, которые я писал про плагины имеют одной из меток метку «плагин». И в связанных записях к статье выводятся статьи имеющие аналогичную метку.

  7. Дмитрий

    Доброго времени суток!Александр,мне непонятно куда вставлять коды в файлы,перед какими тегами?

  8. Александр, здравствуйте. Вставила все ваши коды, поменяла метки на сайте, сократила их количество с 97 до 34. Но форма связанных записей не появляется.Внизу поста перечислены метки. Удалила плагин wp-related. Плагином для очистки кэша  боюсь  вычистить что-то полезное. Да еще такая странная вещь обнаружилась. Когда выхожу на отдельные статьи по одной метке, исчезает сайдбар вообще. Может подскажете что делать ? Так хочется такую конфетку видеть у себя на блоге.

    • Здравствуйте, Надежда! Метки тут ни при чем. Я заходил на Ваш блог… даже если Вы просто откроете любую статью с главной страницы, т.е. перейдете не по метке, а напрямую, то сайдбар Ваш исчезает все-равно.
      Дело в шаблоне. Вам нужно посмотреть код single.php, видимо там просто не предусмотрен или закомментирован вывод сайдбара.
      Что касается вывода связанных записей… Вы точно правильно вставили все коды, как указано в статье? Я посмотрел исходный код Вашей записи… очень похоже, что Вы что-то не так скопировали. Проверьте пожалуйста еще раз все очень внимательно. Соответствующие коды надо вставлять в файлы functions.php, single.php, style.css, которые лежат в папке Вашей темы! Вы используете тему Tender Spring и все корректировки необходимо делать именно в папке этой темы!

  9. Александр, я все сделала, как надо. Но мой файл singl.php не хочет впускать никакие записи. Я пыталась еще один код вставить сейчас, но история еще более плачевная получилась. Сайт вообще исчез — чистая страница. Сделала откат. Скажите, а два файла singl.php не могут присутствовать в теме ? Я нашла инфу, если нет такого файла, то его нужно создать, и скопировать текст из index.php, а потом туда вставлять коды.

    • Надежда, тут надо быть очень внимательной. Вот например Вы пишете:

      мой файл singl.php

      Это опечатка? Файл называется single.php и он должен быть в папке wp-content/themes/ВашаТема
      У меня имеется и index.php, но он отвечает за другое.

      • index.php — вывод главной страницы
      • single.php — вывод записей
      • page.php — вывод страниц
      • functions.php — коды функций
      • … и т.д…

      И все эти файлы лежат в папке wp-content/themes/ВашаТема
      Не совсем понял, что значит «не хочет впускать никакие записи»? Вы вставляете какой-то код, а он не исполняется? Или просто не можете изменить файл, нет прав?
      Проверьте пожалуйста эти моменты. Если всё-же не получится, то напишите, я найду в Сети Ваш шаблон Tender Spring, поставлю себе эту тему на локальную копию блога, поэкспериментирую и отпишусь о результате. А дальше посмотрим, что делать. Уверен, что всё решиться наилучшим образом.

    • Надежда, вот я, не дожидаясь Вашего ответа, установил на локальный блог тему tender-spring, как у Вас, и вставил код, как описано в этой статье. Все нормально отображается, связанные записи выводятся отлично.  На все ушло меньше 5-ти минут. Не надо никаких лишних движений. Все файлы у Вас, в смысле в папке темы, есть такие, какие и нужно.

      Что-то Вы не так сделали… Пришлите мне свои три файла:

      1. functions.php
      2. single.php
      3. style.css

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

      Файлы желательно отправлять архивом…

  10. Александр, спасибо за ответ. Меня целый день нет дома,поэтому не видела вашего сообщения. А так ваша страничка у меня постоянно открыта. А куда мне отправить архив ?

  11. Пришлите мне письмо на мой электронный адрес, я вам тогда вышлю архив. У меня все готово.

  12. Александр, я вам на почту отправила 2 дня назад письмо с файлами.Возможно оно в спаме.

    • Я всё получил. Были праздники, извините… Исправленные файлы отправил Вам в письме. Распакуйте архив и залейте эти файлы в папку темы на Ваш блог. Должно заработать. Очистите кэш, перезагрузите страницу…
      Если что — напишите…

  13. Я точно таким и пользуюсь =) Спасибо, подправила себе вывод немного

  14. Второй вариант вывода связанных записей смотрится очень красиво, и главное, без плагина!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *