Здравствуйте! Сегодня на SEO-Mayak.com мы продолжим тему внутренней перелинковки и на очереди у нас вывод похожих записей с миниатюрами без плагина.
Уже по традиции, я перечислю плагины, которые чаще всего используются для вывода похожих записей с миниатюрами: Related Posts, Related Posts Thumbnails, Contextual Related Posts и др.
Но как я уже неоднократно писал, лучше обойтись без плагинов, если есть такая возможность.
Хочу сразу предупредить, если у вас на блоге уже 200 — 300 постов, то наверное будет разумно использовать один из плагинов, который создает миниатюры автоматически. Что я имею в виду, объясню немного позже.
Если Вы загружаете картинки на сайт, то у Вас автоматически создаются миниатюры и создаются они для всех загруженных изображений. Нам же нужна только 1 картинка с определенного поста. В своей статье «Как загружать картинки на сайт» я уже рассказывал, как отключить создание лишних изображений на WordPress, советую почитать.
Так вот, можно смело отключать автоматическое создание миниатюр, так как все равно придется их создавать вручную для каждой статьи. Почему так? Ранние версии WordPress, до обновления 2.9, вообще не поддерживали миниатюры, да и в свежих версиях эта функция по умолчанию не активна и ее надо включать.
Как включить функцию поддержки миниатюр на WordPress
C помощью текстового редактора Notepad++ открываем для редактирования файл functions.php, который находится в папке с темой и в самый конец, перед закрывающим знаком «?>»добавляем следующую функцию
add_theme_support('post-thumbnails');
Теперь, если зайти в админку и открыть любую запись, то в правой колонке появится новый блок с заголовком «Миниатюра записи»:
Если после вставки функции в админке ничего не изменилось, то попробуйте в файл functions.php вставить другой код:
if ( function_exists('add_theme_support') )
add_theme_support('post-thumbnails');
Один из двух кодов обязательно должен сработать.
Нажимаем на строчку-ссылку «Задать миниатюру» и нас перебросит в библиотеку файлов (изображений). В выпадающем меню выбираем пункт «Загруженные для этой записи»:
Можно выделить любое изображение, на Ваше усмотрение и в нижнем правом углу нажать кнопку:
После чего в блоке «Миниатюра записи» появится миниатюра выбранного Вами изображения:
В любой момент Вы можете удалить текущую миниатюру и задать другую.
Как задать нужный размер для миниатюры
Придется немного отклонится от основной темы. Известно, что изображения сильно влияют на скорость загрузки страницы. Чтобы минимизировать нагрузку на сервер, картинки изначально должны иметь размер соответствующий их реальному отображению на странице. О чем это я?
В процессе загрузки любой страницы, сервер обрабатывает изображения закрепленные за той или иной записью. Не редко исходный размер картинки отличается от заданного и серверу приходится, так сказать, «на лету» заниматься сжатием, на что и уходит драгоценное время. Так вот, та же самая ситуация и с миниатюрами.
Чтобы правильно рассчитать размер миниатюры для блока похожих записей, необходимо знать ширину страницы. Ширина страницы указывается в файле style.css, но многие новички сравнивают CSS с темным и дремучем лесом, поэтому я предложу другой вариант — инструмент линейка.
Я даже представил, что сейчас могли подумать некоторые веб-мастера 🙂 Нет, линейку к монитору прикладывать не придется. Существует специальное расширение, с помощью которого можно измерить все что угодно и называется оно — MeasureIt.
Расширение MeasureIt для Mozilla Firefox — скачать
Расширение MeasureIt для Opera — скачать
Для примера я измерю ширину страницы своего кулинарного блога. Выглядеть это будет так:
Как видно, длина от края до края «рабочей зоны» страницы составляет 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 );
Это своего рода регистратор новых размеров для миниатюр и после внедрения кода, миниатюры в админке будут выглядеть так:
Обращаю Ваше внимание! При загрузке новых изображений, WordPress будет создавать миниатюры по новым заданным размерам, причем для всех изображений. Но не стоит накапливать ненужные картинки на сервере, надо оставить миниатюры только для выбранной картинки, а остальные удалить с помощью FTP клиента или через файловый менеджер панели управления хостинга. Все изображения хранятся в папке uploads, которая находиться в каталоге wp-content.
Давайте рассмотрим вариант удаления лишних изображений с сервера с помощью FTP клиента Filezilla.
Чтобы понять, что удалять, просто ищите изображения с заданными для миниатюр размерами. По названиям картинок Вы без труда определитесь:
Выделив строчку левой кнопкой мыши, правой кнопкой вызываете меню, где нажимаете «Удалить»:
И совершенно ненужная миниатюра навсегда удаляется с сервера.
Отлично! Пора выводить похожие записи с миниатюрами на страницы блога.
Выводим похожие записи с миниатюрами на 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, чтобы потом не писать в службу поддержки своего хостинга, а иметь возможность поправить все самостоятельно.
Напомню, что серия статей, посвященных внутренней перелинковке началась с хлебных крошек и на этой статье тема еще не заканчивается. Впереди Вас ждет самая важная глава — это ручная перелинковка, которая имеет огромное значение, в том числе и для поведенческого фактора, так что обязательно подпишитесь на обновления блога.
Статью о том, как вывести популярные записи с миниатюрами в сайдбаре без плагина, вы можете почитать тут. Еще у меня вышла статья про вывод миниатюр на главной странице.
До встречи!
С уважением, Виталий Кириллов
Ну вот я и дождалась. )) Спасибо, иду пробовать.
Елена, наверняка будут сложности, особенно с подгонкой стилей, так как шаблоны у всех разные.
Спасибо Виталий, Вы так подробно делитесь с информацией, что понятно даже такому новичку как я.
Пожалуйста Игорь, надеюсь у вас все получится!
Очень подробно все объяснили, здорово). Спасибо. Теперь каждый может выбрать самый подходящий для него вариант.
Очень подробные инструкции. Кажется, всё понятно. Будем пробовать.
Я как-то парился-парился с этим вопросом, и ни один способ мне не понравился, не то всё. В итоге остановился на плагинах nRelate, советую!
Для многих, плагин это разумное решение, но я стараюсь обхохиться без них.
и кстати статистику кликов показывает!
У меня все получилось! Работают мои миниатюрки, супер. Спасибо большое, без Вас бы не справилась. У меня только один вопросик, я не поняла, как Вы посчитали ширину и высоту блока, те цифры, которые прописаны в стилях?
Елена, высота блока зависит от длины заголовка. Меняйте значение на меньшее или большее:
[php]height: 225px; /* Высота ячейки */[/php]
Ширина ячейки также подгоняется и если одна ячейка не входит, то можно уменьшить отступы
[php]
margin: 5px; /* Расстояние между ячейками */
padding: 2px; /* Отступы от миниатюры до края ячейки */
[/php]
Меняя значения, подгоняйте ширину одной ячейки:
[php]width: 157px; /* ширина одной ячейки */[/php]
И общую ширину блока:
[php]width: 577px; /* Общая ширина блока без учета отступов от краев страницы */[/php]
Играйте с цифрами!
Спасибо, буду пробовать и экпериментировать.
Елена, если будет необходимо, можно изменить размер заданных миниатюр в файле functions.php на меньшие или большие.
Долго искал что-то подобное. Спасибо за пост. Все получилось. Единственный, по моему, недостаток — это то, что каждая ссылка при нажатии открывается в новой вкладке. Я удалил кусочек кода, чтобы открывался в том же окне. Считается, что не хорошо принуждать посетителя читать каждую новую страницу в новой вкладке. Вы так не считаете?
Здравствуйте Nurtan! Существуют разные мнения на этот счет, например, в Яндекс поиске все ссылки открываются в новом окне и нечего, никто не жалуется.
Зависит от стиля и предпочтений автора)
Я из расчёта удобства для читателя сделал так:
— ссылки из тела статьи (внутренняя перелинковка с другими статьями по типа «…, о чём я уже рассказывал здесь [ссылка]») открываются в новой вкладке, потому что читатель предыдущую статью ещё не дочитал.
— категории, метки и записи с миниатюрами после статьи открываются в этой же вкладке — статья прочитана, не придётся искать заново.
Также есть мнение, что открытие ссылок в новом окне считается за улучшение поведенческих факторов (поскольку больше времени вкладки открыты в браузере), но это только гипотеза. Лично я за максимальное удобство для читателя — это и человеку приятно, и поведенческие факторы улучшить с гарантией.
P.S. Лично я имею привычку открывать почти все ссылки в новом окне правой кнопкой мыши:)
Надо обязательно попробовать, а то от плагинов уже спасения нет.
Здравствуйте Olga, рад видеть вас на блоге! Конечно надо пробовать, тем более сложного ничего нет.
Написано много и подробно, но мне проще обходиться плагином, чтобы не «нахимичить» с html!
А я бы пожаловался, если бы знал куда 😉 Меня открывание в новых вкладках бесит
Здравствуйте Роман! Советую в церковь сходить! Там можно пожаловаться и беса попросить изгнать 🙂
Не все поняла. Но я делаю миниатюру вручную Все картинки 150 пикселов. М в ручную уже заливаю в статью. А фотографии редактором заливаю прямо на хостинг. Их у меня нет в библиотеке файлов. Там сейчас только фон, шапка и картинки миниатюр.
Наталья, подскажите пожалуйста, как Вы заливаете фотографии на хостинг? какой провайде дает такую возможность?
Спасибо
Виталий, вы даете много полезного на блоге, наверное пора уже задуматься о собственном платном курсе))))
Наталья, я думаю пока рано.
Неожиданное предложение от «уважаемого» админа. Вы сами то пробовали? Я в это не верю! А чтоб страницы открывались в новом окне актуально для внешних ссылок с вашего сайта, для внутренних же достаточно переход в том же окне или вкладке. Я бы на вашем месте, Виталий не грубил, а доточил бы код, как сделал Nurlan. Тем более, что Вам указали на НЕДОСТАТОК. Ну чтож, доточим сами. Напильником 😉 Удачи Вам!
А я и не грубил Роман, просто вы нервничаете. Ну что же, уже по многочисленным просьбам, сделаю небольшое дополнение к статье и кому очень хочется, тот сможет самостоятельно код «подточить»!
Спасибо, с цифрами поигралась, все получилось. Может Вы еще в какой-то статье расскажете как выводить в сайтбаре блок с популярными или интересными записями с миниатюрами?
А и еще интересно, как Вы поставили блок с ТОП-комментаторами, буду рада, если поделитесь.
Елена я рад, что у Вас все получилось! Обязательно про все расскажу, но постепенно.
спасибо огромное, если будет время обязательно сделаю, очень нужная информация
Пожалуйста Лана, пользуйтесь на здоровье!
Интересная статья! Никогда так не измеряла картинки нужно попробовать!
Скажите, а есть ли способ выводить миниатюры, если их изначально не задавал при публикации поста?
Можно задать миниатюры и после публикации статьи, причем даже не обновляя сам пост. Если у Вас уже много статей и лень задавать миниатюры вручную, то можно воспользоваться плагинами, благо таких предостаточно!
Добрый день, подскажите, а как можно исключить категории из цикла??
Чтобы исключить некоторые категории, задайте следующее условие сортировки:
[php]‘category__not_in’=>x,xx,xx,[/php]
где x,xx,xx, — id категорий через запятую.
Спасибо, сейчас попробую
Интересная возможность, надо попробовать.
Заметил странность, когда в исключении одна категория, то все работает, как только ввожу через запятую еще один id, то 1я исключенная категория не отображается, а на 2ю уже исключение не работает (запятая после id стоит)
Статья полезная, максимально просто и понятно все рассказано! Все получилось с первого раза. Большое спасибо автору! Осталось только теперь для каждой статьи миниатюру задать. Я кстати пользуюсь линейкой из бесплатной программы FsCapture. Мне очень нравится.
Спасибо Надежда! Я рад, что у Вас все получилось!
Роман, если Вас это бесит-то это не значит, что кого-то другого бесит. И вообще если Вы зашли на этот сайт, значит Вы интересуетесь сайтостроением, значит Вы создали или создаёте свой блог. И тогда Вы должны понимать для чего это делается. А грубить не стоит и считать недостатком то, что считается всеми правильным это глупо.
Виталий! Здравствуйте.
Не поняла Где задавать размеры картинок. А то они у меня вылазят из рамочек, также подписи к ним или вообще пропадают , или тоже вылазят из рамочек!
Заранее спасибо!
Ольга, Вы не сможете задать для каждого изображения свой отдельный размер, можно только выбрать один размер для всех и задается он в функции, которая прописывается в файле functions.php (читайте статью внимательно).
Не понял на счет подписей. Возможно Вы имели в виду заголовки статей, то тогда Вы должны установить размеры ячейки в файле style.css, чтобы самый длинный заголовок полностью умещался.
Виталий, а почему Вы предпочитаете не пользоваться плагинами?
Татьяна, плагины создают большую нагрузку на сервер, что сказывается на скорости открытия страниц, а скорость сайта напрямую влияет на его продвижение.
Кроме того, чистый код даёт несравненно более широкий возможности для настройки работоспособности и внешнего вида, чем плагины. Особенно это касается внешнего вида — css. Кто один раз попробует сделать кодом — к плагинам уже возвращаться не будет:)
Здравствуйте, Виталий!
Спасибо Вам огромное за отличную статью.Все сделала и довольна результатом. Лишний раз убеждаюсь, чем меньше плагинов, тем лучше.
НО… все же осталось несколько вопросов,а именно…
1. Если задать размер миниатюр, а потом его изменить, нужно будет опять заново в каждой статье выбирать миниатюру? мне показалось, что именно так…
2. Не совсем поняла по поводу удаления картинок…В папке uploads не нашла картинок с заданным для миниатюр размером…
3. Вопрос немного не совсем по теме(может, сможете подсказать)… У себя на блоге я использую плагин Auto Hihslide, служащий для увеличение изображения при клике. Когда стала проверять картинки миниатюр, то обнаружила, что остальные картинки сохраняются в двух размерах (во вставленном в статью, и в реальном, приближенном). Не знаете ли Вы, надо ли и можно ли удалять какой-то из вариантов этих картинок?
(прилагаю скриншот примера: joxi.ru/WGUKUtg5CbBbEKqZkpE )
Заранее благодарна за ответы.
С уважением.
Здравствуйте Екатерина!
1. Миниатюра задается один раз, изменить размер миниатюр можно в любой момент с помощью функции.
2. После установки функции для всех последующих, загруженных на сайт, изображений будут создаваться миниатюры с заданными в функции размерами. Я удаляю их где-то 1 раз в три месяца и трачу на это 3-5 минут.
3. В WordPress по-умолчанию создается 3 разных размера изображений, почитайте мою статью Как загружать картинки на сайт. Оптимизация изображений.
Если останутся вопросы, пишите.
Здравствуйте, Виталий!
Благодарю за быстрый, развернутый ответ.
Я посмотрела статью, которую Вы порекомендовали. Зашла в свои настройки, у меня там средний размер картинки был выставлен 300*300, поставила все по нулям. Теперь, как я поняла, у меня будет только 2 картинки (малого и большого размера).
Получается, что я могу удалить с хостинга все картинки в размере которых присутствует 300, и это не причинит вреда ранее написанным постам?
Екатерина, если Вы их не использовали, то и вреда не будет.
Здравствуйте, Виталий! У меня возникла проблема. Настройки не меняла, но почему-то миниатюры к постам стали вставляться обрезанными.
Что посоветуете сделать?
С уважением.
Екатерина. вы имеете в виду, что они не одинаковые или края обрезаются?
Покажу наглядно:
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]
Наводите порядок в картинках и все будет нормально.
Ранее установленный плагин деактивирован и удален. Статьи в которых обрезаются миниатюры написаны уже после произведенных настроек без плагина.
Екатерина, мне бы не хотелось с Вами спорить. Я специально посмотрел Ваш каталог 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.
Спасибо! Очень помогло. Оставил три бэклинка.
Спасибо за код. А как сделать так, чтобы помимо миниатюры и названия записи еще выводилась и выдержка к статье?
Владимир, чтобы вывести цитату с поста, в код надо вставить функцию:
[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 — это количество символов.
Виталий, а можно задать количество символов в заголовке под миниатюрой? Как это сделать?
Спасибо, все получилось, очень понравилось на одном проекте)
Я раз за Вас, Марк!
Мы сейчас на нашем блоге ведем большую работу по избавлению от плагинов. Так что эта статья как раз то, что надо. Спасибо!
Спасибо! Всё получилось!
Пожалуйста Анастасия!
Спасибо, даже с первого раза заработало. Вот только текст над миниатюрами на русском не отображается 🙁
Здравствуйте, тоже провожу чистку плагинов, пытаюсь поставить ваш код вроде разобрался во всём, осталось только в CSS подправить размеры окошек и задать миниатюры, с этим разберусь, ещё один нюанс можно ли сделать так чтобы вся эта прелесть отображалась только внутри поста, а с главной убрать или скрыть каким нибудь CSS кодом? просто у меня код не срабатывает в single.php но зато видит в loop.php, просто шаблон не стандартный…Спасибо!
Артур мне сложно Вам дать правильную инструкцию, не видя проблему.
Всё спасибо уже не нужно, разобрался:)
Здравствуйте Виталий! у вас замечательный сайт, нашла на нем много полезного! вопрос такой — миниатюры у меня (так же как и у вас) выводятся на главной странице, то есть в файле index.php. там они достаточно большие. Под статьёй мне бы хотелось миниатюры поменьше. как это можно сделать?
Анна я не понял, Вы хотите вывести одну миниатюру или блок миниатюр?
я так же как у вас хотела вывести блок с 3 миниатюрами. но я уже разобралась, миниатюры немного обрезались, но и так понятно, спасибо!
Подскажите каким способом т.е. код вывода random тэга название, просто не кликабельного, что бы вставить можно было в хеадере сайта как текстовое слово.
Здравствуйте, Виталий, подскажите, пожалуйста, как можно реализовать вывод миниатюр записей на странице по меткам и категориям (т.е. на каждой странице выводятся миниатюры с определенными метками и категориями), как на сайте http: //www.allcarz.ru/catalog/acura/
Здравствуйте Дмитрий!
Способ вывода миниатюр по меткам и тегам я подробно описал в этой статье. По-моему это как раз то, что Вам нужно! Или я Вас не правильно понял?
На сайте, который Вы привели в качестве примера, реализован вывод по категориям.
спасибо за код. Возник вопрос: что следует добавить, что бы при отсутствии миниатюры выводилась специально для этого предназначенная картинка?
Надо добавить следующий код
<?php if( has_post_thumbnail() ) { the_post_thumbnail(); } else { echo '<img src="'.get_bloginfo("template_url").'/default.gif" />'; } ?>Где default.gif — специально приготовленная картинка.
Здравствуйте! Подскажите, как сделать точно также, как и у Вас на сайте?!
Я всё по пунктам выполнил и у меня получилось, что миниатюры отображаются вертикально, а заголовок поста выходит за границы изображения, это не так красиво выглядит!
У Вас же смотреться куда лучше, миниатюра под ней текст, который переноситься, не выезжая за границы изображения, вот именно так я и хотел бы видеть мои анонсы записей!
Что, где нужно изменить? Или поделитесь именно Вашим кодом, который стоит на этом сайте!
Заранее Благодарен!
С Уважением, Сергей!
Здравствуйте Сергей!
Я на своем блоге использую точно такой же код! Если похожие записи у меня отображаются лучше, то это целиком зависит от стилей.
1. Общий заголовок «Интересное на блоге» можно вынести за пределы функции.
2. Надо регулировать размеры ячеек, чтобы они нормально размешались на странице:
3. Надо регулировать размеры миниатюр, это можно сделать двумя способами: изначально задать нужные размеры в файле functions.php или задать размеры непосредственно в коде.
Вместо:
<?php the_post_thumbnail('thumbnail'); ?>Вставьте следующее:
Где 120,100 — размеры миниатюр.
4. Если текст вылазит за рамки, настройте внутренние отступы, например:
#cell a{ padding: 5px; }Удачи!
Хорошо, сейчас попробую, ну а то что миниатюры отображаются вертикально, а у вас горизонтально это можно, как-то регулировать?
Спасибо!
В две строки я имею ввиду! в два столбца по 4!
Сергей, Я вас не понял. Что Вы хотите от миниатюр?
чтобы было как и у вас, по четыре в две строки(столбца) под картинками заголовок поста!
Так у меня ширина страницы больше раза в два, чем на вашем блоге!
Уменьшаете размеры ячеек, уменьшайте миниатюры, чтобы в один ряд влезло 4 ячейки. Чтобы было два столбца, задайте в коде вывод 8 шт:
Снимаю вопрос! всё урегулировал!
Спасибо за помощь!!!!
Здравствуйте Виталий! Мне очень нравится Ваш блог, здесь я нашел много полезного.
У меня вопрос, можно ли чтобы картинки брались не с миниатюр а с помощью произвольных полей? Просто у меня так изначально настроено, чтобы задать картинку для раздела «Похожие статьи» мне надо добавлять его с помощью произвольного поля с именем «image»
Раздела «Похожие статьи» выводится у меня с помощью плагина, хотелось бы выводить его без плагина.
Здравствуйте Азамат! У меня нет готового решения, но вскоре я собираюсь посвятить произвольным полям серию статей, где постараюсь ответить на Ваш вопрос.
Спасибо за ответ, буду с нетерпением ждать!
Все получилось, код выводит так как нужно, единственное с чем не получается справиться — это изменить размеры миниатюр, они выводятся стандартные 150х150 и обрезаются, изменила размер в медиафайлах, убрала там галочку «обрезать»- ничего не меняется, в чем может быть проблема?
Олеся, проблема в том, что миниатюры уже созданы и изменить их размер в настройках уже не получится. Правильным решением в данной ситуации было бы, перезалить на сервер все первые изображения с постов, чтобы миниатюры создались правильного размера. Работа большая и нудная.
Но есть и дугой выход. Он не идеальный, с точки зрения нагрузки на сервер, но избавляет от перезаливки. Найдите такой участок кода:
<?php the_post_thumbnail('thumbnail'); ?>и замените его на этот:
Где 140,100 размеры миниатюры. Просто укажите свои размеры.
Но повторяю, лучше не полениться и перезалить картинки.
Виталий, сегодня обратила внимание, что при изменении размеров миниатюр в админке-параметры-миниатюры, при изменении ширины-ничего не меняется, а при изменении высоты-миниатюры меняются, но остаются квадратными в соответствии с указанным размером высоты, т.е. если высоту ставлю 100, то миниатюра становится 100х100, если высоту ставлю 120, то миниатюра становится 120х120 при этом неважно какая стоит при этом ширина… как же мне сделать что бы миниатюры были не квадратными, а прямоугольными в соотв. с заданными мной размерами?
Олеся, Вы опробовали предложенный мной способ?
Немного модернизировал добавив в конце после слов «Интересное из категории» саму категорию
Но у меня вроде все выводится как у вас на блоге, вот только вместо надписи «Интересное из категории» выводится непонятные сиволы ���������� �� ���������. Что то с кодировкой((
Сергей, так поменяйте кодировку файла!
Проблему уже решил))) НО все равно спасибо за ответ!!!
Виталий, если вы имеете в виду изменить код, то в файле темы functions.php у меня такого кода нет изначально, а миниатюры есть (в админке, когда пишу пост есть функция заливки миниатюр) может быть это из-за того, что у меня стоит шаблон в котом есть раздел «настройка миниатюр» и там можно задавать размеры миниатюр…
Олеся, я имел в виду изменить код, который вы скопировали с моего блога и вставили в файл single.php.
Правильно настройки такие есть, но они должны задаваться перед тем как Вы вставили в редактор изображение, тогда миниатюры создадутся, по заданным Вами, размерам, а если миниатюра создана, то пропорции ее уже изменить нельзя.
и я решила что лучше будет перезалить так как записей у меня пока что не так много, для этого лучше будет сделать картинку нужного размера для миниатуры и заново ее залить а старые удалить?
Нет Олеся не правильно. Надо сделать так. Заходите в админку, идете Параметры -> Медиафайлы, устанавливаете желаемые пропорции для миниатюр. Затем открываете запись, нажимаете кнопку «Добавить медиафайл». Далее ишете среди изображений, загруженных для данной записи, первое изображение с поста, удаляете его на всегда. После этого загружаете тоже изображение заново. Делайте все в строгой последовательности и если что не понятно, лучше спросите.
Виталий, здравствуйте! У меня вот другая проблема. Хотела сделать вывод статей под текстом (из этой же рубрики), но у меня под статьей автоматически выводится по 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.
Ой, не сочтите за труд… Пожалуйста, посмотрите… Закачала его на Яндекс.Диск. Вот ссылка yadi.sk/d/FU-Bh-usKzeoN
Даже не знаю, у кого еще можно проконсультироваться, а по Вашему сайту видно, что Вы — отличный специалист. Пожаааалуйста…
Светлана, удалите следующую строчку:
<?php wp_link_pages(array('before' => '<p><strong>Страницы:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>Если я Вас правильно понял…
Уже применил, спасибо. Правда пришлось код править под себя и со стилями поиграться, но это не составило огромного труда. Еще раз спасибо за код…
Пожалуйста Евгений, рад видеть Вас На блоге!
Виталий, добрый день!
Спасибо большое за замечательное решение, только у вас нашел то, что мне нужно.
Один вопрос, как сделать так, чтобы при нажатии на ссылку в похожих записях, она открывалась в том же окне, а не в новом?
Николай, придется еще раз процитировать кусочек статьи:
Вот этот отрезок кода отвечает за открывание статей в новой вкладке:
Читайте внимательней!
Действительно, спасибо! Но я все равно не понял, как сделать так, чтобы все в одном окне открывалось. Мне эту часть кода просто удалить?
Именно так!
Добрый день Виталий. Спасибо за статью, всё сделал правильно, всё отображается, но есть одна проблемка, в мозилле правильное отображение (горизонтально 3 записи), а в explorer записи отображаются вертикально, как это исправить?
Здравствуйте Виктор!
У меня в explorer блок с миниатюрами отображается корректно.
Здравствуйте, Виталий.
Как сделать не рандомный вывод похожих записей а в последовательности по возрастанию. Например: первая статья ссылается на 0,1,2,3 записи, вторая на 1,2,3,4 записи, третья на 2,3,4,5…и т.д. А точнее, новая статья на сайте ссылается на 4 предыдущие и т.д. То есть каждая статья получает 4 ссылки с других написанных статей. Надеюсь, Вы поняли мой вопрос.
Михаил, в данном коде такие настройки задать нельзя.
А что в этом коде надо дописать, чтобы допустим вывести статьи из определенных категорий или исключить в показе определенные 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 категорий через запятую:
Если надо наоборот исключить определенные категории, то поставите знак минуса перед цифрами:
Здравствуй, подскажи как вместо миниатюры выводить первую картинку, по такому принципу работает плагин, от которого я хочу избавится. Миниатюры я не добавлял…
Здравствуйте Андрей! Плагин, от которого вы хотите избавиться, как я полагаю берет первую картинку и делает из нее миниатюру. Вы пишите, что не добавляли миниатюры, я честно не понял. Посмотрите в админке (Настроки -> Медиафайлы), заданы ли размеры для миниатюр? А также проверьте, активирована ли у Вас поддержки миниатюр, о чем я писал в статье.
Здравствуйте! Есть проблема в том, что один из боксов похожих записей ведет на эту же самую стр, на которой я нахожусь. Можно ли как нибудь исключить страницу, на которой я нахожусь из показа в блоке похожих на этой стр?
Спасибо! С многих статей брал код, ломало сайт (белый экран и все). А ваш работает =)
Здравствуйте, Виталий! Огромное спасибо за Ваш бесценный труд и помощь начинающим вебмастерам!!!
У меня есть блог, посвященный двум направлениям: фотография и путешествия. На главной отражаются статьи в хронологическом порядке с миниатюрами. Недостаток состоит в том, что если я пишу отчет о путешествии (он занимает, например, 20 записей), то посетитель, зашедший на главную, но интересующийся фотоделом — уйдет.
1) Я бы хотел на главной отобразить сетку 3*3 миниатюры с названием постов. Только вот выбирать, какие записи будут отобржаться в них мне нужно не автоматически, а вручную. Так я могу вручную продвигать именно те статьи, которые я хотел бы показать потенциальным посетителям.
2) В конце каждой статьи я вручную подбираю набор ссылок на статьи, связанные с данным постом. Это не обязательно из той же рубрики или с теми же ключевыми словами. И количество «похожих» статей каждый раз разное. Это выглядит так:
«Кроме этой статьи о путешествии в Китай вы можете прочитать:
— Как составить план маршрута (ссылка)
— Как фотографировать китайские фонарики (сылка)
— Какую обувь выбрать для походов по горам (ссылка)
И т.п.
Можно ли при написании статьи с помощью HTML вызывать еще миниатюры к ним?
Здравствуйте Сергей! Я думаю что можно. Я все больше убеждаюсь в том, что в сайтостроении вообще нет ничего невозможного.
Виталий, спасибо конечно, за ответ. Но я надеялся, что Вы подскажете как… 😉 Я более подробно почитал Ваши статьи и пришел к выводу, что частично ответ на то, как сделать сетку 3*3 есть в посте «Вывод самых популярных записей в сайдбаре».
Но так и не понял, как вручную вставить туда конкретную миниатюру и ссылку на запись. А не рассчитывать по формуле,как у Вас.
И вопрос 2 — глухо… 🙂
Сергей, заранее подготовьте миниатюры, затем создаете таблицу. А вот как у все будут располагаться запись и миниатюры: рядам или друг над другои мне пока не понятно. Ну ладно для примера возьму одну ячейку
По второму вопросу, тут как душе угодно. Хотите на те же рубрики ссылки делайте, хотите на друге. Само главное чтобы ссылки были кликабельными, т.е по ним осуществлялись перехода, что хорошо для ПФ.
Виталий, теперь все понятно. Спасибище! А вот такой вопрос: у нас получается в блоге на одной странице сразу несколько ссылок на одну и ту же статью: 1) Самая комментируемая — ссылка «заголовок» статьи 2) Кликабельная картинка-миниатюра на эту же статью. 3) Может так оказаться, что в моей сетке 3*3 с рекомендованными статьями окажется этот же пост с еще 2 ссылкам: миниатюра и заголовок.
Поисковики как определяют, что это- не ссылочный СПАМ?
Я думаю за спам это не сочтут.
Здравствуйте, Виталий! Попробовал сделать так, как вы объяснили. Большое спасибо за помощь! Осталась одна проблемка: в Google Chrome и Mozilla миниатюры отражаются нормально. А в Opera и Explorer — все сбивается.
В тот код, что вы указали, я добавил , чтобы текст отражался под миниатюрой». Может быть вы посмотрите и дадите совет, как устранить баг с Оперой и Эксплорером? Адрес сайта: Photo-and-travels.ru
Спасибо заранее!
Здравствуйте Сергей! Все дело в том, что страница шире, чем блок с миниатюрами. Поэтому в стилях надо указать фиксированную ширину блока.
В строчке:
width: 100%; /* Длина блока соответствует ширине страницы */
Вместо %, надо указать ширину в пикселях (px), например:
width: 600px;
Мне не нравится не то, что картинки расползаются по ширине экрана, а то, что подписи к ним в Мозиле и Хроме располагаются аккуратно снизу картинки, а в Эксплорере и Опере — сбоку и по-корявому.
И установка фиксированной ширины не помогла установить порядок с отображением надписей (сейчас обратно сделал Width 100%).
Сергей, вы говорите сделали все, как я объяснял, а сами в коде использовали не списки, а элементы таблицы.
Теперь надо прописывать стили для ячейки таблицы и задавать ей ширину.
Виталий, большое спасибо за помощь! Помучался и всё заработало! Желаю Вам удачи!!!
а как можно вывести по горизонтали?
Селайте ширину блока меньше, а высоту больше.
Я все сделала по вашей статье, а у меня в одном ряду только 3 блока отображаются, и они не ссылки просто картинки. Почему и что делать?
Мария, если пока сложно, вернитесь к данным работам позже, когда немного наберетесь знаний. В комментариях я не могу Вам назвать причину, так как не знаю ее, надо разбираться.
Покопалась в стилях, теперь в одном ряду 4 записи. Но они по прежнему не ссылки!
Кстати, проблема появляется при добавлении файла стилей. То есть до файла стилей это ссылки а после — нет…
Здравствуйте Виталий! Вроде всё получилось, только одна проблема, вместо заголовка «Интересное на блоге» у меня вопросительные занаки в чёрных ромбиках,я понял что это с кодировкой что то нитак. Подскажите как исправить???
Здравствуйте Дмитрий! В редакторе Notepad++, во вкладке «Кодировки», установите «UTF8 без ОМ».
Спасибо Виталий! Помогло, я до этого пробовал эту кодировку включать, не чего не менялось, а надо было не тупо менять кодировку, а преобразовать в «UTF8 без ОМ»
Виталий, ещё подскажите пожалуйста, занимаюсь оформлением странички 404, хочу на пример последние 8 статей с миниатюрами туда воткнуть, но что то тоже пока не выходит, пробовал ваш код вставлять, там вообще какая то петрушка получается,сайт бар по среди страницы выходит, с поиском и формой подписки. И кромсать код пробовал, не получается желаемый результат((
Данный код вывода миниатюр работает только внутри цикла WordPress.
Но обходной путь есть же???? Нашел как сделать вывод последних пяти записей блога: Но они выводятся скучно, просто 5 строчек с названиями постов. С миниатюрами было бы на много веселее!
Вывод последних пяти записей блога: <?php get_archives ('postbypost', 5); ?>
Дмитрий, будет свободное время, я обязательно найду способ, как вывести миниатюры на статических страницах и отвечу на ваш комментарий.
Хорошо Виталий! Жду с нетерпением!
Здравствуйте Виталий! Сделал все по Вашей статье, блок с ячейками выводится нормально. Но при добавлении миниатюры у меня она добавляется и в статью. В статье получается две одинаковых картинки, но разных размеров. В чем проблема?
Я так не могу сказать, покажите Ваш файл single.php, я посмотрю.
А как увеличить расстояние между миниатюрой и текстом, что идет ниже ее, например мне нужно добавить 10 пикселей? А то у меня текст слишком прилипает к миниатюре, мучаюсь второй день не знаю куда прилипить, может подскажите на примере моего сайта?
Алексей, попробуйте к идентификатору:
#cell a
Добавить такой селектор:
margin-bottom: 30px;
Должно получиться.
Спасибо, наконец-то получилось, пришлось еще высоту увеличить, чтобы третья строка входила
Виталий,вы не нашли как можно тоже самое на стр 404 вывести с миниатюрами?
Не подскажите с аватарками, пытался найти у вас пост про них и не нашел. Смотрю симпатично у вас получилось выводить аватарки в комментариях. Я ставил плагин simple-local-avatars и у меня ничего не получилось, аватарки я так и не увидел
Спасибо Виталий — всё прекрасно получилось — вывести похожие записи без плагина с миниатюрами.
Добрый вечер Виталий! Всё работает, всё отлично, но со стилями беда, подскажите, каким образом блок сместить влево, чтобы они были по вертикали на одной линии с блоками выше. С чем уже не игрался, ничего не получается, максимум они смещаются с правой стороны (но тогда миниатюры вообще без отступов), а с левой никак((( Посмотрите пожалуйста. Заранее спасибо.
Всё, спасибо, сам справился, оказывается можно добавить минус, и всё едет в другую сторону))) У меня появился ещё один вопрос, можно каким то образом добавить похожие или случайные или популярные записи в боковой сайдбар в виджет? Естественно без плагина Спасибо.
Здравствуйте! Вот и славно, что Вы сами справились. По поводу второго вопроса, вот статья, почитайте.
Давно ищу такую информацию, вот только на Вашем блоге увидел более подходящий и более подробный мануал. Только у меня одна проблемка, код совсем не такой, как в обычных или в других php файлах. Поэтому не могу найти то, нужное место где должен распологаться код. Виталий, Вы не могли бы посмотреть в какое место нужно устанавливать ваш код. Если согласны я пришлю на Вашу почту файл single.php, может быть Вы поймете, что к чему. Надеюсь с Вашим опытом, это сделать будет не трудно. Жду Вашего решения.
Присылайте Геннадий, я посмотрю.
Виталий, я отослал файл на Вашу почту. Жду, что получиться. Если что, можете отметить нужное место или придумайте сами, как будет лучше.
Геннадий, теперь меня интересует функция art_get_content(), которая скорее всего находится в файле functions.php. Пришлите мне его тоже.
Геннадий, для Вашего шаблона надо писать специальную функцию, которая также должна внедрится в файл functions.php. Структура Вашего шаблона довольно сложная и плохо будет поддаваться оптимизации, надо быть профессионалом в php.
Виталий, спасибо за усердие! Придется пока довольствоваться плагином, хотя из-за него сильный перегруз на блоге.
Добрый день! Большое спасибо за статью. Попробовала сделать у себя на блоге, но столкнулась с двумя проблемами:
1. При добавлении миниатюр к постам они начинают выводиться на главной, в рубриках и т.д. Т.е. в списке статей в каждом блоке получается 2 картинки — маленькая миниатюра и большая картинка, которая вставлена в тело статьи. Можно как-то убрать миниатюры, чтобы они не выводились в списке статей?
2. У меня на блоге не только рубрики, но и подрубрики. Если я делаю вывод похожих записей по рубрикам, то «похожесть» очень плохая. Можно ли сделать вывод похожих статей по подрубрикам?
Помогите пожалуйста! Буду очень признательна!
Здравствуйте Юлия!
1. Я не знаю особенности вашего шаблона, но по всей видимости у Вас тег more проставлен после первой картинки в статье, а в файлах отвечающих за вывод главной страницы, рубрик и т.п, прописана функция вывода миниатюр в анонс статьи. Более подробно о этой функции я писал тут.
2. Не уверен, что такое можно сделать в рамках функции get_the_category, к которой и оперирует данный код.
Вывод картинки через CSS код в комментариях, как сделать???
Виталий,как вы и описывали — до сих пор не задумывался о проблеме. Собственно на сегодня ее и нет, но, почитав ваши статьи, понял что следует заняться заранее. Решил поудалять плагины и заменить их кодом, который вы рекомендовали. Сразу наткнулся на такой момент: при попытке удалить плагин nrelate Related Content, — в админке появился вопрос «вы хотите удалить плагин и все файлы связанные с ним?»… и приводится длинный перечень ссылок ( на картинки, меню, тексты и пр). То есть, при удалении плагина появится сотня битых ссылок? Или я не верно понимаю? Прошу подсказать правильную последовательность действий.
Скорее всего плагин создает новые файлы (картинка тексты и пр). Поэтому и появляется данное сообщение. Удаляйте плагин, но все внимательно проверьте на предмет остаточных файлов.
Виталий,извините за занудство, но весьма не хочется один раз отрезав — сто раз исправлять вручную. Тем более что я слабоват в этом.
Что означает плагин создает файлы?! Я думал что он лишь дает ссылки на СУЩЕСТВУЮЩИЕ файлы.
И верно ли я понял вас, что после удаления плагина и соответственно его ссылок на файлы, типа:
• /nrelate-related-content/screenshot-9.png
• /nrelate-related-content/related_settings/related-plugin-status.php
• /nrelate-related-content/language/readme.txt
внешний вид сайта не «поведет»? И как проверить «остаточные файлы»?
Заранее благодарен за помощь.
Боже мой Витас, удалите Вы плагин со всем корнями и проверьте, все ли работает. Набирайтесь знаний!
Виталий, я задала вопрос по поводу вывода после текста статьи — блока Рекомендаций — с Картинками — как и что сделать — по шагово — если есть ссылка — буду признательна — Миниатюры не появляются — в чем причина?
Я не знаю, как Вас называть, но у меня нет такой ссылки.
Имя мое Вам ничего не скажет, а вот от Вас я жду ответа, — как можно сделать, чтобы вместо белых квадратиков в Блоке Рекомендаций, выводился текст и минифотка? Вот и все. Спасибо.
Так и не смогла поставить блоками.Что только не делала,все равно ставится по одной картинке в вертикальную линию.Спасибо,конечно.Но,хотела еще на Главной сделать и на категориях,а теперь думаю,что все равно не получится.
Виталий Здравствуйте! У меня получилось вывести статьи с миниатюрами,но дело в том. что когда я добавляю к записи миниатюру, то она выводится не только в похожих записях в открытой статье, а также выводится в закрытых статьях на индексной страничке. Вот я сделал скрин посмотрите, может есть решение этой проблемы s019.radikal.ru/i605/1412/d6/c84cb586904c.jpg
Миниатюра должна выводится только в открытой статье, а она как видите еще и в закрытой выводится.
Подскажите что делать. за ранее спасибо.
Здравствуйте Василий! Значит Ваш шаблон так устроен. Надо взглянуть на Ваш файл index.php
ну ладно тогда пусть будет так как есть, просто я в коде не очень. а сейчас не готов платить деньги. просто пока нет! Спасибо за ответ!
Установил, все классно, все работает. WordPress 3.9.2 не работает с Yet Another Related Posts Plugin 4.2.4 и 4.2
Поэтому решил воспользоваться этим методом.
К стати, Виталий, очень хороший блог. Если что то нужно сделать, сначала ищу в Вас, если не нахожу, то тогда ищу в другом месте.
Добрый день, подскажите, а можно что-то сделать, чтобы не выводились alt и title?
Наверное можно, вопрос зачем…?
Тайтл убрал. Проблема в том, что я разместил ваш блок и в следующий ап сайт потерял 2/3 трафика, написав Платону, мне ответили что у меня переспам, выводятся поисковые запросы списками или блоками. Единственное что было нового на сайте и что соответствовало этим значениям, ваш блок(((. Убрал и через 3 недели всё вернулось назад. Совпадение?! Вряд-ли… Но у людей же стоят такие похожие записи, точнее похожие на ваши и вот тайтл почти ни у кого не выводится.
Советую Вам внедрить микроразметку, чтобы title или alt изображения, робот не считал за ключевое слово.
хочу отказаться от плагина. Все сделал как Вы писали, но после вставки соответствующего кода и стилей у меня, по непонятным мне причинам, не выводятся миниатюры (вместо нее при наведении курсора меняется задний фон). При этом название соответствующих записей размещается не под самой миниатюрой, а внутри ее самой. Подскажите пожалуйста где, что изменить, чтобы добиться желаемого результата.
Павел, возможно у Вас не созданы миниатюры?
Виталий, спасибо большое за ответ, все получилось и корректно работают похожие записи. Сайт классный, додал его себе в закладки своего браузера.
Я не очень силен в кодах, только начинаю осваивать вордпресс, оформлять сайт. Виталий, подскажите пожалуйста, как можно изменить местоположение миниатюры, которое я задал для похожих записей, в статьи. И еще, подскажите, можно как нибудь ее подписать. Чтобы под самой миниатюрой, в статьи, было ее название. Можно сделать так, чтобы при клике на нее в статьи она плавно ивелищивалась в размере, как медиальный.
Виталий, извините за такой простой вопрос. Скажите, куда нужно вставить код (в какое место), который отвечает за миниатюру заглушку, то есть при отсутствии миниатюры выводилась специально-подготовленная картинка.
Павел, вот код который проверит наличие миниатюры и если такой нет, выведет подготовленную заглушку:
<?php
//должно находится внутри цикла
if( has_post_thumbnail() ) {
the_post_thumbnail();
} else {
echo '<img src="'путь до картинки" />';
}
?>
Здравствуйте,аналогичный вопрос,только вместо картинки мне надо указать что div не будет отображаться если не задана миниматюра
<a href="» title=»Read «>
<img src="» alt=»» >
Здравствуйте Константин! Можно сделать изображение пустышку и прописать условие, при котором в случаи отсутствия миниатюры будет отображаться заготовленная «болванка». Само условие я не готов привести, но вы мне подкинули мысль для новой статьи. А может после проведения некоторых экспериментов я приведу обновленную функцию прямо в ответе на Ваш комментарий. Так что подпишитесь на комменты.
Подскажите, пожалуйста, а как выводить похожие записи не во всех категориях (без использования плагинов)?
Вот у меня есть категории «статьи 1», «статьи 2», «специалисты».
Как сделать так, чтобы «похожие записи» выводились во всех категориях «статьи…» и НЕ выводились в категории «специалисты»?
Спасибо!
Вам надо сделать отдельный шаблон для категории «Специалисты».
Виталий, если я правильно понял, чтобы картинки в миниатюре выводились в конце записи, во вставленном блоке, нужно создать на эту запись миниатюру, если она не была создана так? т.е. отредактировать запись, иначе картинки в блоке не появятся, да?
Все верно!
Тогда может поможете с таким вопросом: когда я миниатюру создаю, она у меня в записи появляется в верхнем левом углу, а так как я еще не особо силен в пхп, то не знаю где находится функция, которая выводит эту миниатюру в это место, может вы поможете разобраться?
Евгений, миниатюра должна появиться не в самой записи на на боковой панели в блоке «Миниатюра записи».
Виталий, я ж не говорю, что инструкция не работает, у меня с выводом миниатюр какой-то трабл. Миниатюра выводится в запись, в самый верхний левый угол статьи, рядом с основным изображением…поэтому и поросил помощи, если нет, так нет…
Евгений, просто мне бы хотелось, чтобы прежде, что задавать очередной вопрос, Вы попытались сами найти на него ответ. Тем более на моем блоге много статей посвященных миниатюрам. Вот одна из них, которая касательно отвечает на Ваш вопрос — «Функция the_post_thumbnail() — миниатюра записи в анонсе WordPress».
Здравствуй, Виталий Кириллов я вот всё делаю как написано у тебя в статье, но нечего у меня не появляется миниатюры в конце статьи. В чём может быть проблема? Помоги разобраться
Здравствуйте Владимир!
У вас миниатюры в админке появились, на боковой панели справа?
Я твои коды вставил к себе на сайт, а как у тебя 2 ряда по 4 статьи не получилась сделать, у меня просто 4 статьи получилась сделать и то по моему кривые.
Надо познавать css? есть бесплатные видео курсы. Язык самый простой из всех языков программирования. В рамках комментария я не могу вас этому научить.
Виталий, спасибо большое за нужную мне информацию! Получилось почти все, кроме как выставить ячейки посередине блока. Я использую 1 блок и 2 ячейки. Подскажите, пожалуйста, как вывести их посередине блока? Спасибо!
Ирина, а где посмотреть, что у Вас получилось?
Я пока проверяю все на денвере, а потом уже переношу на блог. Не против, если я вышлю Вам singl.php?
Здравствуйте, хотелсь бы узнать, а как зделать чтоб в записи миниатюры остались большие ну там как и есть 250 на 200 например, а тут в похожих новостях уменьшить.
Использую плагин похожих записей, и они у меня есть к каждому посту, а вот как к ним привязать миниатюры. Каждому посту на автомате при создании поста прицепляю миниатюру. Но вот что бы они появлялись в похожих ?
Да, на главной в последних записях миниатюры присутствуют
Роман, я не занимаюсь скрещиванием плагинов с функциями.
Здравствуйте, Виталий, спасибо за статью, собираюсь использовать код,
но почему-то у меня
‘tag__in’ => $tag_ids, — не работает
‘category__in’ => $category_ids, — работает
в чем может быть причина?
P.S. В Вашем коде для редактирования файла single.php, в 21 строчке «» по- моему лишний
Игорь, а Вы теги используете? Спасибо, что увидели лишний тег, уже исправил.
Да, использую. кроме Вашего кода пробовал другие — там работает.
когда в Вашем коде ‘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, // Сортировка производится по тегамТогда должна быть чистая сортировка по тегам.
Все работает! Огромное спасибо 🙂
Уважаемый Виктор! Солнечный привет вам из Ташкента!
Спасибо вам большое за подробную статью и очень полезные советы.
Я начал использовать ваш код, но возникли косяк, который я не могу устранить: Отображается значок списка, а ячейки не стоят ровно, а «идут ступеньками» вниз. Посмотрите, пожалуйста любую страницу моего сайта и вы поймёте о чём речь.
Ещё я хотел сделать эффект круглых превью, как у меня на главной, поиграл с вашим кодом, однако не смог добиться желаемого. При установке высоких значений округления границы ячейки — появляется серый круг без миниатюры.
Помогите, если не трудно.
С уважением и благодарностью,
Дониёр
Спасибо, я уже устранил косяк — вашем коде идёт пара <li></li>, я их убрал и всё починилось. С круглыми превью тоже сам разобрался — можете посмотреть на получившийся результат. Мне лично очень нравится. Спасибо вам за статью и коды.
Здравствуйте,у меня при вставке кода ,почему то сайдбар ,который справа,уходит вниз влево.И страница как бы делится надвое(Почему так получается,не подскажете?
Возможно у Вас другая ширина сайдбара.
Здравствуйте! Огромное спасибо за статью, очень помогла. Есть 2 вопроса:
1. Как чтоб вместо рандома (‘orderby’=>rand, // в случайном порядке) статьи показывались по новизне? Категории или теги не имеют значения.
2. У меня почему-то миниатюры появляются под шапкой блога. Это из-за кода в index.php?
Здравствуйте Инга.
1. По новизне надо так: order=>ASC, надеюсь разберетесь.
2. Я не могу знать коды всех шаблонов, почитайте еще одну статью об использовании миниатюр, возможно вы найдете ответ на свой вопрос.
1)order=>ASC не помог, буду что-то думать
2) возможно из-за того, что к блогу подключена другая тема, отличительная от основной сайта
Инга, ASC надо было взять в кавычки:
все равно не помогает, пробовала варианты:
order=>’ASC’
‘order’=>’ASC’
‘orderby’=>’ASC’
они меняются, но как-то хаотично. Возможно дело в категориях. Разберусь, просто я в php — нуб)))
2.) Уже разобралась, в css этому атрибуту поставила display:none
Добрый вечер Виталий! Все сделала как у вас написано. статьи проявились, но очень странно. Появились статьи не относящиеся к категории, которую указала. и Второе. Никак не появляются миниатюры. Поясню. У меня в настройках медиафайлов стоят нули на все изображения. И добавлена функция вытаскивания миниатюры из первой картинки поста.
Вот вопрос. Как можно подгружать картинку для миниатюры с другого сайта ( например Картинки Яндекс), чтобы не нагружать сайт и хостинг. Картинок у меня будет очень много.
Очень надеюсь на ответ. Спасибо! Марина.
Виталий, сделал как вы написали все вывелось, но как ссылка не работает. Как можно исправить, где я допустил ошибку?
Хорошее решение, но если блог смотреть например с телефона, но будут не очень красиво смотреться эти миниатюры. Лучше сделать вывод миниатюр как на этом сайте seopulsar.ru тогда для любого разрешения экрана, естественно и с любого устройства, все красиво будет выводиться. Хотел спросить, а как вывести такие же похожие записи как и на том сайте, что я написал выше? Есть готовые решения?
Дмитрий, для телефонов нужна мобильная версия сайта, со всеми вытекающими изменениями.
Здравствуйте, Виталий!
Подскажите, а как можно ограничить длину надписи (количество знаков или слов) под миниатюрой, а то у меня есть статьи с длинными заголовками, которые диссонируют с другими
Андрей установите определенную высоту ячейки и используйте свойство:
Которое скроет текст, вышедший за границы ячейки.
Почему-то не работает… Это свойство уже прописано в Вашем коде.
Андрей, вы хоть покажите что у Вас получается…
Всё получилось. Ответ был в следующем комментарии. Просто некоторые миниатюры, сформированные плагином отличались по пропорциям от остальных и именно там оказывался длинный заголовок. Подогнал картинки по пропорциям, подобрал оптимальный размер ячеек и всё пришло в порядок.
Спасибо Вам за информацию.
Здравствуйте, Виталий.
У меня проблема в выводе изображения миниатюр, похожая на Олесину. То есть файлы, скажем, размером 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 в том, что он не сжимает загружаемых фотографий до нужных размеров, а вписывает в квадрат лишь часть фотографии большего размера, чем указано в его настройках. Спасибо, Виталий, Ваш совет помог. Надеюсь, кому-то поможет и мое детальное объяснение.
Виталий добрый день. Спасибо за статью. Все получилось , но есть проблема часть записей без миниатюры и записи показываются без миниатюр. Как исключить такие записи из отображений в таблице. С плагином таких проблем нет.
Для исключения нескольких категорий их нужно объединить в массив.
Код для исключения категорий будет выглядеть таким образом
‘category__not_in’=> array( 3,7,8 ), где цифры исключаемые категории.
Здравствуйте, у меня почему-то не выходят картинки в похожих записях. Что я делаю не так, подскажите, пожалуйста?
Здравствуйте! Возможно Вы не включили поддержку миниатюр.
Включила поддержку миниатюр, все сделала, как у вас написано, а админке появилось «задать миниатюру». Теперь все картинки надо устанавливать через эту функцию, иначе не получится вывод похожих записей с миниатюрами? Посмотрите, что получается в конце любой статьи. Я оставила все, как получилось.
Просто надо «задать миниатюру» для каждой статьи.
Огромное спасибо, все получилось, работаю над заданием миниатюр. Успехов и всяческих удач!
Здравствуйте! Очень понравилась серия статей про вывод похожих записей (с миниатюрой и без, в сайдбаре и в конце статьи). Но есть один вопрос, можно ведь не дублировать ссылку на статью в миниатюре и названии статьи, а сделать такой код:
<a onclick="return !window.open(this.href)" href="»>
Все выводится аналогично как и с двумя «<a onclickАми". Как по мне, то с одной ссылкой будет лучше, чем с двумя… Как думаете?
И еще вопрос, обязательно ли вставлять тег rel="bookmark" ? И для чего он конкретно нужен и что дает, т.к. точной информации найти не смог, кроме как указания на постоянную ссылку.
Извиняюсь, вот код:
<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 в коде…
Отличный пост! Респект автору и низкий поклон!
Автор, спасибо.
Когда то я пытался вставить что-то подобное на свой сайт, но картинки миниатюр почему то не появлялись. После того я удалил код и забыл про «похожие записи».
Ваш код заработал сразу.
Предложенный Вами код style.css я конечно сократил и подправил под свой дизайн, но это детали.
К сожалению посещаемость моего сайта невелика, примерно 250 посетителей в сутки, хотя ему уже 2 года.
Под каждой статьей у меня в шаблоне уже были 2 ссылки на предыдущий и следующий пост, без картинок. Вместо них у меня теперь 3 и с картинками. Количество просмотров увеличилось в 1,5-2 раза. Любит народ картинки…
Здравствуйте, Виталий. Спасибо за код. У меня пара вопросов
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х миниатюр на смартфоне уже «вылазит» из тела поста. Может надо в стилях для миниатюр что-то прописать?
Здравствуйте Евгений! Все примеры сортировки есть в статье похожие записи без плагина.
Что касается адаптивного дизайна. Настройки стилей для мобильников прописываются отдельно, исходя из размеров экрана. Если Вы в этом не разбираетесь, то мне трудно будет объяснить Вам всю технологию в рамках комментария.
Теги не работают, выдаёт всё под ряд
Посмотрите, что я писал тут.
Здравствуйте, Виталий!
Пытаюсь внедрить вывод похожих записей по Вашей методике, но первая ячейка почему-то оказывается выше на несколько пикселей… Из-за чего это может быть, не подскажете?
Здравствуйте Татьяна! Надо смотреть стили, с ходу сказать не могу.
Здравствуйте. Поставил и всё настроил.
Но валидатор показывает ошибки кода.
Дублированный ID cell.Ведь у нас же два id на странице.
Плюс ему не нравиться элемент -span
>↩ Тоже показывает ошибку. Что можно с этим сделать. Может ID cell заменить на class.
Здравствуйте! Олег я не подгонял код под валидатор, Можно id поменять на class, а span поменять на div, если это устроит валидатор.
А зря Виталий. Правильный код очень — важный аспект.Попробую сделать.
id поменял на class — это сработало. Эти ошибки исчезли. Работаю со span
Добрый вечер! Подскажите, может ли быть проблема от данных записей? Пример, ищу в гугле гороховый суп со своего сайта, нахожу страницу, но страница оказывается не горохового супа, а например зелёного борща. А гороховый суп оказался почему то вписанный в описание к борщу. Захожу на сохранённую копию и вижу в похожих записях гороховый суп. Почему думаю что берётся оттуда, потому что в описании рядом может идти ещё например суп из сосисок, и и он находится там же в похожих записях сразу за борщём. Но проблема не на всех страницах, в основной массе описание берётся правильное. 100% есть, что проблема не в данном блоке? Просто не знаю куда уже копать((( Заранее спасибо.
Здравствуйте! Блок тут не причем, скорее надо «обижаться» на поисковые системы, вернее на их роботов, которые и формируют выдачу.
Класс!!! Поставил себе!!!! Советую исправить общую ширину блока на 100% тогда будет адаптивнее.
/*
#interesting_articles ul {
margin-left: 5px; /* Внешний отступ от левого края страницы */
width: 100%; /* Общая ширина блока без учета отступов от краев страницы */
}
*/
Поменяйте id на class
Спасибо, поменял, всё валидно и солидно! Спасибо за прекрасный пост и оперативные ответы! 🙂
Виталий, подскажите пожалуйста, а это у Алексея сейчас стоят ваши похожие записи? Если да, каким образом сделать так как у него, чтобы тизеры не сдвигались в колонку при уменьшении браузера? А то в телефоне они становятся в колонку и пока народ их прокрутит, ещё ниже мало кто дойдёт, да и смотрится не очень…Хочется, чтоб они вот так горизонтально в линии оставались и просто уменьшались. Заранее спасибо.
Я не знаю, это Вы у Алексея спросите.
Скачал и установил тему Fancier, в ней есть миниатюры,но есть беда с расположением теста относительно миниатюры: в исходном формате есть ограничение на текст в 410px и из-за этого нет текста под миниатюрой, если убрать это ограничение то текст начинается не с начала страницы, а под миниатюрой.
помогите победить =)
Победить можно все, но все зависит от возможностей.
Спасибо за статью. Воспользовалась кодом, большое спасибо! Все получилось как у вас на сайте! Огромная благодарность!!!
Добрый день! Очень красиво и грамотно все оформленно. Я с таким вопросом (ранжирование по меткам), заметил на своем блоге, что все блоки записей заполнены, даже если у статей нет соответствующих, меток.Можно как то сделать, что б выводились, только те записи в которых совпадают метки, и так же чтобы с первой по последнюю похожие записи были в зависимости от количество совпадающих меток, а не в разброс? Заранее спасибо!
Здравствуйте! Я уже отвечал на подобный вопрос здесь.
Да это оно, спасибо Вам большое!
Спасибо! Замечательное решение! Внедрил на свой сайт. Получилось не хуже. чем в продвинутых плагинах типа Юзо-релейтед пост….
Но в вашем решении есть одна проблема — при клике по картинке похожей записи эта запись открывается в том же окне. А при клике на название записи — в новом окне. Мне кажется разумнее чтобы в обоих случаях ссылки открывались одинако. Мне надо чтобы обе в том же окне Что надо подредактировать для этого в коде?
Константин, ответ на Ваш вопрос есть в статье.
Извините. но я пока что то не догоняю….
this.href заменить на this.href.self
Или как то по другому?
Надо убрать полностью вот этот отрезок кода:
<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>Гениально! Все сработало! Ссылки открываются в том же окне.
(И шо я такой тупой…. Сам не мог это сделать…. ☺
Огромное спасибо!
Давно искала способ сделать легче свой блог, и вот нашла 🙂
Кстати, под мой шаблон все сразу стало, без корректировок цифр 🙂
Здравствуй Виталий. Сделал всё по твоей инструкции. Вообщем получилось неплохо, но..почему-то все миниатюры вывелись под наклоном. Вот смотри — 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; } }Огромное спасибо! Всё получилось!
Добрый день. Такая проблема обнаружилась. Все вроде хорошо, нарядно и красиво, но вот какой момент интересный. Ссылки работают только на тех страницах, где есть оставленные комментарии. Если у записи еще нет комментариев, то все отображается корректно, но вот перейти щелкнув по картинке похожего поста нельзя и цвет не меняется тоже. Там где есть комментарии, все работает корректно. Как победить этот косяк пока не понимаю. Может какой-то конфликт с чем-то?
Здравствуйте Владислав! Думаю Вы просто вставили код за пределы цикла WordPress.
Код работает, но как он связан с наличием комментариев? Я отправил вам по почте свой файл single.php с вашим кодом. На мой взгляд все правильно стоит.
Вопрос закрыт. Все заработало. Действительно не туда вставил !!! Большое спс за код и за ваш ответ. УДАЧИ В ДЕЛАХ !!!
Здравствуйте, есть такая проблемка. Шаблон выводит теги не много по другому, и что бы их вывести он использует такой код:
jsfiddle.net/gro3qkLs/1/Как мне можно вывести похожие записи по тегам в single.php?
Здравствуйте! А что мой код не работает?
Нет, там немного другие теги, то есть не стандартные WordPress
Ну хорошо выводятся они не стандартно, но а метки то вы задаете стандартным способом в админке?
Хах, тоже нет,они не числятся как теги в закладке «Записи». А отдельно, там стоит шаблон QAEngine.
Шаблоны все разные и видимо мой код Вам не подходит. Ищите другие решения.
Виталий, код немного некорректен.
В строке ‘orderby’=>rand именно rand надо взять в кавычки, т.е. ‘orderby’=>’rand’
А параметр caller_get_posts с версии 3.1 не используется и лучше использовать ‘ignore_sticky_posts’=>1
Тогда вордпресс не пишет ошибок в debug.log
Спасибо Евгений! Код поправил. Кавычки, конечно, просто забыл поставить, а вот с параметром caller_get_posts я маху дал, видимо воспользовался устаревшей информацией.
Виталий, сделайте плагин, который после каждого обновления можно было бы активировать, запускать один раз, чтобы он прописывал все эти изменения в коде, а потом отключать, до следующего обновления.
То есть, плагин для использования какого-то функционала без плагина. Звучит странновато, но цены бы ему не было. Я бы даже купил бы, наверное.
Ручные варианты самые лучшие, но когда куча изменений в шаблоне, каждое обновление — катастрофа. Поэтому, постепенно приходится пересаживаться на плагины.
Здравствуйте Виталий! Сделал все по Вашей статье, все получилось хорошо. Но валидатор показывает ошибки, указывает на дубли идентификатора ячейки (Duplicate ID cell). Подскажите, можно как — то исправить?
Поменяйте id на class.
Если меняю id на class картинки выстраиваются одна под другой, в ряду одна картинка, шесть рядов.
Разобрался, все работает. Спасибо.
Виталий, я разместил у себя на сайте подобный блок с миниатюрами изображений.
Проблема в том, что такой блок индексируется поисковиками, в результате чего картинка в поисковой выдаче не соответствует той, что реально присутствует в статье. То есть поисковик индексирует картинку, индексирует статью, где внизу есть блок похожих записей, и в выдаче может подставить к миниатюре «случайную» статью, поскольку именно на этой странице присутствовала миниатюра в момент индексации.
Я хотел закрыть блок тегом noindex, но он работает, как я понимаю, только для Яндекса.
Можете ли Вы подсказать, нужно ли закрывать блок с похожими записями от индексации и как это корректно сделать?
Заранее спасибо за ответ.
Изображение миниатюр в похожих темах так и выводятся через раз. До оптимизации такого не происходило. Изображения находятся в папках. Загружаю через админку.
На странице редактирования миниатюра стоит. После нажатия на миниатюру и прохода в библиотеку изображение выводится, через время снова пропадает.
В чем может быть проблема?
Где пропадают, именно в библиотеке?
В библиотеке они есть и на странице редактирования тоже. Они не выводятся на страницы в похожие записи.
uploadme.ru/image/EryУже и плагин перезагрузила, хотя вроде Вы там что-то меняли. Но все равно вместо половины картинок зияют дыры.
Здравствуйте.
Подскажите пожалуйста, как сделать так, чтобы заданная миниатюра не отображалась в открытой полностью статье, имела место только в анонсе? Или так, чтобы миниатюра в статье обтекалась текстом, а не торчала самостоятельно сверху.
Спасибо.
Здравствуйте Елена! Чтобы миниатюра не отображалась в статье, надо убрать вывод миниатюр в файле single.php/ Вот тут и тут почитайте.
добрый день! после вставки в файл css перестают работать ссылки в похожих записях: как на миниатюре, так и на заголовке. И текст вообще никак не выделяется (будто что-то перекрывает его). в чем может быть проблема?
Здравствуйте! Скорее всего дело в шаблоне.
Доброго времени суток, попробовал ваш код, все отлично работает, остается только каждому под свой блог подогнать стили и все !
У меня такой вопрос, как формировать код для выведения похожих постов, так, чтобы брало не заданную миниатюру, а картинку из произвольного поля img и название из произвольного поля name! Помогите если будет свободное время, так как я в этом слабоват(
Очень классная подробная статья! Пришлось повозится, но результат того стоит. Теперь у меня на сайте тоже есть блок с похожими статьями. Ура!
Доброго времени!
У меня миниатюры выстроились в столбец, а не горизонтально
Я неправильно указал url сайта
Наконец то нашёл достойную статью как сделать похожие записи с миниатюрами, а то от плагинов уже устал.
Ах да,ещё вопросы: у Вас ведь тоже полагаю так же сделано без плагинов вывод похожих записей? Как вы считаете, плагин Related Posts правильно распределяет вес страниц по сайту или от него лучше отказаться?
Зачем плагин, когда можно без него обойтись…
Здравствуйте Виталий!
Статья очень полезная и практичная. Сделал на своем блоге. Все прекрасно работает.
Однако вызывает беспокойство следующий вопрос. При создании каждой миниатюры
у меня было создано два файла. Например: есть миниатюра mgren.png 14,5 KB и есть mgren-140х120.png 11 KB. В статьях используются, как правило, миниатюры с адресом хххххх-140х120.png , а в файле «Медиафайлы» (в админпанели) с адресом хххххх.png. При удалении любой из этих двух миниатюр система перестает работать.
Подскажите, пожалуйста, надо ли с этим бороться и как?
Здравствуйте Владимир! Я так понимаю, что mgren.png это исходная картинка, а mgren-140х120.png — это миниатюра исходной картинки. И зачем что-то удалять?
Добрый вечер Виталий, подскажите пожалуйста, как сделать что бы записи выводились рандомно из всех категорий, а не только из той в которой статья? Использовала код который в статье. Записи выводятся только той категории в которой статья. Вот например хотелось бы так: что бы в статье которая принадлежит категории цветы, записи миниатюр выводились бы не только из категории цветы, но и из категорий деревья, листья и т.д.
Здравствуйте Виталий!
Я затрудняюсь в определении, что такое исходная картинка и, что такое миниатюра. У меня более 150 миниатюр. Все они представлены в разделе «Медиафайлы/Библиотека» админ-панели с адресом хххх.png Например, mgren.png. Когда же я смотрю исходный код моей страницы, то эту же миниатюру я вижу с адресом ххх-140х120.png. На сервере все мои миниатюры хранятся в папке uploads/2017/02 , причем каждая миниатюра представлена двумя файлами хххх.png и ххх-140х120. png. Каждый из них весит в среднем по 10 КБ. Именно это и вызывает сомнения. Зачем такое расточительство, ведь каждый раз приходится загружать два изображения, хотя для отображения страницы требуется только одно.
В смысле загружать два изображения, Вы загружаете одно изображение, исходное, а миниатюра создается автоматически, исходя из настроек (Настройки -> Мадиафайлы).
Вот еще почитайте эту статью.
Здравствуйте, не могу найти место для вставки кода. Если ставлю после <main id="content"> -картинки появляются над статьей, если перед get_template_part( 'content', , то исчезает статья, если перед <?php get_sidebar(); ?> -то картинки в сайдбаре наверху, если после endwhile; ?> -то картинки ниже комметариев. Может у меня тоже какой-то не такой код single.php? Что посоветуете, Виталий?
<?php get_header(); ?>
<main id="content">
<?php while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
if ( comments_open() || get_comments_number() ) {
do_action( 'basic_before_post_comments_area' );
comments_template();
do_action( 'basic_after_post_comments_area' );
}
endwhile; ?>
</main> <!— #content —>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Елена, у Вас в коде есть функция get_template_part(). Почитайте про эту функцию здесь и думаю во всем разберетесь самостоятельно.
Виталий, здравствуйте. Подскажите пожалуйста, что прописать для того чтобы отступ от верхнего и нижнего края был разный. Т.е нужно сделать отступ сверху меньше чем нижний, а у вас в стиле они совместны.
привет.установил код и стили все работает шикарно кроме одного момента,мой сайт точнее шаблон адаптирован под мобильные устройства,никак не могу похожие записи выровнять по центру страницы,они прижимаются к левому краю,подскажите что за это отвечает?.в php я недавно не все еще понимаю.так же вот только не давно начал копаться в стилях css.так сказать осваивать их.
Здравствуйте Дмитрий!
Попробуйте добавить к идентификатору #interesting_articles для мобильных стройств добавить следующее:
Привет Виталий.Уже голову сломал.никак не могу выровнять по центу похожие записи,не в версии для пк не в мобильном варианте.Посоветуйте пожалуйста.?Вот пример поста
video-mixxx.ru/spasateli-malibu-2017,а вот мои стили#interesting_articles{
margin: 10px 0; /* Отступы от верхнего и нижнего края */
float: left; /* Прижимаем блок к левому краю */
width: 99%; /* Длина блока соответствует ширине страницы */
}
#interesting_articles ul {
/* Внешний отступ от левого края страницы */
width: 99%; /* Общая ширина блока без учета отступов от краев страницы */
}
#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: 3px; /* Расстояние между ячейками */
padding:px; /* Отступы от миниатюры до края ячейки */
text-align: center; /* Текстовые заголовки расположены по центру */
width: 130px; /* ширина одной ячейки */
overflow: hidden; /* Окончания длинных заголовков, не вместившихся в ячейку, будут скрыты */
border: #f9aff6 solid 2px; /* Рамка вокруг ячейки */
border-top-left-radius: 11px; /* Закругление левого верхнего угла ячейки */
border-top-right-radius: 11px; /* Закругление правого верхнего угла ячейки */
border-bottom-left-radius: 11px; /* Закругление нижнего левого угла ячейки */
border-bottom-right-radius: 11px; /*Закругление нижнего правого угла ячейки */
}
.cell a:hover {
color: #a70eb5; /* Цвет ссылки при наведении курсора */
text-decoration:none; /* Убираем подчеркивание ссылки */
}
.cell a{
color: #a70eb5; /* Цвет ссылки */
text-decoration:none; /* Убираем подчеркивание ссылки */
}
#interesting_articles li :hover{
background-color: #f9f9f9; /* Цвет фона ячейки при наведении курсора */
}
/* Стили для мобильных устройств */
@media screen and (max-width:760px){
#interesting_articles{
width:auto;
display:block;
position:relative;
margin:0 auto;
}
#interesting_articles ul {
width:auto;
}
#interesting_articles li {
float:left;
}
}
Буду признателен за хоть какие то подсказки
Здравствуйте Дмитрий!
Попробуйте для мобильный стилей прописать жесткий отступ от левого края:
Нужное значение отступа подберете сами.
Добрый день! Спасибо, очень познавательно. Виталий, подскажите, в чем может быть дело. Коды вставил, все отображается, но не совсем так, как хочу. Смотрите в ряду показывается всего 3 записи, при этом справа места еще много. То есть четвертая переносится вниз, но сбоку, повторюсь, места еще как минимум на 2. В чем может быть причина? Заранее спасибо.
Классная статья! Спасибо автору. Сделал себе то же самое на блог — все работает отлично))
Спасибо автору! Ваш вариант добавления похожих записей, оказался для меня просто отличным, намного лучше тех плагинов, что я тестировала, для установленной на сайте темы.
Огромнейшее спасибо! Все получилось очень красиво!
При переходе на версию php 7.2 (на версии php 5.6 ошибки не было) в файле .error.log обнаружил:
Backend log: PHP Warning: Use of undefined constant rand — assumed ‘rand’ (this will throw an Error in a future version of PHP) in ……./single.php on line …
Нашел у себя ошибку в строке:
‘orderby’=>rand, // в случайном порядке
Добавил кавычки также как у Вас
‘orderby’=>’rand’, // в случайном порядке
Еще раз Большое спасибо 😉
Доброго времени.
Во первых спасибо автору за работу.
У меня такой вопрос.
Как сделать вывод ячеек только для тех записей, которые уже имеют миниатюру? Т.е. чтобы выводились только записи, имеющие миниатюру.