Похожие записи с миниатюрами в WordPress без плагина

Приветствую, уважаемые! Мало кто знает, что помимо всего прочего я еще изучаю веб-программирование. Эта статья открывает новую рубрику на нашем сайте, посвященную коду. Нет, это не уроки по какому-либо языку программирования, а просто полезные фрагменты кода, которые могут пригодиться вам, если у вас есть свой сайт. Например, сегодня мы поговорим про вывод похожих записей на движке WordPress. Почему эта тема? Потому что я сам столкнулся недавно с этой «проблемой» и хочу помочь другим.

Иногда бывает, что в теме оформления WordPress возможность вывода похожих записей уже присутствует по умолчанию и все красиво оформлено. Однако же чаще всего эта возможность не предусмотрена.

А все мы хорошо знаем, что «похожие записи» в конце статьи или сбоку в сайдбаре очень положительно влияют на поведенческие факторы (внутренняя СЕО оптимизация). И первое, что приходит на ум – установить плагин, который бы выводил эти самые похожие записи.

Но всегда существует какое-то «НО…»!

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

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

Если есть хоть малейшие познания в движке Вордпресс и стилизации (CSS), то лучшим решением будет внедрить код напрямую в шаблон вашего сайта. Приступим!

Вам, возможно, также будет интересна статья про CSS анимации

Код для вывода похожих записей в WordPress

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

<div class="similar_posts">
   <h3>Похожие записи:</h3>
   <?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 '<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>';
       }
 wp_reset_query();
     }
 ?>
</div>

Для тех, кто хоть немного разбирается в коде, понятно, что тут используется язык php, некоторые стандартные функции Вордпресс и все это элегантно завернуто в HTML разметку. Вставляем его в нужное место (у многих это файл single.php в корне темы). И что мы получаем на выходе? А вот что:

Похожие записи без плагина для Вордпресс

То, как «Похожие записи» выглядят без миниатюр

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

Добавляем миниатюры на наши похожие записи

Для начала нужно избавиться от списка. Для этого заменяем теги «ul» (ненумерованный список) на теги «div» (простой блочный элемент) в двух местах (!) и добавляем ему вразумительный идентификатор (чтобы потом было удобно стилизовать). Потом просто удаляем теги элементов списка «li» (только оставьте их содержимое).

Внутри «div» у вас сейчас осталась голая ссылка с заголовком записи в качестве текста. Для удобства я обернул заголовок еще в один тег. А теперь самое главное – добавляем миниатюру к записям. Для этого существует стандартная функция Вордпрессthe_post_thumbnail() , которая возвращает нам миниатюру записи в теге «img».

Теперь у нас код выглядит немного иначе. Наши похожие записи уже выводятся с миниатюрами, и, как видите, мы смогли этого добиться без помощи сторонних плагинов. Но не советую оставлять все в таком виде. Выглядит это по-прежнему безобразно. Огромные картинки на ширину всей страницы. Еще и в ужасном качестве. А под ними подписи синего цвета (обычные ссылки). Можете вставить этот код и посмотреть на все своими глазами. Хотя в любом случае вставляйте, потому что в этот код мы лезть больше не будем.

<div id="similar_posts">
  <h3>Похожие записи:</h3>
  <?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 id="similar_posts_wrapper">';
      while ($my_query->have_posts()) {
      $my_query->the_post();?>

      <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
        <div><?php the_post_thumbnail('medium'); ?></div>
        <div><?php the_title(); ?></div>
      </a>
    <?php
    }
    echo '</div>';
    }
  wp_reset_query();
}
?></div>

 

Стилизация похожих записей с миниатюрами

Приступаем к пункту третьему или какой там у нас уже? Тут я покажу, как я оформил свои похожие записи, но вы, возможно, захотите по-другому. Код стилей, который я приведу ниже, нужно вставить в файл стилей вашего сайта (желательно в конце для удобства). Он находится в корне темы оформления вашего сайта и называется style.css (но может и по-другому и находиться в папке, например, «css» или «styles»). Вот сам код:

 

#similar_posts{
  margin: 30px 0;
}

#similar_posts h4{
  margin-bottom: 15px;
}

#similar_posts_wrapper{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

#similar_posts_wrapper a{
  flex-basis: 19%;
  text-align: center;
  text-decoration: none;
  color: inherit;
  border-radius: 5px;
  transition: background-color 0.3s;
}

#similar_posts_wrapper a img{
  padding: 3px;
  border-radius: 5px;
}

#similar_posts_wrapper a:hover{
  background-color: lightblue;
}

@media screen and (max-width: 767px){
  #similar_posts_wrapper{
    flex-wrap: wrap;
    justify-content: space-around;
  }

  #similar_posts_wrapper a{
    flex-basis: 160px;
    margin: 25px;
  }
}
Похожие записи с миниатюрами без плагина

Застилизованные «Похожие записи». Чувствуете разницу?

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

Вместо итога:

Не забывайте, что первый код нужно вставлять в файлы с расширением .php. Если вы захотите вставить похожие записи в сайдбар, то ищите у себя на хостинге файл «sidebar.php». А просто в виджет сайдбара этот код вставить не получится.

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

ПС: Первое время у этой статьи может не быть похожих записей, потому что мы только-только открыли эту рубрику и по сути на сайте нет других статей с такими же тегами. А код как раз ориентируется по тегам, которые вы пишете к своим статьям, так что не забывайте их заполнять, это важно!

Автор статьи: Цифровой

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

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

Не будьте равнодушными к проекту. Спасибо! :-)

Понравилась статья?
Обещаем исправиться! Если вам есть, чем дополнить статью, напишите об этом в комментариях. А также будем благодарны за конструктивную критику. Спасибо!

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

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

Комментарии к публикации
  • куй avatar
    куй

    я конечно дебил, туплю сильно, но все равно все получилось, спасибо автору

  • Наталья avatar
    Наталья

    Буду ждать ответа. Уже выяснила, что извещение о нём благополучно покоилось в спаме… Выудила, сказав, что «не спам»))) Надеюсь, следующее прилетит нормально)))

    • Цифровой avatar
      Цифровой

      Такие рассылки всегда попадают в спам. У меня тоже так.

      • Наталья avatar
        Наталья

        Теперь они вовсе попали в «чужую» специализированную папку))) Случайно нашла)))
        В любом случае, спасибо за участие.

  • Наталья avatar
    Наталья

    Пожалуйста, помогите разобраться.
    Как побороть http://graidshi.ru/2018/03/16/chto-takoe-ne-vezyot/
    «Рекомендуем: нет похожих записей»
    Меня устроит в большей степени, если всё-таки будут отражаться похожие записи; или — в меньшей — убрать вовсе эту подпись. По-мо-гииииии-те, пожалуйста! Сайт школьный, и меня эта проблема уже доканывает…

    • Цифровой avatar
      Цифровой

      Большинство плагинов и скриптов, которые выводят похожие статьи определяют их «похожесть» по тегам. Если в статьях стоят одинаковые теги, значит они похожие. Такая вот простая логика. У вас, скорее всего, написано, что похожих статей нет потому что теги статей не совпадают. Попробуйте добавить нескольким статьям одинаковые теги и посмотреть на результат.

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

      Потом отпишитесь, получилось или нет.

      • Наталья avatar
        Наталья

        Да в том-то и засада, что и тегов совпадающих полно, и в рубрике статей хватает. А вот нет же ж, не работает. Эта функция встроенная у нас, без плагина. Тема Twenty Fifteen

        • Цифровой avatar
          Цифровой

          Twenty Fifteen это стандартная тема WordPress, а у вас сайт не на WordPress. Скорее всего ваш сайт собран на каком-то конструкторе, потому что код сайта выглядит мягко говоря странно. Я вам еще раз рекомендую обратиться к тому человеку, который делал вам этот сайт.
          На самый крайний вариант можно попробовать просто скрыть этот ваш надоедливый блок, который никак не может вывести похожие записи.
          Если справитесь, то попробуйте добавить в стили вашего сайта вот такую строку :
          .yarpp-related.yarpp-related-none{ display: none !important; }

          Только не упустите точку в самом начале строки.

          • Наталья avatar
            Наталья

            Уж вы меня простите, но я сама лично построила этот сайт именно на WordPress. Соответственно и тема именно эта, мною указанная. Если не секрет, что именно натолкнуло вас на мысль о конструкторе (что сайт не на WP)?

          • Наталья avatar
            Наталья

            Я имею ввиду, поясните, что значит «код сайта выглядит мягко говоря странно»?

            • Цифровой avatar
              Цифровой

              У вас стили прописаны в data атрибутах. Люди так не делают, когда пишут сайты. И из-за этого у вас почти каждый тег занимает от 3 до 10 строк кода (на моем разрешение экрана по крайней мере) и выглядит это просто нечитаемо все.

              • Наталья avatar
                Наталья

                Я не прописывала коды, работала в выбранной теме и всё. И уж тем более, не трогала ничего, что бы касалось тегов… Думаю, это не критично)))

    • Цифровой avatar
      Цифровой

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

      • Наталья avatar
        Наталья

        Я и разрабатывала. А ответа на этот вопрос найти не могу. Говорю же, уже всю голову сломала((( Поэтому к вам за помощью и обратилась…

  • Наталья avatar
    Наталья

    Виджет «коммент из ВК» не работает. И стоит ли понимать отсутствующие на вашем сайте «похожие записи» как то, что этот способ устарел/не эффективен/др.

    • Цифровой avatar
      Цифровой

      ВК комменты работают, только что проверил.
      Этот способ НЕ устарел и вполне эффективен. У себя я убрал «похожие записи» только потому, что гугл предложил мне свой собственный вариант, который ничем не хуже, но к тому же его можно еще и монетизировать. А пока у вас нет такого предложения от гугла, то советую использовать похожие записи такие, какие я описал в статье. Или установите плагин. Но я перепробовал несколько таких плагинов и все они выглядели убого.

      • Наталья avatar
        Наталья

        У МЕНЯ не получается воспользоваться формой ВК-комментов. Уже попробовала несколько раз. Возможно, проблема браузера (у меня — Опера).
        Вариант от гугл — невидим для читателей? Или только я не вижу? Не сочтите мои вопросы докапыванием — действительно интересно.
        Проблему свою обрисовала в предыдущем комменте. Очень рассчитываю на вашу помощь.

        • Цифровой avatar
          Цифровой

          Под статьей 8 прямоугольников с картинками и заголовками. Над ними написано Powered by Google. Они видны всем. 5 из 8 секций ведут на похожие статьи на моем сайте, остальные 3 — реклама от гугл. Вы наверное восприняли весь этот блок, как рекламу, но на самом деле, в первую очередь — это «похожие статьи».

  • kinogrant avatar
    kinogrant

    Отличная статья, буду ставить себе, надеюсь все получится

  • seoonly.ru avatar
    seoonly.ru

    Спасибо! Сделал себе тоже.

Последние публикации
Публикации, похожие на «Похожие записи с миниатюрами в WordPress без плагина»