» » » Как вывести похожие записи с миниатюрами на WordPress без плагина
logotip

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

Здравствуйте! Сегодня на SEO-Mayak.com мы продолжим тему внутренней перелинковки и на очереди у нас вывод похожих записей с миниатюрами без плагина.

Уже по традиции, я перечислю плагины, которые чаще всего используются для вывода похожих записей с миниатюрами: Related Posts, Related Posts Thumbnails, Contextual Related Posts и др.

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

Хочу сразу предупредить, если у вас на блоге уже 200 — 300 постов, то наверное будет разумно использовать один из плагинов, который создает миниатюры автоматически. Что я имею в виду, объясню немного позже.

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

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

pohojie zapisi s miniatyurami

Так вот, можно смело отключать автоматическое создание миниатюр, так как все равно придется их создавать вручную для каждой статьи. Почему так? Ранние версии WordPress, до обновления 2.9, вообще не поддерживали миниатюры, да и в свежих версиях эта функция по умолчанию не активна и ее надо включать.

Как включить функцию поддержки миниатюр на WordPress

C помощью текстового редактора Notepad++ открываем для редактирования файл functions.php, который находится в папке с темой и в самый конец, перед закрывающим знаком «?>»добавляем следующую функцию

add_theme_support('post-thumbnails');

Теперь, если зайти в админку и открыть любую запись, то в правой колонке появится новый блок с заголовком «Миниатюра записи»:

Pohojie zapisi s miniatyurami

Если после вставки функции в админке ничего не изменилось, то попробуйте в файл functions.php вставить другой код:

if ( function_exists('add_theme_support') )
add_theme_support('post-thumbnails');

Один из двух кодов обязательно должен сработать.

Нажимаем на строчку-ссылку «Задать миниатюру» и нас перебросит в библиотеку файлов (изображений). В выпадающем меню выбираем пункт «Загруженные для этой записи»:

Pohojie zapisi s miniatyurami

Можно выделить любое изображение, на Ваше усмотрение и в нижнем правом углу нажать кнопку:

Pohojie zapisi s miniatyurami

После чего в блоке «Миниатюра записи» появится миниатюра выбранного Вами изображения:

Pohojie zapisi s miniatyurami

В любой момент Вы можете удалить текущую миниатюру и задать другую.

Как задать нужный размер для миниатюры

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

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

Чтобы правильно рассчитать размер миниатюры для блока похожих записей, необходимо знать ширину страницы. Ширина страницы указывается в файле style.css, но многие новички сравнивают CSS с темным и дремучем лесом, поэтому я предложу другой вариант — инструмент линейка.

Я даже представил, что сейчас могли подумать некоторые веб-мастера 🙂 Нет, линейку к монитору прикладывать не придется. Существует специальное расширение, с помощью которого можно измерить все что угодно и называется оно — MeasureIt.

Расширение MeasureIt для Google — скачать

Расширение MeasureIt для Mozilla Firefox — скачать

Расширение MeasureIt для Opera — скачать

Для примера я измерю ширину страницы своего кулинарного блога. Выглядеть это будет так:

Pohojie zapisi s miniatyurami

Как видно, длина от края до края «рабочей зоны» страницы составляет 587 пикселей. W (width) — длина, H (height) — высота.

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

И так, я определился, что в одном горизонтальном блоке у меня будет 4 миниатюры. К примеру, возьму значение 2 пикселя для внутренних отступов и 5 пикселей для внешних. Схема расположения будет выглядеть так:

5px/2px/миниатюра/2px/5px/2px/миниатюра/2px/5px/2px/миниатюра/2px/5px/2px/миниатюра/2px/5px

Складываю все отступы в одно число и получаем 41 пиксель. Отнимаем от общей длины сумму отступов (587-41=546) и делим на количество ячеек (546:4=136)

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

Возвращаемся к файлу functions.php и ниже, ранее прописанной функции, добавляем еще одну строчку:

set_post_thumbnail_size( 136, 101, true );

Это своего рода регистратор новых размеров для миниатюр и после внедрения кода, миниатюры в админке будут выглядеть так:

Pohojie zapisi s miniatyurami

При необходимости вы всегда можете изменить вписанные в функцию размеры и все заданные миниатюры приобретут новые параметры.

Обращаю Ваше внимание! При загрузке новых изображений, WordPress  будет создавать миниатюры по новым заданным размерам, причем для всех изображений. Но не стоит накапливать ненужные картинки на сервере, надо оставить миниатюры только для выбранной картинки, а остальные удалить с помощью FTP клиента или через файловый менеджер панели управления хостинга. Все изображения хранятся в папке uploads, которая находиться в каталоге wp-content.

Давайте рассмотрим вариант удаления лишних изображений с сервера с помощью FTP клиента Filezilla.

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

Pohojie zapisi s miniatyurami

Выделив строчку левой кнопкой мыши, правой кнопкой вызываете меню, где нажимаете «Удалить»:

Pohojie zapisi s miniatyurami

И совершенно ненужная миниатюра навсегда удаляется с сервера.

Отлично! Пора выводить похожие записи с миниатюрами на страницы блога.

Выводим похожие записи с миниатюрами на 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(
 'tag__in' => $tag_ids,  //сортировка по тегам (меткам)
 'post__not_in' => array($post->ID),
 'showposts'=>4,  //количество выводимых ячеек
 'orderby'=>'rand', // в случайном порядке
 'ignore_sticky_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 class="cell"><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a><br>
<a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></div></li>
<?php
}
echo '</ul>';
}
wp_reset_query();
}
?>
</div>

За вывод миниатюр в коде отвечает функция the_post_thumbnail(), которой я задал параметр (‘thumbnail’), что значит — размер миниатюры.

Если Вы хотите сортировать статьи по категориям то замените строчку:

'tag__in' => $tag_ids,

на

'category__in' => $category_ids,

Также можно сделать блок похожих записей с миниатюрами в 2 или 3 ряда, но учтите, что если в одном ряду 4 миниатюры, то в 2х рядах будет 8 ячеек, а в 3х рядах — 12 ячеек.

В строчке:

'showposts'=>4

Измените цифру на желаемую.

Заголовок можно заменить на свой:

<h3>Интересное на блоге</h3>

Вот этот отрезок кода отвечает за открывание статей в новой вкладке:

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

Это вроде заменителя не валидного:

target="_blank"

Вообщем, выбор всегда за вами!

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

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

В коде присутствуют идентификатор:

id="interesting_articles"

И класс для ячеек:

class="cell"

Кстати миниатюры тоже будут ссылками.

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

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

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

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

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

До встречи!

С уважением, Виталий Кириллов

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

  1. Елена:

    Ну вот я и дождалась. )) Спасибо, иду пробовать.

    Ответить
    • Виталий Кириллов:

      Елена, наверняка будут сложности, особенно с подгонкой стилей, так как шаблоны у всех разные.

      Ответить
  2. Игорь:

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

    Ответить
    • Виталий Кириллов:

      Пожалуйста Игорь, надеюсь у вас все получится!

      Ответить
  3. Sasha:

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

    Ответить
  4. Светлана:

    Очень подробные инструкции. Кажется, всё понятно. Будем пробовать.

    Ответить
  5. Алексей Виноградов:

    Я как-то парился-парился с этим вопросом, и ни один способ мне не понравился, не то всё. В итоге остановился на плагинах nRelate, советую!

    Ответить
    • Виталий Кириллов:

      Для многих, плагин это разумное решение, но я стараюсь обхохиться без них.

      Ответить
  6. Алексей Виноградов:

    и кстати статистику кликов показывает!

    Ответить
  7. Елена:

    У меня все получилось! Работают мои миниатюрки, супер. Спасибо большое, без Вас бы не справилась. У меня только один вопросик, я не поняла, как Вы посчитали ширину и высоту блока, те цифры, которые прописаны в стилях?

    Ответить
    • Виталий Кириллов:

      Елена, высота блока зависит от длины заголовка. Меняйте значение на меньшее или большее:
      [php]height: 225px; /* Высота ячейки */[/php]
      Ширина ячейки также подгоняется и если одна ячейка не входит, то можно уменьшить отступы
      [php]
      margin: 5px; /* Расстояние между ячейками */
      padding: 2px; /* Отступы от миниатюры до края ячейки */
      [/php]
      Меняя значения, подгоняйте ширину одной ячейки:
      [php]width: 157px; /* ширина одной ячейки */[/php]
      И общую ширину блока:
      [php]width: 577px; /* Общая ширина блока без учета отступов от краев страницы */[/php]
      Играйте с цифрами!

      Ответить
  8. Елена:

    Спасибо, буду пробовать и экпериментировать.

    Ответить
    • Виталий Кириллов:

      Елена, если будет необходимо, можно изменить размер заданных миниатюр в файле functions.php на меньшие или большие.

      Ответить
  9. Nhidden-linkan:

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

    Ответить
    • Виталий Кириллов:

      Здравствуйте Nurtan! Существуют разные мнения на этот счет, например, в Яндекс поиске все ссылки открываются в новом окне и нечего, никто не жалуется.

      Ответить
    • Андрей Курасов:

      Зависит от стиля и предпочтений автора)
      Я из расчёта удобства для читателя сделал так:

      — ссылки из тела статьи (внутренняя перелинковка с другими статьями по типа «…, о чём я уже рассказывал здесь [ссылка]») открываются в новой вкладке, потому что читатель предыдущую статью ещё не дочитал.

      — категории, метки и записи с миниатюрами после статьи открываются в этой же вкладке — статья прочитана, не придётся искать заново.

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

      P.S. Лично я имею привычку открывать почти все ссылки в новом окне правой кнопкой мыши:)

      Ответить
  10. Olga:

    Надо обязательно попробовать, а то от плагинов уже спасения нет.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Olga, рад видеть вас на блоге! Конечно надо пробовать, тем более сложного ничего нет.

      Ответить
  11. Елена Картавцева:

    Написано много и подробно, но мне проще обходиться плагином, чтобы не «нахимичить» с html!

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

    А я бы пожаловался, если бы знал куда 😉 Меня открывание в новых вкладках бесит

    Ответить
    • Виталий Кириллов:

      Здравствуйте Роман! Советую в церковь сходить! Там можно пожаловаться и беса попросить изгнать 🙂

      Ответить
  13. Наталья:

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

    Ответить
    • Елена:

      Наталья, подскажите пожалуйста, как Вы заливаете фотографии на хостинг? какой провайде дает такую возможность?
      Спасибо

      Ответить
  14. Наталья:

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

    Ответить
    • Виталий Кириллов:

      Наталья, я думаю пока рано.

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

    Неожиданное предложение от «уважаемого» админа. Вы сами то пробовали? Я в это не верю! А чтоб страницы открывались в новом окне актуально для внешних ссылок с вашего сайта, для внутренних же достаточно переход в том же окне или вкладке. Я бы на вашем месте, Виталий не грубил, а доточил бы код, как сделал Nurlan. Тем более, что Вам указали на НЕДОСТАТОК. Ну чтож, доточим сами. Напильником 😉 Удачи Вам!

    Ответить
    • Виталий Кириллов:

      А я и не грубил Роман, просто вы нервничаете. Ну что же, уже по многочисленным просьбам, сделаю небольшое дополнение к статье и кому очень хочется, тот сможет самостоятельно код «подточить»!

      Ответить
  16. Елена:

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

    Ответить
    • Виталий Кириллов:

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

      Ответить
  17. Лана:

    спасибо огромное, если будет время обязательно сделаю, очень нужная информация

    Ответить
    • Виталий Кириллов:

      Пожалуйста Лана, пользуйтесь на здоровье!

      Ответить
  18. Оксана:

    Интересная статья! Никогда так не измеряла картинки нужно попробовать!

    Ответить
  19. Простой:

    Скажите, а есть ли способ выводить миниатюры, если их изначально не задавал при публикации поста?

    Ответить
    • Виталий Кириллов:

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

      Ответить
  20. Алекс:

    Добрый день, подскажите, а как можно исключить категории из цикла??

    Ответить
    • Виталий Кириллов:

      Чтобы исключить некоторые категории, задайте следующее условие сортировки:
      [php]‘category__not_in’=>x,xx,xx,[/php]
      где x,xx,xx, — id категорий через запятую.

      Ответить
  21. Антон:

    Спасибо, сейчас попробую

    Ответить
  22. Александр Кириллов:

    Интересная возможность, надо попробовать.

    Ответить
  23. Алекс:

    Заметил странность, когда в исключении одна категория, то все работает, как только ввожу через запятую еще один id, то 1я исключенная категория не отображается, а на 2ю уже исключение не работает (запятая после id стоит)

    Ответить
  24. Надежда:

    Статья полезная, максимально просто и понятно все рассказано! Все получилось с первого раза. Большое спасибо автору! Осталось только теперь для каждой статьи миниатюру задать. Я кстати пользуюсь линейкой из бесплатной программы FsCapture. Мне очень нравится.

    Ответить
    • Виталий Кириллов:

      Спасибо Надежда! Я рад, что у Вас все получилось!

      Ответить
  25. Антон:

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

    Ответить
  26. Ольга:

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

    Ответить
    • Виталий Кириллов:

      Ольга, Вы не сможете задать для каждого изображения свой отдельный размер, можно только выбрать один размер для всех и задается он в функции, которая прописывается в файле functions.php (читайте статью внимательно).
      Не понял на счет подписей. Возможно Вы имели в виду заголовки статей, то тогда Вы должны установить размеры ячейки в файле style.css, чтобы самый длинный заголовок полностью умещался.

      Ответить
  27. Татьяна:

    Виталий, а почему Вы предпочитаете не пользоваться плагинами?

    Ответить
    • Виталий Кириллов:

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

      Ответить
    • Андрей Курасов:

      Кроме того, чистый код даёт несравненно более широкий возможности для настройки работоспособности и внешнего вида, чем плагины. Особенно это касается внешнего вида — css. Кто один раз попробует сделать кодом — к плагинам уже возвращаться не будет:)

      Ответить
  28. Екатерина:

    Здравствуйте, Виталий!

    Спасибо Вам огромное за отличную статью.Все сделала и довольна результатом. Лишний раз убеждаюсь, чем меньше плагинов, тем лучше.

    НО… все же осталось несколько вопросов,а именно…
    1. Если задать размер миниатюр, а потом его изменить, нужно будет опять заново в каждой статье выбирать миниатюру? мне показалось, что именно так…

    2. Не совсем поняла по поводу удаления картинок…В папке uploads не нашла картинок с заданным для миниатюр размером…

    3. Вопрос немного не совсем по теме(может, сможете подсказать)… У себя на блоге я использую плагин Auto Hihslide, служащий для увеличение изображения при клике. Когда стала проверять картинки миниатюр, то обнаружила, что остальные картинки сохраняются в двух размерах (во вставленном в статью, и в реальном, приближенном). Не знаете ли Вы, надо ли и можно ли удалять какой-то из вариантов этих картинок?
    (прилагаю скриншот примера: joxi.ru/WGUKUtg5CbBbEKqZkpE )
    Заранее благодарна за ответы.

    С уважением.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Екатерина!
      1. Миниатюра задается один раз, изменить размер миниатюр можно в любой момент с помощью функции.
      2. После установки функции для всех последующих, загруженных на сайт, изображений будут создаваться миниатюры с заданными в функции размерами. Я удаляю их где-то 1 раз в три месяца и трачу на это 3-5 минут.
      3. В WordPress по-умолчанию создается 3 разных размера изображений, почитайте мою статью Как загружать картинки на сайт. Оптимизация изображений.
      Если останутся вопросы, пишите.

      Ответить
      • Екатерина:

        Здравствуйте, Виталий!

        Благодарю за быстрый, развернутый ответ.

        Я посмотрела статью, которую Вы порекомендовали. Зашла в свои настройки, у меня там средний размер картинки был выставлен 300*300, поставила все по нулям. Теперь, как я поняла, у меня будет только 2 картинки (малого и большого размера).

        Получается, что я могу удалить с хостинга все картинки в размере которых присутствует 300, и это не причинит вреда ранее написанным постам?

        Ответить
        • Виталий Кириллов:

          Екатерина, если Вы их не использовали, то и вреда не будет.

          Ответить
  29. Екатерина:

    Здравствуйте, Виталий! У меня возникла проблема. Настройки не меняла, но почему-то миниатюры к постам стали вставляться обрезанными.

    Что посоветуете сделать?

    С уважением.

    Ответить
    • Виталий Кириллов:

      Екатерина. вы имеете в виду, что они не одинаковые или края обрезаются?

      Ответить
      • Екатерина:

        Покажу наглядно:
        http:// joxi.ru/B_ASUtg5CbD5ZnfEqFU

        Ответить
        • Виталий Кириллов:

          Екатерина, мне трудно сказать, почему у Вас выводятся обрезанные миниатюры. Я могу лишь строить догадки и мне кажется, что эта миниатюра была обрезана, ранее установленным плагином, так как даже окончание URL картинки выглядит так:
          [php]wp-content/uploads/2013/08/plagin_limit_login_attempts_1-143×101.png[/php]
          А вот URL не обрезанной миниатюры:
          [php]wp-content/uploads/2012/04/0.png[/php]
          Наводите порядок в картинках и все будет нормально.

          Ответить
  30. Екатерина:

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

    Ответить
    • Виталий Кириллов:

      Екатерина, мне бы не хотелось с Вами спорить. Я специально посмотрел Ваш каталог uploads и в нем обнаружил миниатюры двух размеров:
      plagin_all_in_one_seo_pack_1-143×101.png
      plagin_all_in_one_seo_pack_1-150×150.png
      Та, которая 143×101 обрезана.
      Причем дубли есть у всех миниатюр, я вообще удивляюсь как у Вас что-то работает.

      Ответить
      • Екатерина:

        А спорить и не будем. просто спрашиваю у Вас совета по вопросу, по которому у вас же и училась… а работает все отлично, кроме миниатюр

        Ответить
        • Виталий Кириллов:

          Екатерина, я догадался, задавая размер для миниатюр в файле functions.php, Вы скорее всего не соблюли пропорции изображений, вот их и обрезало. Для Вас выход простой, удалите все созданные миниатюры и задайте пропорциональный размер в файле functions.php.

          Ответить
  31. Сергей:

    Спасибо! Очень помогло. Оставил три бэклинка.

    Ответить
  32. Владимир:

    Спасибо за код. А как сделать так, чтобы помимо миниатюры и названия записи еще выводилась и выдержка к статье?

    Ответить
    • Виталий Кириллов:

      Владимир, чтобы вывести цитату с поста, в код надо вставить функцию:
      [php]<?php the_excerpt(); ?> [/php]
      Например, чтобы вывести цитату в ячейке под заголовком, функцию надо вставить так:
      [php]<span><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a><?php the_excerpt(); ?></span></div></li>[/php]
      Чтобы задать определенное количество символов в цитате, в файл functions.php надо вставить следующую функцию:
      [php]function mayak_excerpt_length($length) {
      return 20;
      }
      add_filter(‘excerpt_length’, ‘mayak_excerpt_length’); [/php]
      Где 20 — это количество символов.

      Ответить
      • Андрей:

        Виталий, а можно задать количество символов в заголовке под миниатюрой? Как это сделать?

        Ответить
  33. Mark:

    Спасибо, все получилось, очень понравилось на одном проекте)

    Ответить
    • Виталий Кириллов:

      Я раз за Вас, Марк!

      Ответить
  34. Анна:

    Мы сейчас на нашем блоге ведем большую работу по избавлению от плагинов. Так что эта статья как раз то, что надо. Спасибо!

    Ответить
  35. Анастасия:

    Спасибо! Всё получилось!

    Ответить
    • Виталий Кириллов:

      Пожалуйста Анастасия!

      Ответить
  36. Юлия:

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

    Ответить
  37. Артур:

    Здравствуйте, тоже провожу чистку плагинов, пытаюсь поставить ваш код вроде разобрался во всём, осталось только в CSS подправить размеры окошек и задать миниатюры, с этим разберусь, ещё один нюанс можно ли сделать так чтобы вся эта прелесть отображалась только внутри поста, а с главной убрать или скрыть каким нибудь CSS кодом? просто у меня код не срабатывает в single.php но зато видит в loop.php, просто шаблон не стандартный…Спасибо!

    Ответить
    • Виталий Кириллов:

      Артур мне сложно Вам дать правильную инструкцию, не видя проблему.

      Ответить
  38. Артур:

    Всё спасибо уже не нужно, разобрался:)

    Ответить
  39. Анна Вечеря:

    Здравствуйте Виталий! у вас замечательный сайт, нашла на нем много полезного! вопрос такой — миниатюры у меня (так же как и у вас) выводятся на главной странице, то есть в файле index.php. там они достаточно большие. Под статьёй мне бы хотелось миниатюры поменьше. как это можно сделать?

    Ответить
    • Виталий Кириллов:

      Анна я не понял, Вы хотите вывести одну миниатюру или блок миниатюр?

      Ответить
      • Анна Вечеря:

        я так же как у вас хотела вывести блок с 3 миниатюрами. но я уже разобралась, миниатюры немного обрезались, но и так понятно, спасибо!

        Ответить
  40. Jekun:

    Подскажите каким способом т.е. код вывода random тэга название, просто не кликабельного, что бы вставить можно было в хеадере сайта как текстовое слово.

    Ответить
  41. Дмитрий:

    Здравствуйте, Виталий, подскажите, пожалуйста, как можно реализовать вывод миниатюр записей на странице по меткам и категориям (т.е. на каждой странице выводятся миниатюры с определенными метками и категориями), как на сайте http: //www.allcarz.ru/catalog/acura/

    Ответить
    • Виталий Кириллов:

      Здравствуйте Дмитрий!
      Способ вывода миниатюр по меткам и тегам я подробно описал в этой статье. По-моему это как раз то, что Вам нужно! Или я Вас не правильно понял?

      Ответить
    • Виталий Кириллов:

      На сайте, который Вы привели в качестве примера, реализован вывод по категориям.

      Ответить
  42. Ildar:

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

    Ответить
    • Виталий Кириллов:

      Надо добавить следующий код

      <?php 
          if( has_post_thumbnail() ) {
              the_post_thumbnail();
          } else {
              echo '<img src="'.get_bloginfo("template_url").'/default.gif" />';
          }
      ?>
      

      Где default.gif — специально приготовленная картинка.

      Ответить
  43. Сергей:

    Здравствуйте! Подскажите, как сделать точно также, как и у Вас на сайте?!
    Я всё по пунктам выполнил и у меня получилось, что миниатюры отображаются вертикально, а заголовок поста выходит за границы изображения, это не так красиво выглядит!
    У Вас же смотреться куда лучше, миниатюра под ней текст, который переноситься, не выезжая за границы изображения, вот именно так я и хотел бы видеть мои анонсы записей!
    Что, где нужно изменить? Или поделитесь именно Вашим кодом, который стоит на этом сайте!
    Заранее Благодарен!
    С Уважением, Сергей!

    Ответить
    • Виталий Кириллов:

      Здравствуйте Сергей!
      Я на своем блоге использую точно такой же код! Если похожие записи у меня отображаются лучше, то это целиком зависит от стилей.
      1. Общий заголовок «Интересное на блоге» можно вынести за пределы функции.
      2. Надо регулировать размеры ячеек, чтобы они нормально размешались на странице:

       width: 157px;  /* ширина одной ячейки */
      

      3. Надо регулировать размеры миниатюр, это можно сделать двумя способами: изначально задать нужные размеры в файле functions.php или задать размеры непосредственно в коде.
      Вместо:

      <?php the_post_thumbnail('thumbnail'); ?>
      

      Вставьте следующее:

      <?php the_post_thumbnail(array(120,100)); ?>
      

      Где 120,100 — размеры миниатюр.

      4. Если текст вылазит за рамки, настройте внутренние отступы, например:

      #cell a{
      padding: 5px;
      }
      

      Удачи!

      Ответить
      • Сергей:

        Хорошо, сейчас попробую, ну а то что миниатюры отображаются вертикально, а у вас горизонтально это можно, как-то регулировать?

        Спасибо!

        Ответить
        • Сергей:

          В две строки я имею ввиду! в два столбца по 4!

          Ответить
          • Виталий Кириллов:

            Сергей, Я вас не понял. Что Вы хотите от миниатюр?

            Ответить
  44. Сергей:

    чтобы было как и у вас, по четыре в две строки(столбца) под картинками заголовок поста!

    Ответить
    • Виталий Кириллов:

      Так у меня ширина страницы больше раза в два, чем на вашем блоге!
      Уменьшаете размеры ячеек, уменьшайте миниатюры, чтобы в один ряд влезло 4 ячейки. Чтобы было два столбца, задайте в коде вывод 8 шт:

      'showposts'=>8,  //количество выводимых ячеек
      Ответить
  45. Сергей:

    Снимаю вопрос! всё урегулировал!

    Спасибо за помощь!!!!

    Ответить
  46. Азамат Куанышев:

    Здравствуйте Виталий! Мне очень нравится Ваш блог, здесь я нашел много полезного.
    У меня вопрос, можно ли чтобы картинки брались не с миниатюр а с помощью произвольных полей? Просто у меня так изначально настроено, чтобы задать картинку для раздела «Похожие статьи» мне надо добавлять его с помощью произвольного поля с именем «image»
    Раздела «Похожие статьи» выводится у меня с помощью плагина, хотелось бы выводить его без плагина.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Азамат! У меня нет готового решения, но вскоре я собираюсь посвятить произвольным полям серию статей, где постараюсь ответить на Ваш вопрос.

      Ответить
  47. Азамат Куанышев:

    Спасибо за ответ, буду с нетерпением ждать!

    Ответить
  48. Олеся:

    Все получилось, код выводит так как нужно, единственное с чем не получается справиться — это изменить размеры миниатюр, они выводятся стандартные 150х150 и обрезаются, изменила размер в медиафайлах, убрала там галочку «обрезать»- ничего не меняется, в чем может быть проблема?

    Ответить
    • Виталий Кириллов:

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

      <?php the_post_thumbnail('thumbnail'); ?>

      и замените его на этот:

      <?php the_post_thumbnail(array(140,100)); ?>

      Где 140,100 размеры миниатюры. Просто укажите свои размеры.
      Но повторяю, лучше не полениться и перезалить картинки.

      Ответить
  49. Олеся:

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

    Ответить
    • Виталий Кириллов:

      Олеся, Вы опробовали предложенный мной способ?

      Ответить
  50. Сергей:

    Немного модернизировал добавив в конце после слов «Интересное из категории» саму категорию

    Но у меня вроде все выводится как у вас на блоге, вот только вместо надписи «Интересное из категории» выводится непонятные сиволы ���������� �� ���������. Что то с кодировкой((

    Ответить
    • Виталий Кириллов:

      Сергей, так поменяйте кодировку файла!

      Ответить
      • Сергей:

        Проблему уже решил))) НО все равно спасибо за ответ!!!

        Ответить
  51. Олеся:

    Виталий, если вы имеете в виду изменить код, то в файле темы functions.php у меня такого кода нет изначально, а миниатюры есть (в админке, когда пишу пост есть функция заливки миниатюр) может быть это из-за того, что у меня стоит шаблон в котом есть раздел «настройка миниатюр» и там можно задавать размеры миниатюр…

    Ответить
    • Виталий Кириллов:

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

      Ответить
  52. Олеся:

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

    Ответить
    • Виталий Кириллов:

      Нет Олеся не правильно. Надо сделать так. Заходите в админку, идете Параметры -> Медиафайлы, устанавливаете желаемые пропорции для миниатюр. Затем открываете запись, нажимаете кнопку «Добавить медиафайл». Далее ишете среди изображений, загруженных для данной записи, первое изображение с поста, удаляете его на всегда. После этого загружаете тоже изображение заново. Делайте все в строгой последовательности и если что не понятно, лучше спросите.

      Ответить
  53. Светлана:

    Виталий, здравствуйте! У меня вот другая проблема. Хотела сделать вывод статей под текстом (из этой же рубрики), но у меня под статьей автоматически выводится по 2-3 ссылки на другие статьи. Не подскажете, как их убрать? Вроде все плагины, которые могли бы за это отвечать, удалила. В коде тоже не знаю, где искать.
    Помогите, пожалуйста.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Светлана!
      Попробуйте такой код:

      <div class="similar_records">
      <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, // Сортировка производится по категориям
       'orderby'=>rand, // Условие сортировки рандом
       'post__not_in' => array($post->ID),
       'showposts'=>5, //Количество выводимых записей
       '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_attribute(); ?>"><?php the_title(); ?></a></li>
              <?php
              }
              echo '</ul>';
          }
      wp_reset_query();
      }
      ?></div>
      
      Ответить
      • Светлана:

        Да, спасибо. Записи выводятся так, как я и хотела, но все-равно после текста присутствуют ссылки от какого-то другого плагина или код какой-то присутствует. Не подскажете, как оставить только ваш вариант вывода и убрать предыдущий?

        Ответить
        • Виталий Кириллов:

          Я не могу вам сказать, не зная содержание файла single.php.

          Ответить
  54. Светлана:

    Ой, не сочтите за труд… Пожалуйста, посмотрите… Закачала его на Яндекс.Диск. Вот ссылка yadi.sk/d/FU-Bh-usKzeoN
    Даже не знаю, у кого еще можно проконсультироваться, а по Вашему сайту видно, что Вы — отличный специалист. Пожаааалуйста…

    Ответить
    • Виталий Кириллов:

      Светлана, удалите следующую строчку:

      <?php wp_link_pages(array('before' => '<p><strong>Страницы:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

      Если я Вас правильно понял…

      Ответить
  55. Евгений:

    Уже применил, спасибо. Правда пришлось код править под себя и со стилями поиграться, но это не составило огромного труда. Еще раз спасибо за код…

    Ответить
    • Виталий Кириллов:

      Пожалуйста Евгений, рад видеть Вас На блоге!

      Ответить
  56. Николай:

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

    Ответить
    • Виталий Кириллов:

      Николай, придется еще раз процитировать кусочек статьи:

      Вот этот отрезок кода отвечает за открывание статей в новой вкладке:

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

      Читайте внимательней!

      Ответить
  57. Николай:

    Действительно, спасибо! Но я все равно не понял, как сделать так, чтобы все в одном окне открывалось. Мне эту часть кода просто удалить?

    Ответить
    • Виталий Кириллов:

      Именно так!

      Ответить
  58. Виктор:

    Добрый день Виталий. Спасибо за статью, всё сделал правильно, всё отображается, но есть одна проблемка, в мозилле правильное отображение (горизонтально 3 записи), а в explorer записи отображаются вертикально, как это исправить?

    Ответить
    • Виталий Кириллов:

      Здравствуйте Виктор!
      У меня в explorer блок с миниатюрами отображается корректно.

      Ответить
  59. Михаил:

    Здравствуйте, Виталий.

    Как сделать не рандомный вывод похожих записей а в последовательности по возрастанию. Например: первая статья ссылается на 0,1,2,3 записи, вторая на 1,2,3,4 записи, третья на 2,3,4,5…и т.д. А точнее, новая статья на сайте ссылается на 4 предыдущие и т.д. То есть каждая статья получает 4 ссылки с других написанных статей. Надеюсь, Вы поняли мой вопрос.

    Ответить
    • Виталий Кириллов:

      Михаил, в данном коде такие настройки задать нельзя.

      Ответить
  60. Инна:

    А что в этом коде надо дописать, чтобы допустим вывести статьи из определенных категорий или исключить в показе определенные id категорий:

    Похожие записи

    Ответить
    • Виталий Кириллов:

      Инна вывести посты из определенных категорий возможно. Код будет выглядеть так:

       <?php
      $categories = get_the_category($post->ID);
      if ($categories) {
          $category_ids = array();
          foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
          $my_query = new wp_query('cat=15,16&posts_per_page=8');
          if( $my_query->have_posts() ) {
          echo '<ul>';
          while ($my_query->have_posts()) {
          $my_query->the_post();
      ?>
      <li><div id="blok"><span style="width:150; height:111;"><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>"><?php the_post_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();
      }
      ?>
      

      Обратите внимание на строчку №6. В ней указывается ID категорий через запятую:

      cat=15,16
      

      Если надо наоборот исключить определенные категории, то поставите знак минуса перед цифрами:

      cat=-15,16
      
      Ответить
  61. Андрей:

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

    Ответить
    • Виталий Кириллов:

      Здравствуйте Андрей! Плагин, от которого вы хотите избавиться, как я полагаю берет первую картинку и делает из нее миниатюру. Вы пишите, что не добавляли миниатюры, я честно не понял. Посмотрите в админке (Настроки -> Медиафайлы), заданы ли размеры для миниатюр? А также проверьте, активирована ли у Вас поддержки миниатюр, о чем я писал в статье.

      Ответить
  62. Евгений:

    Здравствуйте! Есть проблема в том, что один из боксов похожих записей ведет на эту же самую стр, на которой я нахожусь. Можно ли как нибудь исключить страницу, на которой я нахожусь из показа в блоке похожих на этой стр?

    Ответить
  63. vladchv:

    Спасибо! С многих статей брал код, ломало сайт (белый экран и все). А ваш работает =)

    Ответить
  64. Сергей:

    Здравствуйте, Виталий! Огромное спасибо за Ваш бесценный труд и помощь начинающим вебмастерам!!!

    У меня есть блог, посвященный двум направлениям: фотография и путешествия. На главной отражаются статьи в хронологическом порядке с миниатюрами. Недостаток состоит в том, что если я пишу отчет о путешествии (он занимает, например, 20 записей), то посетитель, зашедший на главную, но интересующийся фотоделом — уйдет.

    1) Я бы хотел на главной отобразить сетку 3*3 миниатюры с названием постов. Только вот выбирать, какие записи будут отобржаться в них мне нужно не автоматически, а вручную. Так я могу вручную продвигать именно те статьи, которые я хотел бы показать потенциальным посетителям.

    2) В конце каждой статьи я вручную подбираю набор ссылок на статьи, связанные с данным постом. Это не обязательно из той же рубрики или с теми же ключевыми словами. И количество «похожих» статей каждый раз разное. Это выглядит так:

    «Кроме этой статьи о путешествии в Китай вы можете прочитать:
    — Как составить план маршрута (ссылка)
    — Как фотографировать китайские фонарики (сылка)
    — Какую обувь выбрать для походов по горам (ссылка)

    И т.п.

    Можно ли при написании статьи с помощью HTML вызывать еще миниатюры к ним?

    Ответить
    • Виталий Кириллов:

      Здравствуйте Сергей! Я думаю что можно. Я все больше убеждаюсь в том, что в сайтостроении вообще нет ничего невозможного.

      Ответить
      • Сергей:

        Виталий, спасибо конечно, за ответ. Но я надеялся, что Вы подскажете как… 😉 Я более подробно почитал Ваши статьи и пришел к выводу, что частично ответ на то, как сделать сетку 3*3 есть в посте «Вывод самых популярных записей в сайдбаре».

        Но так и не понял, как вручную вставить туда конкретную миниатюру и ссылку на запись. А не рассчитывать по формуле,как у Вас.

        И вопрос 2 — глухо… 🙂

        Ответить
        • Виталий Кириллов:

          Сергей, заранее подготовьте миниатюры, затем создаете таблицу. А вот как у все будут располагаться запись и миниатюры: рядам или друг над другои мне пока не понятно. Ну ладно для примера возьму одну ячейку

          <td><a ссылка на запись><img src="путь до миниатуры"/></a></td>
          

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

          Ответить
          • Сергей:

            Виталий, теперь все понятно. Спасибище! А вот такой вопрос: у нас получается в блоге на одной странице сразу несколько ссылок на одну и ту же статью: 1) Самая комментируемая — ссылка «заголовок» статьи 2) Кликабельная картинка-миниатюра на эту же статью. 3) Может так оказаться, что в моей сетке 3*3 с рекомендованными статьями окажется этот же пост с еще 2 ссылкам: миниатюра и заголовок.

            Поисковики как определяют, что это- не ссылочный СПАМ?

            Ответить
            • Виталий Кириллов:

              Я думаю за спам это не сочтут.

              Ответить
              • Сергей:

                Здравствуйте, Виталий! Попробовал сделать так, как вы объяснили. Большое спасибо за помощь! Осталась одна проблемка: в Google Chrome и Mozilla миниатюры отражаются нормально. А в Opera и Explorer — все сбивается.

                В тот код, что вы указали, я добавил , чтобы текст отражался под миниатюрой». Может быть вы посмотрите и дадите совет, как устранить баг с Оперой и Эксплорером? Адрес сайта: Photo-and-travels.ru

                Спасибо заранее!

                Ответить
                • Виталий Кириллов:

                  Здравствуйте Сергей! Все дело в том, что страница шире, чем блок с миниатюрами. Поэтому в стилях надо указать фиксированную ширину блока.
                  В строчке:
                  width: 100%; /* Длина блока соответствует ширине страницы */
                  Вместо %, надо указать ширину в пикселях (px), например:
                  width: 600px;

                  Ответить
                  • Сергей:

                    Мне не нравится не то, что картинки расползаются по ширине экрана, а то, что подписи к ним в Мозиле и Хроме располагаются аккуратно снизу картинки, а в Эксплорере и Опере — сбоку и по-корявому.

                    Ответить
                  • Сергей:

                    И установка фиксированной ширины не помогла установить порядок с отображением надписей (сейчас обратно сделал Width 100%).

                    Ответить
                    • Виталий Кириллов:

                      Сергей, вы говорите сделали все, как я объяснял, а сами в коде использовали не списки, а элементы таблицы.
                      Теперь надо прописывать стили для ячейки таблицы и задавать ей ширину.

                  • Сергей:

                    Виталий, большое спасибо за помощь! Помучался и всё заработало! Желаю Вам удачи!!!

                    Ответить
  65. chelsea01:

    а как можно вывести по горизонтали?

    Ответить
    • Виталий Кириллов:

      Селайте ширину блока меньше, а высоту больше.

      Ответить
  66. Мария:

    Я все сделала по вашей статье, а у меня в одном ряду только 3 блока отображаются, и они не ссылки просто картинки. Почему и что делать?

    Ответить
    • Виталий Кириллов:

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

      Ответить
    • Мария:

      Покопалась в стилях, теперь в одном ряду 4 записи. Но они по прежнему не ссылки!

      Ответить
  67. Мария:

    Кстати, проблема появляется при добавлении файла стилей. То есть до файла стилей это ссылки а после — нет…

    Ответить
  68. Дмитрий:

    Здравствуйте Виталий! Вроде всё получилось, только одна проблема, вместо заголовка «Интересное на блоге» у меня вопросительные занаки в чёрных ромбиках,я понял что это с кодировкой что то нитак. Подскажите как исправить???

    Ответить
    • Виталий Кириллов:

      Здравствуйте Дмитрий! В редакторе Notepad++, во вкладке «Кодировки», установите «UTF8 без ОМ».

      Ответить
      • Дмитрий:

        Спасибо Виталий! Помогло, я до этого пробовал эту кодировку включать, не чего не менялось, а надо было не тупо менять кодировку, а преобразовать в «UTF8 без ОМ»
        Виталий, ещё подскажите пожалуйста, занимаюсь оформлением странички 404, хочу на пример последние 8 статей с миниатюрами туда воткнуть, но что то тоже пока не выходит, пробовал ваш код вставлять, там вообще какая то петрушка получается,сайт бар по среди страницы выходит, с поиском и формой подписки. И кромсать код пробовал, не получается желаемый результат((

        Ответить
        • Виталий Кириллов:

          Данный код вывода миниатюр работает только внутри цикла WordPress.

          Ответить
          • Дмитрий:

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

            Ответить
          • Дмитрий:

            Вывод последних пяти записей блога: <?php get_archives ('postbypost', 5); ?>

            Ответить
            • Виталий Кириллов:

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

              Ответить
              • Дмитрий:

                Хорошо Виталий! Жду с нетерпением!

                Ответить
  69. Алексей:

    Здравствуйте Виталий! Сделал все по Вашей статье, блок с ячейками выводится нормально. Но при добавлении миниатюры у меня она добавляется и в статью. В статье получается две одинаковых картинки, но разных размеров. В чем проблема?

    Ответить
    • Виталий Кириллов:

      Я так не могу сказать, покажите Ваш файл single.php, я посмотрю.

      Ответить
  70. Алексей:

    А как увеличить расстояние между миниатюрой и текстом, что идет ниже ее, например мне нужно добавить 10 пикселей? А то у меня текст слишком прилипает к миниатюре, мучаюсь второй день не знаю куда прилипить, может подскажите на примере моего сайта?

    Ответить
    • Виталий Кириллов:

      Алексей, попробуйте к идентификатору:
      #cell a
      Добавить такой селектор:
      margin-bottom: 30px;
      Должно получиться.

      Ответить
      • Алексей:

        Спасибо, наконец-то получилось, пришлось еще высоту увеличить, чтобы третья строка входила

        Ответить
  71. Дмитрий:

    Виталий,вы не нашли как можно тоже самое на стр 404 вывести с миниатюрами?

    Ответить
  72. Алексей:

    Не подскажите с аватарками, пытался найти у вас пост про них и не нашел. Смотрю симпатично у вас получилось выводить аватарки в комментариях. Я ставил плагин simple-local-avatars и у меня ничего не получилось, аватарки я так и не увидел

    Ответить
  73. Рашида:

    Спасибо Виталий — всё прекрасно получилось — вывести похожие записи без плагина с миниатюрами.

    Ответить
  74. Odessit:

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

    Ответить
  75. Odessit:

    Всё, спасибо, сам справился, оказывается можно добавить минус, и всё едет в другую сторону))) У меня появился ещё один вопрос, можно каким то образом добавить похожие или случайные или популярные записи в боковой сайдбар в виджет? Естественно без плагина Спасибо.

    Ответить
    • Виталий Кириллов:

      Здравствуйте! Вот и славно, что Вы сами справились. По поводу второго вопроса, вот статья, почитайте.

      Ответить
  76. Геннадий:

    Давно ищу такую информацию, вот только на Вашем блоге увидел более подходящий и более подробный мануал. Только у меня одна проблемка, код совсем не такой, как в обычных или в других php файлах. Поэтому не могу найти то, нужное место где должен распологаться код. Виталий, Вы не могли бы посмотреть в какое место нужно устанавливать ваш код. Если согласны я пришлю на Вашу почту файл single.php, может быть Вы поймете, что к чему. Надеюсь с Вашим опытом, это сделать будет не трудно. Жду Вашего решения.

    Ответить
    • Виталий Кириллов:

      Присылайте Геннадий, я посмотрю.

      Ответить
      • Геннадий:

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

        Ответить
        • Виталий Кириллов:

          Геннадий, теперь меня интересует функция art_get_content(), которая скорее всего находится в файле functions.php. Пришлите мне его тоже.

          Ответить
        • Виталий Кириллов:

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

          Ответить
          • Геннадий:

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

            Ответить
  77. Юлия:

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

    Ответить
    • Виталий Кириллов:

      Здравствуйте Юлия!
      1. Я не знаю особенности вашего шаблона, но по всей видимости у Вас тег more проставлен после первой картинки в статье, а в файлах отвечающих за вывод главной страницы, рубрик и т.п, прописана функция вывода миниатюр в анонс статьи. Более подробно о этой функции я писал тут.
      2. Не уверен, что такое можно сделать в рамках функции get_the_category, к которой и оперирует данный код.

      Ответить
  78. rukodelie-dom:

    Вывод картинки через CSS код в комментариях, как сделать???

    Ответить
  79. Витас:

    Виталий,как вы и описывали — до сих пор не задумывался о проблеме. Собственно на сегодня ее и нет, но, почитав ваши статьи, понял что следует заняться заранее. Решил поудалять плагины и заменить их кодом, который вы рекомендовали. Сразу наткнулся на такой момент: при попытке удалить плагин nrelate Related Content, — в админке появился вопрос «вы хотите удалить плагин и все файлы связанные с ним?»… и приводится длинный перечень ссылок ( на картинки, меню, тексты и пр). То есть, при удалении плагина появится сотня битых ссылок? Или я не верно понимаю? Прошу подсказать правильную последовательность действий.

    Ответить
    • Виталий Кириллов:

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

      Ответить
      • Витас:

        Виталий,извините за занудство, но весьма не хочется один раз отрезав — сто раз исправлять вручную. Тем более что я слабоват в этом.
        Что означает плагин создает файлы?! Я думал что он лишь дает ссылки на СУЩЕСТВУЮЩИЕ файлы.
        И верно ли я понял вас, что после удаления плагина и соответственно его ссылок на файлы, типа:
        • /nrelate-related-content/screenshot-9.png
        • /nrelate-related-content/related_settings/related-plugin-status.php
        • /nrelate-related-content/language/readme.txt
        внешний вид сайта не «поведет»? И как проверить «остаточные файлы»?
        Заранее благодарен за помощь.

        Ответить
        • Виталий Кириллов:

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

          Ответить
          • rukodelie-dom:

            Виталий, я задала вопрос по поводу вывода после текста статьи — блока Рекомендаций — с Картинками — как и что сделать — по шагово — если есть ссылка — буду признательна — Миниатюры не появляются — в чем причина?

            Ответить
            • Виталий Кириллов:

              Я не знаю, как Вас называть, но у меня нет такой ссылки.

              Ответить
              • rukodelie-dom:

                Имя мое Вам ничего не скажет, а вот от Вас я жду ответа, — как можно сделать, чтобы вместо белых квадратиков в Блоке Рекомендаций, выводился текст и минифотка? Вот и все. Спасибо.

                Ответить
  80. Юля:

    Так и не смогла поставить блоками.Что только не делала,все равно ставится по одной картинке в вертикальную линию.Спасибо,конечно.Но,хотела еще на Главной сделать и на категориях,а теперь думаю,что все равно не получится.

    Ответить
  81. Василий Цубера:

    Виталий Здравствуйте! У меня получилось вывести статьи с миниатюрами,но дело в том. что когда я добавляю к записи миниатюру, то она выводится не только в похожих записях в открытой статье, а также выводится в закрытых статьях на индексной страничке. Вот я сделал скрин посмотрите, может есть решение этой проблемы s019.radikal.ru/i605/1412/d6/c84cb586904c.jpg

    Миниатюра должна выводится только в открытой статье, а она как видите еще и в закрытой выводится.

    Подскажите что делать. за ранее спасибо.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Василий! Значит Ваш шаблон так устроен. Надо взглянуть на Ваш файл index.php

      Ответить
      • Василий Цубера:

        ну ладно тогда пусть будет так как есть, просто я в коде не очень. а сейчас не готов платить деньги. просто пока нет! Спасибо за ответ!

        Ответить
  82. Юрий:

    Установил, все классно, все работает. WordPress 3.9.2 не работает с Yet Another Related Posts Plugin 4.2.4 и 4.2
    Поэтому решил воспользоваться этим методом.
    К стати, Виталий, очень хороший блог. Если что то нужно сделать, сначала ищу в Вас, если не нахожу, то тогда ищу в другом месте.

    Ответить
  83. Odessit:

    Добрый день, подскажите, а можно что-то сделать, чтобы не выводились alt и title?

    Ответить
    • Виталий Кириллов:

      Наверное можно, вопрос зачем…?

      Ответить
      • Odessit:

        Тайтл убрал. Проблема в том, что я разместил ваш блок и в следующий ап сайт потерял 2/3 трафика, написав Платону, мне ответили что у меня переспам, выводятся поисковые запросы списками или блоками. Единственное что было нового на сайте и что соответствовало этим значениям, ваш блок(((. Убрал и через 3 недели всё вернулось назад. Совпадение?! Вряд-ли… Но у людей же стоят такие похожие записи, точнее похожие на ваши и вот тайтл почти ни у кого не выводится.

        Ответить
        • Виталий Кириллов:

          Советую Вам внедрить микроразметку, чтобы title или alt изображения, робот не считал за ключевое слово.

          Ответить
  84. Павел:

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

    Ответить
    • Виталий Кириллов:

      Павел, возможно у Вас не созданы миниатюры?

      Ответить
      • Павел:

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

        Ответить
  85. Павел:

    Я не очень силен в кодах, только начинаю осваивать вордпресс, оформлять сайт. Виталий, подскажите пожалуйста, как можно изменить местоположение миниатюры, которое я задал для похожих записей, в статьи. И еще, подскажите, можно как нибудь ее подписать. Чтобы под самой миниатюрой, в статьи, было ее название. Можно сделать так, чтобы при клике на нее в статьи она плавно ивелищивалась в размере, как медиальный.

    Ответить
  86. Павел:

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

    Ответить
    • Виталий Кириллов:

      Павел, вот код который проверит наличие миниатюры и если такой нет, выведет подготовленную заглушку:

      <?php
      //должно находится внутри цикла
      if( has_post_thumbnail() ) {
      the_post_thumbnail();
      } else {
      echo '<img src="'путь до картинки" />';
      }
      ?>

      Ответить
      • Константин:

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

        <a href="» title=»Read «>
        <img src="» alt=»» >

        Ответить
        • Виталий Кириллов:

          Здравствуйте Константин! Можно сделать изображение пустышку и прописать условие, при котором в случаи отсутствия миниатюры будет отображаться заготовленная «болванка». Само условие я не готов привести, но вы мне подкинули мысль для новой статьи. А может после проведения некоторых экспериментов я приведу обновленную функцию прямо в ответе на Ваш комментарий. Так что подпишитесь на комменты.

          Ответить
  87. Eva:

    Подскажите, пожалуйста, а как выводить похожие записи не во всех категориях (без использования плагинов)?
    Вот у меня есть категории «статьи 1», «статьи 2», «специалисты».
    Как сделать так, чтобы «похожие записи» выводились во всех категориях «статьи…» и НЕ выводились в категории «специалисты»?
    Спасибо!

    Ответить
  88. Евгений:

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

    Ответить
    • Виталий Кириллов:

      Все верно!

      Ответить
      • Евгений:

        Тогда может поможете с таким вопросом: когда я миниатюру создаю, она у меня в записи появляется в верхнем левом углу, а так как я еще не особо силен в пхп, то не знаю где находится функция, которая выводит эту миниатюру в это место, может вы поможете разобраться?

        Ответить
        • Виталий Кириллов:

          Евгений, миниатюра должна появиться не в самой записи на на боковой панели в блоке «Миниатюра записи».

          Ответить
          • Евгений:

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

            Ответить
        • Виталий Кириллов:

          Евгений, просто мне бы хотелось, чтобы прежде, что задавать очередной вопрос, Вы попытались сами найти на него ответ. Тем более на моем блоге много статей посвященных миниатюрам. Вот одна из них, которая касательно отвечает на Ваш вопрос — «Функция the_post_thumbnail() — миниатюра записи в анонсе WordPress».

          Ответить
  89. Владимир:

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

    Ответить
    • Виталий Кириллов:

      Здравствуйте Владимир!
      У вас миниатюры в админке появились, на боковой панели справа?

      Ответить
      • Владимир:

        Я твои коды вставил к себе на сайт, а как у тебя 2 ряда по 4 статьи не получилась сделать, у меня просто 4 статьи получилась сделать и то по моему кривые.

        Ответить
        • Виталий Кириллов:

          Надо познавать css? есть бесплатные видео курсы. Язык самый простой из всех языков программирования. В рамках комментария я не могу вас этому научить.

          Ответить
  90. Ирина:

    Виталий, спасибо большое за нужную мне информацию! Получилось почти все, кроме как выставить ячейки посередине блока. Я использую 1 блок и 2 ячейки. Подскажите, пожалуйста, как вывести их посередине блока? Спасибо!

    Ответить
    • Виталий Кириллов:

      Ирина, а где посмотреть, что у Вас получилось?

      Ответить
      • Ирина:

        Я пока проверяю все на денвере, а потом уже переношу на блог. Не против, если я вышлю Вам singl.php?

        Ответить
  91. Sergey:

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

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

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

    Ответить
    • Виталий Кириллов:

      Роман, я не занимаюсь скрещиванием плагинов с функциями.

      Ответить
  93. Игорь:

    Здравствуйте, Виталий, спасибо за статью, собираюсь использовать код,
    но почему-то у меня
    ‘tag__in’ => $tag_ids, — не работает
    ‘category__in’ => $category_ids, — работает
    в чем может быть причина?
    P.S. В Вашем коде для редактирования файла single.php, в 21 строчке «» по- моему лишний

    Ответить
    • Виталий Кириллов:

      Игорь, а Вы теги используете? Спасибо, что увидели лишний тег, уже исправил.

      Ответить
  94. Игорь:

    Да, использую. кроме Вашего кода пробовал другие — там работает.
    когда в Вашем коде ‘category__in’ => $category_ids, — выводятся статьи из категорий, когда ставлю ‘tag__in’ => $tag_ids, — выводятся почему-то статьи в случайном порядке

    Ответить
    • Виталий Кириллов:

      Игорь, в коде надо изменить с 5 по 10 строчки на следующее:

      $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, // Сортировка производится по тегам
      

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

      Ответить
      • Игорь:

        Все работает! Огромное спасибо 🙂

        Ответить
  95. Дониёр Махмудов:

    Уважаемый Виктор! Солнечный привет вам из Ташкента!

    Спасибо вам большое за подробную статью и очень полезные советы.

    Я начал использовать ваш код, но возникли косяк, который я не могу устранить: Отображается значок списка, а ячейки не стоят ровно, а «идут ступеньками» вниз. Посмотрите, пожалуйста любую страницу моего сайта и вы поймёте о чём речь.

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

    Помогите, если не трудно.

    С уважением и благодарностью,
    Дониёр

    Ответить
    • Дониёр Махмудов:

      Спасибо, я уже устранил косяк — вашем коде идёт пара <li></li>, я их убрал и всё починилось. С круглыми превью тоже сам разобрался — можете посмотреть на получившийся результат. Мне лично очень нравится. Спасибо вам за статью и коды.

      Ответить
  96. Ксения:

    Здравствуйте,у меня при вставке кода ,почему то сайдбар ,который справа,уходит вниз влево.И страница как бы делится надвое(Почему так получается,не подскажете?

    Ответить
    • Виталий Кириллов:

      Возможно у Вас другая ширина сайдбара.

      Ответить
  97. Инга:

    Здравствуйте! Огромное спасибо за статью, очень помогла. Есть 2 вопроса:
    1. Как чтоб вместо рандома (‘orderby’=>rand, // в случайном порядке) статьи показывались по новизне? Категории или теги не имеют значения.

    2. У меня почему-то миниатюры появляются под шапкой блога. Это из-за кода в index.php?

    Ответить
    • Виталий Кириллов:

      Здравствуйте Инга.
      1. По новизне надо так: order=>ASC, надеюсь разберетесь.
      2. Я не могу знать коды всех шаблонов, почитайте еще одну статью об использовании миниатюр, возможно вы найдете ответ на свой вопрос.

      Ответить
      • Инга:

        1)order=>ASC не помог, буду что-то думать
        2) возможно из-за того, что к блогу подключена другая тема, отличительная от основной сайта

        Ответить
        • Виталий Кириллов:

          Инга, ASC надо было взять в кавычки:

          order=>'ASC'
          
          Ответить
          • Инга:

            все равно не помогает, пробовала варианты:
            order=>’ASC’
            ‘order’=>’ASC’
            ‘orderby’=>’ASC’
            они меняются, но как-то хаотично. Возможно дело в категориях. Разберусь, просто я в php — нуб)))

            2.) Уже разобралась, в css этому атрибуту поставила display:none

            Ответить
  98. Марина:

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

    Ответить
  99. Игорь:

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

    Ответить
  100. Дмитрий:

    Хорошее решение, но если блог смотреть например с телефона, но будут не очень красиво смотреться эти миниатюры. Лучше сделать вывод миниатюр как на этом сайте seopulsar.ru тогда для любого разрешения экрана, естественно и с любого устройства, все красиво будет выводиться. Хотел спросить, а как вывести такие же похожие записи как и на том сайте, что я написал выше? Есть готовые решения?

    Ответить
    • Виталий Кириллов:

      Дмитрий, для телефонов нужна мобильная версия сайта, со всеми вытекающими изменениями.

      Ответить
  101. Андрей:

    Здравствуйте, Виталий!
    Подскажите, а как можно ограничить длину надписи (количество знаков или слов) под миниатюрой, а то у меня есть статьи с длинными заголовками, которые диссонируют с другими

    Ответить
    • Виталий Кириллов:

      Андрей установите определенную высоту ячейки и используйте свойство:

      overflow:hidden;
      

      Которое скроет текст, вышедший за границы ячейки.

      Ответить
      • Андрей:

        Почему-то не работает… Это свойство уже прописано в Вашем коде.

        Ответить
        • Виталий Кириллов:

          Андрей, вы хоть покажите что у Вас получается…

          Ответить
          • Андрей:

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

            Ответить
  102. Валентин:

    Здравствуйте, Виталий.
    У меня проблема в выводе изображения миниатюр, похожая на Олесину. То есть файлы, скажем, размером 650х900 выводятся в виде квадратов. Изображение изначально при загрузке растягивается на квадрат. В принципе, я понял, как изменить это в коде, по Вашему описанию, но дело в том, что у меня штук 20 разных товаров с разными изображениями. Получается, для загрузки каждого типа нужно лазить в код?

    Ответить
    • Виталий Кириллов:

      Валентин, в идеале надо подгонять пропорции изображений перед загрузкой на сайт, а также выставить правильные размеры миниатюр в настройках WordPress(админка->настройки->медиафайлы).

      Ответить
      • Валентин:

        Виталий, я использую Woocommerce, там свои настройки изображений и я пока не могу понять, как они согласуются с настройками медиафайлов в WordPress. Выставить просто одинаковые значения?
        Что же касается предварительной обработки изображений — это, насколько я понял, можно сделать в Easy Thumbnails. Получается, если у меня минимальная миниатюра в настройках, скажем, 300х300, то мой файл с размерами в оригинале 650х898 в Easy нужно будет пропорционально уменьшить до 162х217. И тогда изображение будет выглядеть корректно?

        Ответить
        • Виталий Кириллов:

          Валентин, плагины зачастую создают свои базы данных и свои изображения. Я не знаю по какому принципу работает Woocommerce. Миниатюра берется от близкого размера. Боюсь что размер 162х217 будет браться, как раз с миниатюры 300х300. Вы попробуйте!

          Ответить
          • Валентин:

            Попробовал. Выводы следующие. Для загрузки фотографий на сайт необходима их предварительная обработка в фотошопе (в нем удобнее всего даже для чайников, как я). Обработка заключается в уменьшении размеров. Если у меня в настройках Woocommerce стоит минимальная миниатюра 300х300, то фотография после фотошопа должна быть в пределах 300х300 и не более. Можно менять в Woocommerce да и в WordPress (если не используется Woocommerce)базовые значения миниатюр, скажем, на 400х400. Тогда, само собой, в фотошопе нужны будут на выходе фото не более 400х400. Проблема WordPress в том, что он не сжимает загружаемых фотографий до нужных размеров, а вписывает в квадрат лишь часть фотографии большего размера, чем указано в его настройках. Спасибо, Виталий, Ваш совет помог. Надеюсь, кому-то поможет и мое детальное объяснение.

            Ответить
  103. Алексей:

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

    Ответить
  104. Алексей:

    Для исключения нескольких категорий их нужно объединить в массив.
    Код для исключения категорий будет выглядеть таким образом
    ‘category__not_in’=> array( 3,7,8 ), где цифры исключаемые категории.

    Ответить
  105. кулинарка:

    Здравствуйте, у меня почему-то не выходят картинки в похожих записях. Что я делаю не так, подскажите, пожалуйста?

    Ответить
    • Виталий Кириллов:

      Здравствуйте! Возможно Вы не включили поддержку миниатюр.

      Ответить
      • кулинарка:

        Включила поддержку миниатюр, все сделала, как у вас написано, а админке появилось «задать миниатюру». Теперь все картинки надо устанавливать через эту функцию, иначе не получится вывод похожих записей с миниатюрами? Посмотрите, что получается в конце любой статьи. Я оставила все, как получилось.

        Ответить
        • Виталий Кириллов:

          Просто надо «задать миниатюру» для каждой статьи.

          Ответить
  106. кулинарка:

    Огромное спасибо, все получилось, работаю над заданием миниатюр. Успехов и всяческих удач!

    Ответить
  107. Влад:

    Здравствуйте! Очень понравилась серия статей про вывод похожих записей (с миниатюрой и без, в сайдбаре и в конце статьи). Но есть один вопрос, можно ведь не дублировать ссылку на статью в миниатюре и названии статьи, а сделать такой код:

    <a onclick="return !window.open(this.href)" href="»>

    Все выводится аналогично как и с двумя «<a onclickАми". Как по мне, то с одной ссылкой будет лучше, чем с двумя… Как думаете?

    И еще вопрос, обязательно ли вставлять тег rel="bookmark" ? И для чего он конкретно нужен и что дает, т.к. точной информации найти не смог, кроме как указания на постоянную ссылку.

    Ответить
  108. Влад:

    Извиняюсь, вот код:

    <a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?><?php the_title(); ?></a>

    Ответить
    • Виталий Кириллов:

      Здравствуйте Влад!
      1. Текстовая ссылки и ссылка с изображения не одно и тоже. Именно из этого принципа я исходил, применяя двухссылочную структуру.
      2. bookmark переводится, как «Закладка». Думаю особой ценности в глазах поискового робота она не представляет, также как и rel=’tag’.

      Ответить
      • Влад:

        А еще такой вопрос, не нужно ли в конце цикла ставить функция rest_query? Видел, что многие ее ставят если использовался вызов query в коде…

        Ответить
  109. Эльдар:

    Отличный пост! Респект автору и низкий поклон!

    Ответить
  110. Москвич:

    Автор, спасибо.
    Когда то я пытался вставить что-то подобное на свой сайт, но картинки миниатюр почему то не появлялись. После того я удалил код и забыл про «похожие записи».
    Ваш код заработал сразу.
    Предложенный Вами код style.css я конечно сократил и подправил под свой дизайн, но это детали.
    К сожалению посещаемость моего сайта невелика, примерно 250 посетителей в сутки, хотя ему уже 2 года.
    Под каждой статьей у меня в шаблоне уже были 2 ссылки на предыдущий и следующий пост, без картинок. Вместо них у меня теперь 3 и с картинками. Количество просмотров увеличилось в 1,5-2 раза. Любит народ картинки…

    Ответить
  111. Евгений:

    Здравствуйте, Виталий. Спасибо за код. У меня пара вопросов
    1. Вижу Вы в примере сначала получаете id категории $category_ids = array, а потом используете для сортировки ‘tag__in’ => $tag_ids метки. Если просто скопировать код, то не работает как надо. Сам не сразу заметил. Хотя вижу в комментариях уже спросили и Вы пример привели сортировки по меткам, но всё же неплохо это в статье отразить.
    3. Если я хочу сортировку и по категориям и по меткам, то надо добавлять и ‘tag__in’ => $tag_ids
    <?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(
    и этот фрагмент??
    <?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(
    3. Как быть с адаптивным дизайном? У меня горизонтальный блок из 4х миниатюр на смартфоне уже «вылазит» из тела поста. Может надо в стилях для миниатюр что-то прописать?

    Ответить
    • Виталий Кириллов:

      Здравствуйте Евгений! Все примеры сортировки есть в статье похожие записи без плагина.
      Что касается адаптивного дизайна. Настройки стилей для мобильников прописываются отдельно, исходя из размеров экрана. Если Вы в этом не разбираетесь, то мне трудно будет объяснить Вам всю технологию в рамках комментария.

      Ответить
  112. Jecka:

    Теги не работают, выдаёт всё под ряд

    Ответить
    • Виталий Кириллов:

      Посмотрите, что я писал тут.

      Ответить
  113. Татьяна:

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

    Ответить
    • Виталий Кириллов:

      Здравствуйте Татьяна! Надо смотреть стили, с ходу сказать не могу.

      Ответить
  114. олег:

    Здравствуйте. Поставил и всё настроил.
    Но валидатор показывает ошибки кода.
    Дублированный ID cell.Ведь у нас же два id на странице.

    Плюс ему не нравиться элемент -span

    >↩ Тоже показывает ошибку. Что можно с этим сделать. Может ID cell заменить на class.

    Ответить
    • Виталий Кириллов:

      Здравствуйте! Олег я не подгонял код под валидатор, Можно id поменять на class, а span поменять на div, если это устроит валидатор.

      Ответить
      • олег:

        А зря Виталий. Правильный код очень — важный аспект.Попробую сделать.

        Ответить
  115. олег:

    id поменял на class — это сработало. Эти ошибки исчезли. Работаю со span

    Ответить
  116. Саня:

    Добрый вечер! Подскажите, может ли быть проблема от данных записей? Пример, ищу в гугле гороховый суп со своего сайта, нахожу страницу, но страница оказывается не горохового супа, а например зелёного борща. А гороховый суп оказался почему то вписанный в описание к борщу. Захожу на сохранённую копию и вижу в похожих записях гороховый суп. Почему думаю что берётся оттуда, потому что в описании рядом может идти ещё например суп из сосисок, и и он находится там же в похожих записях сразу за борщём. Но проблема не на всех страницах, в основной массе описание берётся правильное. 100% есть, что проблема не в данном блоке? Просто не знаю куда уже копать((( Заранее спасибо.

    Ответить
    • Виталий Кириллов:

      Здравствуйте! Блок тут не причем, скорее надо «обижаться» на поисковые системы, вернее на их роботов, которые и формируют выдачу.

      Ответить
  117. Алексей:

    Класс!!! Поставил себе!!!! Советую исправить общую ширину блока на 100% тогда будет адаптивнее.

    /*
    #interesting_articles ul {
    margin-left: 5px; /* Внешний отступ от левого края страницы */
    width: 100%; /* Общая ширина блока без учета отступов от краев страницы */
    }
    */

    Ответить
    • Виталий Кириллов:

      Поменяйте id на class

      Ответить
      • Алексей:

        Спасибо, поменял, всё валидно и солидно! Спасибо за прекрасный пост и оперативные ответы! 🙂

        Ответить
      • Саня:

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

        Ответить
        • Виталий Кириллов:

          Я не знаю, это Вы у Алексея спросите.

          Ответить
  118. Денис:

    Скачал и установил тему Fancier, в ней есть миниатюры,но есть беда с расположением теста относительно миниатюры: в исходном формате есть ограничение на текст в 410px и из-за этого нет текста под миниатюрой, если убрать это ограничение то текст начинается не с начала страницы, а под миниатюрой.
    помогите победить =)

    Ответить
    • Виталий Кириллов:

      Победить можно все, но все зависит от возможностей.

      Ответить
  119. Елена:

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

    Ответить
  120. Алексец:

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

    Ответить
    • Виталий Кириллов:

      Здравствуйте! Я уже отвечал на подобный вопрос здесь.

      Ответить
      • Алексец:

        Да это оно, спасибо Вам большое!

        Ответить
  121. Константин:

    Спасибо! Замечательное решение! Внедрил на свой сайт. Получилось не хуже. чем в продвинутых плагинах типа Юзо-релейтед пост….
    Но в вашем решении есть одна проблема — при клике по картинке похожей записи эта запись открывается в том же окне. А при клике на название записи — в новом окне. Мне кажется разумнее чтобы в обоих случаях ссылки открывались одинако. Мне надо чтобы обе в том же окне Что надо подредактировать для этого в коде?

    Ответить
    • Виталий Кириллов:

      Константин, ответ на Ваш вопрос есть в статье.

      Ответить
      • Константин:

        Извините. но я пока что то не догоняю….

        this.href заменить на this.href.self

        Или как то по другому?

        Ответить
        • Виталий Кириллов:

          Надо убрать полностью вот этот отрезок кода:

          onclick="return !window.open(this.href)"
          
          Ответить
        • Виталий Кириллов:
          <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(
           'tag__in' => $tag_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 href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a><br>
          <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></div></li>
          <?php
          }
          echo '</ul>';
          }
          wp_reset_query();
          }
          ?>
          </div>
          
          Ответить
          • Константин:

            Гениально! Все сработало! Ссылки открываются в том же окне.
            (И шо я такой тупой…. Сам не мог это сделать…. ☺

            Ответить
  122. Sara:

    Огромное спасибо!
    Давно искала способ сделать легче свой блог, и вот нашла 🙂
    Кстати, под мой шаблон все сразу стало, без корректировок цифр 🙂

    Ответить
  123. Игорь Черноморец:

    Здравствуй Виталий. Сделал всё по твоей инструкции. Вообщем получилось неплохо, но..почему-то все миниатюры вывелись под наклоном. Вот смотри — joxi.ru/n2YRJEOfj4nE8A
    Как такое может быть?

    Ответить
    • Виталий Кириллов:

      Здравствуйте Игорь! У вас в файле style.css в строчке №174 есть такой код:

      ul li, ol li {
          margin: 0;
          padding: 0 0 4px;
      }

      Смешение происходит из-за внутреннего отступа padding. Исправьте 4px на 0 и все встанет на свои места.

      Ответить
      • Игорь Черноморец:

        Огромное спасибо Виталий за подсказку. Это помогло и миниатюры выравнялись! У меня есть ещё один маленький вопрос…
        Как увеличить количество слов текстовых заголовков? Сейчас выводится не более 6-и слов, а мне нужно хотя-бы 10-15. Мои заголовки все длинные.

        Ответить
        • Виталий Кириллов:

          Надо просто увеличить высоту ячеек (li) в стилях.

          Ответить
          • Игорь Черноморец:

            Спасибо Виталий! Всё получилось!

            Ответить
          • Игорь Черноморец:

            Здравствуй Виталий снова ))
            У меня появился ещё один вопрос.
            Оказывается вывод миниатюр с похожими записями, не адаптированы под мобильные устройства. То есть, все миниатюры вылазят за пределы экрана смартфона. А это как исправить?

            Ответить
            • Игорь Черноморец:

              Этот код просто добавить в стили, или заменить им другой уже существующий?

              Ответить
              • Виталий Кириллов:

                Просто добавить.

                Ответить
              • Виталий Кириллов:

                Прошу прощенья, идентификаторы перепутал, только сейчас заметил, правильно так:

                @media screen and (max-width:760px){
                #interesting_articles{
                width:auto;
                display:block;
                position:relative;
                }
                #interesting_articles ul {
                width:auto;
                }
                #interesting_articles li {
                float:left;
                }
                }
                Ответить
                • Игорь Черноморец:

                  Огромное спасибо! Всё получилось!

                  Ответить
  124. Владислав:

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

    Ответить
    • Виталий Кириллов:

      Здравствуйте Владислав! Думаю Вы просто вставили код за пределы цикла WordPress.

      Ответить
      • Владислав:

        Код работает, но как он связан с наличием комментариев? Я отправил вам по почте свой файл single.php с вашим кодом. На мой взгляд все правильно стоит.

        Ответить
        • Владислав:

          Вопрос закрыт. Все заработало. Действительно не туда вставил !!! Большое спс за код и за ваш ответ. УДАЧИ В ДЕЛАХ !!!

          Ответить
  125. Миша:

    Здравствуйте, есть такая проблемка. Шаблон выводит теги не много по другому, и что бы их вывести он использует такой код:
    jsfiddle.net/gro3qkLs/1/
    Как мне можно вывести похожие записи по тегам в single.php?

    Ответить
    • Виталий Кириллов:

      Здравствуйте! А что мой код не работает?

      Ответить
      • Миша:

        Нет, там немного другие теги, то есть не стандартные WordPress

        Ответить
        • Виталий Кириллов:

          Ну хорошо выводятся они не стандартно, но а метки то вы задаете стандартным способом в админке?

          Ответить
          • Миша:

            Хах, тоже нет,они не числятся как теги в закладке «Записи». А отдельно, там стоит шаблон QAEngine.

            Ответить
            • Виталий Кириллов:

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

              Ответить
  126. Евгений:

    Виталий, код немного некорректен.
    В строке ‘orderby’=>rand именно rand надо взять в кавычки, т.е. ‘orderby’=>’rand’
    А параметр caller_get_posts с версии 3.1 не используется и лучше использовать ‘ignore_sticky_posts’=>1
    Тогда вордпресс не пишет ошибок в debug.log

    Ответить
    • Виталий Кириллов:

      Спасибо Евгений! Код поправил. Кавычки, конечно, просто забыл поставить, а вот с параметром caller_get_posts я маху дал, видимо воспользовался устаревшей информацией.

      Ответить
  127. Сергей Шинкарев:

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

    То есть, плагин для использования какого-то функционала без плагина. Звучит странновато, но цены бы ему не было. Я бы даже купил бы, наверное.

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

    Ответить
  128. Алексей:

    Здравствуйте Виталий! Сделал все по Вашей статье, все получилось хорошо. Но валидатор показывает ошибки, указывает на дубли идентификатора ячейки (Duplicate ID cell). Подскажите, можно как — то исправить?

    Ответить
    • Виталий Кириллов:

      Поменяйте id на class.

      Ответить
      • Алексей:

        Если меняю id на class картинки выстраиваются одна под другой, в ряду одна картинка, шесть рядов.

        Ответить
        • Алексей:

          Разобрался, все работает. Спасибо.

          Ответить
  129. Сергей:

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

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

    Я хотел закрыть блок тегом noindex, но он работает, как я понимаю, только для Яндекса.

    Можете ли Вы подсказать, нужно ли закрывать блок с похожими записями от индексации и как это корректно сделать?

    Заранее спасибо за ответ.

    Ответить
  130. Ирина Ортнер:

    Изображение миниатюр в похожих темах так и выводятся через раз. До оптимизации такого не происходило. Изображения находятся в папках. Загружаю через админку.
    На странице редактирования миниатюра стоит. После нажатия на миниатюру и прохода в библиотеку изображение выводится, через время снова пропадает.
    В чем может быть проблема?

    Ответить
    • Виталий Кириллов:

      Где пропадают, именно в библиотеке?

      Ответить
      • Ирина Ортнер:

        В библиотеке они есть и на странице редактирования тоже. Они не выводятся на страницы в похожие записи.
        uploadme.ru/image/Ery
        Уже и плагин перезагрузила, хотя вроде Вы там что-то меняли. Но все равно вместо половины картинок зияют дыры.

        Ответить
  131. Елена:

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

    Ответить
    • Виталий Кириллов:

      Здравствуйте Елена! Чтобы миниатюра не отображалась в статье, надо убрать вывод миниатюр в файле single.php/ Вот тут и тут почитайте.

      Ответить
  132. amylee__29:

    добрый день! после вставки в файл css перестают работать ссылки в похожих записях: как на миниатюре, так и на заголовке. И текст вообще никак не выделяется (будто что-то перекрывает его). в чем может быть проблема?

    Ответить
    • Виталий Кириллов:

      Здравствуйте! Скорее всего дело в шаблоне.

      Ответить
  133. GpewHuk:

    Доброго времени суток, попробовал ваш код, все отлично работает, остается только каждому под свой блог подогнать стили и все !
    У меня такой вопрос, как формировать код для выведения похожих постов, так, чтобы брало не заданную миниатюру, а картинку из произвольного поля img и название из произвольного поля name! Помогите если будет свободное время, так как я в этом слабоват(

    Ответить
  134. Анастасия:

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

    Ответить

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

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS