Блог Андрея Юрченко

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

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

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

похожие записи с миниатюрами wordpress, похожие записи с картинками wordpress

Похожие записи с миниатюрами несут пользователю дополнительную зрительную информацию и это одна из важных составляющих внутренней перелинковки для сайта.

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

 Для начала давайте разберемся, что нам нужно для вывода? Как вы сами понимаете это сами записи, которые уже присутствуют на нашем сайте или блоге и миниатюры или картинки, которые будут отображаться при выводе. Про размещение и оптимизацию картинок вы можете почитать на моем блоге в статье «Размещение и оптимизация картинки на WordPress».

Посмотрите на свою тему и версию WordPress, если она поддерживает вывод миниатюр, то тогда можно смело продолжать далее. Как это сделать, да очень просто: зайдите в админку и откройте любую запись и там в правой колонке должен присутствовать блок с заголовком «Миниатюра записи». Если его нет, то Вам нужно все это включить Я не буду расписывать как это сделать, поищите в интернете, благо уже довольно много написано статей и руководств по настройке и оптимизации WordPress.

похожие записи с миниатюрами wordpress, похожие записи с картинками wordpress

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

Зайдите в админ-панель своего сайта и во вкладке «Редактор» найдите и откройте файл single.php. В коде этого файла в нужное место под статьей вставьте следующий код:

 <div id="interesting_articles">         
 <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'=>4,         //количество выводимых ячеек
  '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><div id="cell"><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a></span><br>
 <span><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></span></div></li>
 <?php
 }
 echo '</ul>';
 }
 wp_reset_query();
}
 ?>
 </div>

Посмотрите внимательно на код и давайте его настроим под себя. Вывод миниатюр осуществляет функция the_post_thumbnail() с параметром (‘thumbnail’), который задает размер миниатюры.

В коде задана сортировка по категориям, но Вы можете изменить ее и задать сортировку по тегам (меткам), для этого нужно заменить строку :

'category__in' => $category_ids,

На

'tag__in' => $tag_ids,

Так же в коде вывод блока похожих записей задан в один ряд и Вы можете задать вывод в два или три ряда, для этого нужно изменить значение в строке:

'showposts'=>4

Если у вас в одном ряду задано 4 миниатюры, как в данном примере, то в двух рядах будет 8 ячеек, а в трех- 12 ячеек. В таком соответствии нужно изменить цифру на желаемую.

Измените заголовок на свой в следующей строке:

<h3>Похожие записи на блоге</h3>

Заголовок будет отображаться с привязкой к левой стороне, но если Вы хотите, чтобы он был по центру, то заключите данную строку в тег <center>строка</center>.

Ваша статья будет открываться в новой вкладке и за это отвечает отрезок кода:

onclick="return !window.open(this.href)"

если вам этого не нужно, то можете смело убрать, выбор за вами.

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

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

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

id=»block_articl«

а второй предназначен непосредственно для ссылок:

id=»link«

что даст нам сделать сами миниатюры тоже ссылками.

Теперь откройте файл style.css  и для данных идентификаторов пропишите следующие стили или проще говоря, скопируйте код ниже и вставьте в самый конец:

#block_articl{
margin: 10px 0;   /*  Отступы от верхнего и нижнего края */
float: left;      /* Прижимаем блок к левому краю */
width: 100%;      /* Длина блока соответствует ширине страницы */
 }
#block_articl ul {
margin-left: 10px;  /*  Внешний отступ от левого края страницы */
width: 100%;         /* Общая ширина блока без учета отступов от краев страницы ( можно задать конкретную величину, к примеру 550px */
}
#block_articl li {
list-style: none;  /* Отменяем нумерацию списка (1,2,3 и т.д.) */
}
#link{
height: 200px;     /* Высота ячейки  */
box-shadow: #F5F5F5 0px 2px 3px, #F5F5F5 0 0 3px inset;  /* Тень для ячеек (необязательно) */
float: left;        /* Каждая следующая ячейка располагается слева */
list-style: none;   /* Отменяем родительские стили */
margin: 10px;        /* Расстояние между ячейками */
padding: 2px;       /* Отступы от миниатюры до края ячейки */
text-align: center; /* Текстовые заголовки расположены по центру */
width: 160px;       /* ширина одной ячейки */
overflow: hidden;   /* Окончания длинных заголовков, не вместившихся в ячейку, будут скрыты */
border: #F5F5F5 solid 1px;         /* Рамка вокруг ячейки */
border-top-left-radius: 5px;      /* Закругление левого верхнего угла ячейки */
border-top-right-radius: 5px;     /* Закругление правого верхнего угла ячейки */
border-bottom-left-radius: 5px;   /* Закругление нижнего левого угла ячейки */
border-bottom-right-radius: 5px;  /*Закругление нижнего правого угла ячейки */
}
#link a{
color: #000000;          /* Цвет ссылки */
text-decoration:none;    /* Убираем подчеркивание ссылки */
}
#link a:hover {
color: #C6C600;        /* Цвет ссылки при наведении курсора */
text-decoration:none;  /* Убираем подчеркивание ссылки */
}
#block_articl li:hover{
background-color: #f9f9f9; /* Цвет фона ячейки при наведении курсора */
}

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

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

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

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

С уважением, Андрей Юрченко

Поделитесь статьей в социальных сетях!

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

Оставить комментарий:

Комментарии: 2

Оставить комментарий
  1. Алексей:

    Добрый день! Очень красиво и грамотно все оформленно. Я с таким вопросом (ранжирование по меткам), заметил на своем блоге, что все блоки записей заполнены, даже если у статей нет соответствующих, меток.Можно как то сделать, что б выводились, только те записи в которых совпадают метки, и так же чтобы с первой по последнюю похожие записи были в зависимости от количество совпадающих меток, а не в разброс? Заранее спасибо!

    1. Андрей:

      Замените код вывода по категориям на код вывода по меткам (описано в статье).
      Строка с ‘orderby’ реализует вывод в случайном порядке. Вам нужно дописать код для определения количества меток и вывод по возрастанию.
      Поищите в нете нужный вам код. Но для чего это нужно не понятно? Данный вывод статей по тегам предназначен для педоставления большей информации по теме посетителю и тем самым удержания его на ресурсе(посещаемость). А в каком порядке будут выводиться похожие записи, на мой взгляд, по барабану.

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Комментарии Вконтакте:

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ