Выводим похожие записи на сайте WordPress (c миниатюрами) без плагинов для усиления внутренней перелинковки

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. Я уже немало писал о внутренней перелинковке, неотъемлемой частью которой является присутствие так называемых «похожих записей» на блоге или сайте.

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

Для веб-ресурсов, работающих под управлением Вордпресса (этот материал о движке WP даст вам о нем полное представление), отличным средством для решения этой задачи вполне может быть WordPress Related Posts, который отвечает всем современным требованиям и даже выводит блок ссылок с миниатюрами (небольшими изображениями по теме страницы-акцептора).

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

Почему важно наличие выбора способа реализации похожих записей

Я не буду вас долго томить неопределенностью, и сразу расставлю все точки над i в вопросе приоритета того или иного способа вывода похожих записей. Чуть выше я отметил достоинства плагина Related Posts, и по сути, вы совершенно спокойно можете его установить.

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

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

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

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

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

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

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

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

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

Похожие записи в WordPress посредством кода, помещенного в нужный шаблон темы

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

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

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

Главное, редактор Notepad plus plus имеет синтаксис с подсветкой, позволяющей быстро ориентироваться в содержании редактируемого шаблона, и опцию, которая дает возможность вернуться на несколько шагов назад вплоть до исходного варианта файла. Это обеспечивает максимальную безопасность от возможных ошибок при редактировании, которые могут навлечь серьезные проблемы, включая потерю доступа к сайту, что не есть гут.

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

<?php the_content()?>

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

<?php get_template_part(); ?>

Именно под ней (ну или под «php the_content», если она имеется) надо поместить функцию, которая будет инициировать вывод похожих записей. Темы у всех разные, потому более точно место вставки каждый должен установить самостоятельно. Однако, на основании данных рекомендаций, думаю, это будет несложно сделать даже начинающим.

Хочу напомнить, что файлы темы Вордпресс вы можете найти на сервере своего хостинга по адресу «ваш_сайт» — «wp-content» — «themes» — «Название темы». Функция, которая последует ниже, будет представлена в двух вариациях.

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

<?php $tags = wp_get_post_tags($post->ID);
if ($tags) {
 $tag_ids = array();
 foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
 $args=array(
 'tag__in' => $tag_ids, // Выбор по тегам (меткам)
 'orderby'=>rand, // Случайный подбор постов
 'caller_get_posts'=>1, // Запрещает повторение ссылок
 'post__not_in' => array($post->ID),
 'showposts'=>5 // Число, которое можно изменить, означает количество выводимых записей
 );
 $my_query = new wp_query($args);
 if( $my_query->have_posts() ) {
 echo '<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();
 }
 ?>

Комментарии (в коде выделены зеленым цветом) помогут разобраться, для каких целей предназначен тот или иной фрагмент функции. Но несколько слов все-равно сказать стоит:

1. «’orderby’=>rand,» — определяет случайный выбор постов по имеющимся у них меткам. Если вы желаете, чтобы ссылки выводились на статьи по дате их публикации, начиная с самых новых, то просто удалите эту строчку из кода.

2. «’caller_get_posts’=>1,» — допустим, у вас стоит ограничение (см. следующее условие showposts) на вывод похожих материалов в блоке, но по имеющимся меткам возможно лишь отображение 3 или 4 из них. Данный запрет не разрешает повторение одинаковых ссылок (будет отображаться не 5, а столько, сколько разных гиперссылок есть в наличии).

3. «’showposts’=>5» — здесь все просто: число (в данном случае 5) ограничивает количество имеющихся в блоке линков. Вы можете поставить свое.

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

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

Также нелишним будет оформить заголовок со своим классом (в коде он в самом верху):

<div class="golova1">Еще статьи по данной теме:</div>

А далее нужно прописать подходящие стили для «class=»r-posts»» и «class=»golova1″». Конечно, у всех темы различаются, но я все-таки предложу свой минимум правил CSS. В конце концов, у вас будет базис, который легче просто отредактировать или добавить новые свойства:

.golova1 {margin-top:60px; margin-bottom:20px; font:normal 17px Verdana,Arial;}
.r-posts {line-height:1.68; margin-left:20px; margin-bottom:40px; font-size:15px;}
.r-posts ul {list-style-type:circle;}

Эти стили можно вставить в любое место файла style.css своей темы. Ну а для редактирования предложенных правил CSS вы можете привлечь инструменты разработчика, которые есть в любом популярном браузере (их активация обычно производится нажатием кнопки F12 на клавиатуре). Эти средства, позволяющие мгновенно просматривать результаты изменений online, являются аналогом плагина Firebug для Firefox, о котором здесь можете почитать подробнее.

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

<div class="golova1">Еще статьи по данной теме:</div>							
<div class="r-posts">
<?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, // Случайный подбор постов
 'caller_get_posts'=>1); // Запрещает повторение ссылок
 'post__not_in' => array($post->ID),
 'showposts'=>5, // Число, которое можно изменить, означает количество выводимых записей
 $my_query = new wp_query($args);
 if( $my_query->have_posts() ) {
echo '<ul>';
        while ($my_query->have_posts()) {
            $my_query->the_post();
        ?>
            <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
        <?php
        }
        echo '</ul>';
    }
wp_reset_query();
}
?></div>

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

Добавляем миниатюры к похожим материалам Вордпресс

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

Чтобы проверить, включены ли в вашей теме миниатюры, в админ-панель WordPress перейдите на страницу любой записи, где справа должен располагаться вот такой блок («Установить изображение записи»), помогающий задать уменьшенную картинку для статьи:

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

add_theme_support('post-thumbnails');

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

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

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

Настроить это дело можно посредством админ-панели WordPress в разделе «Настройки» — «Медиафайлы». По умолчанию размер миниатюр составляет 150×150 пикселов (если исходные изображения прямоугольные, то есть с разной шириной и высотой, то они будут обрезаться с сохранением пропорций). Но можете указать свои параметры в зависимости от ваших предпочтений (я, например, оставил дефолтный вариант).

Составляем схему расположения миниатюр (thumbnails)

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

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

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

Если подобного элемента не оказалось, то можно прибегнуть и к помощи блочного тега hr, который является средством отображения горизонтальной линии. Чтобы измерения оказались корректными, уберите все возможные отступы, которые могут быть прописаны в файле стилей (margin:0;), сделайте эту линию потолще (height:6px;) и поярче (background-color:red) для удобства. В целях экономии времени все эти свойства подключите с помощью атрибута style:

<hr style="margin:0; height:6px; background-color:red">

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

Итак, вся доступная область для размещения блока ссылок на похожие записи в нашем примере равна 730 px (пикселов). Как известно, ширина картинки будет 150 px. Таким образом, можно разместить 3 или 4 ячейки с миниатюрами последовательно в ряд.

Сначала разберем вариант с тремя ячейками, который реализовал я сам. В этом случае «чистое» пространство, занимаемое миниатюрами, будет 450 (150×3) px. Оставшееся по ширине место (280 px) отводим под внутренние и внешние отступы плюс учтем толщину рамки для каждой из ячеек. По задумке ячеек три, стороны рамок с одной и другой стороны (всего 6). Значит, для всех отступов останется 274 (280 — 6) px.

Число отступов также можно легко вычислить. Поскольку я желаю, чтобы блок похожих записей прижимался бы как к левому, так и правому краю, отступы будут лишь внутри ячейки (для миниатюры справа и слева — всего 6), а также между ними (2 промежутка на три ячейки).

Следовательно, всего 8 отступов, которые для простоты можно сделать равными. Тогда величину каждого из них можно легко вычислить (274/8 = 34,25 px). Здесь можно взять целое число и пренебречь десятичной дробью, поскольку визуально это не будет заметно. Впрочем, все выше представленные рассуждения для наглядности я оформил в виде простешей схемы, после чего, думаю, вопросов не возникнет даже у дошкольника:

Устанавливаем код похожих записей с картинками

Итак, схема составлена, теперь осталось реализовать ее на практике силами функции, размещенной в файле single.php, и свойств CSS, которые необходимо будет поместить в файл style.css вашей темы WP. Весь блок похожих записей я решил выводить при помощи HTML списка ul, который обернул дивом, обладающим соответствующим классом (class=»rel-posts»).

Миниатюры и ссылки, размещенные в ячейках, окаймленных рамками, я также поместил в контейнеры div с классами «cat_thumb» и «cat_link» соответственно, которым прописал необходимые CSS свойства (подробности чуть ниже).

Куда вставлять код для отображения похожих записей с миниатюрами, вы, наверное, уже поняли. То есть, в то же место файла single.php вашей темы, куда мы помещали блок с простыми ссылками, который разбирали уже в этой статье. Итак, вот код функции, которая обеспечит появление на страницах вашего сайта блока похожих записей с картинками:

<div class="golova1">Интересные публикации по этой теме:</div>
<div class="rel-posts"> 
<?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'=>3,  // Количество выводимых записей
 '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><a target="_blank" href="<?php the_permalink() ?>" rel="bookmark"><div class="cat_thumb"><?php the_post_thumbnail('thumbnail'); ?></div>
<div class="cat_link"><?php trim_title_chars(60, '…'); ?></div>
</a></li>
<?php
}
echo '</ul>';
}
wp_reset_query();
}
?></div>

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

'showposts'=>3

Если у вас пока немного статей, то лучше ограничиться этой цифрой, поскольку в этом случае похожие записи расположатся в один ряд. А вот ежели ячеек будет 4 или 5 (на большее, возможно, на блоге просто не хватит соответствующих материалов по конкретной теме), то это будет смотреться не совсем привлекательно, так как второй ряд заполнен не будет.

Впоследствии, с увеличением количества публикаций вы можете изменить это число на 6, если будете уверены, что статей по каждой теме будет достаточно для заполнения двух рядов. Думаю, понятно, что в любом случае параметр «’showposts’» должен быть кратным трем (3, 6, 9).

Частицу кода, выводящего непосредственно ячейки с миниатюрами, разберем подробнее:

<li><a target="_blank" href="<?php the_permalink() ?>" rel="bookmark"><div class="cat_thumb"><?php the_post_thumbnail('thumbnail'); ?></div>
<div class="cat_link"><?php trim_title_chars(60, '…'); ?></div></a></li>

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

Вывод миниатюр будет осуществляться с помощью функции thumbnail (причем значение «’thumbnail’» означает, что будут отображаться самые маленькие картинки):

<div class="cat_thumb"><?php the_post_thumbnail('thumbnail'); ?></div>

Изображения я поместил в контейнер с классом «cat_thumb», которому также будут присвоены нужные стили, как и «cat_link» для заголовков:

<div class="cat_link"><?php trim_title_chars(60, '…'); ?></div>

В связи с этим необходимо пояснить вот такой отрывок:

<?php trim_title_chars(60, '…'); ?>

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

<?php the_title(); ?>

Но дело в том, что заглавия статей у меня бывают длинными, поэтому им может не хватить места в ячейке, а это нанесет ущерб привлекательности похожих записей. Для этого я привлек функцию «trim_title_chars», которая помогает обрезать текст заголовков до нужного числа символов (в нашем примере это 60, вы же можете поставить любое другое число, которое вам подходит). А можете использовать стандартный вариант «the_title()», если названия ваших постов короткие.

CSS свойства для оформления внешнего вида списка ссылок с миниатюрами

Ну а теперь сразу предоставляю список стилей, которые будут применены к каждому из тех элементов, которые входят в состав основного контейнера с «class=»rel-posts»» (напоминаю, что их вы должны поместить в style.css):

.rel-posts {overflow: auto;}
.rel-posts ul {list-style-type:none; line-height:1.4;}
.rel-posts li {border:solid 1px #ccc; height:290px; float:left; margin:0 34px 34px 0; background:#faf0e6;}
.rel-posts li a {text-decoration:none; color: #1917af;}
.rel-posts li:hover a {text-decoration:none; color:#4f7942;}
.rel-posts li:nth-child(3n+3){margin-right:0;}
.cat_thumb {margin: 34px 34px 0 34px;}
.cat_link {width: 180px; margin: 5px 5px 0 23px;}

Поясню некоторые моменты, касающиеся оформления похожих записей. Для основного блока прописано правило overflow:auto, которое вкупе со свойством CSS «float:left» (для контекстного селектора «.rel-posts li») позволяет обеспечить корректное отображение как всего блока с миниатюрами, так и его отдельных элементов. Кроме того, «float left» превращает вертикальный список в горизонтальный, чего мы, собственно, и добивались.

Еще один важный момент для понимания ситуации. Помните, выше мы составляли предварительную схему с вычислением отступов? Так вот, их значения указаны в виде параметров свойства CSS «margin». Для всей ячейки, определяемой элементами списка, а точнее, тегом li, они выглядят так:

margin:0 34px 34px 0

Здесь надо понимать, что указанный отступ справа (34px) будет применен ко всем ячейкам, поэтому при отображении всего блока в браузере зазоры будут не только между ними внутри контейнера, но также между последней ячейкой и правой границей области контента:

Тогда при величине зазоров 34px места для последней ячейки не останется, и она опустится во второй ряд, заняв крайнюю левую позицию, поскольку для каждого элемента li будет действовать правило «float:left». Мы же при расчете отступов ориентировались на то, что последняя ячейка должна прижиматься к правому краю. Как же этого добиться?

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

.rel-posts li:nth-child (3n+3){margin-right:0;}

Псевдокласс как раз помогает ликвидировать промежуток между последней ячейкой и правой границей области контента:

Параметр (3n+3) селектора «:nth-child» означает, что прописанные для него CSS свойства будут применены к каждому элементу, порядковый номер которого совпадает с числом, получаемым по этой формуле при замене переменной n целыми числами:

3n + 3 = 3×0 + 3 = 3 при n = 0
3n + 3 = 3×1 + 3 = 6 при n = 1
3n + 3 = 3×2 + 3 = 9 при n = 2
3n + 3 = 3×3 + 3 = 12 при n = 3

Получается, что для каждой третьей ячейки в нашем примере будет действовать правило «margin-right:0;», что позволит выводить несколько их рядов в списке похожих материалов.

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

Если вы перейдете по предоставленной ссылке, то узнаете все подробности создания адаптивных элементов. С этой целью в файле style.css создаются специальные секции с точками излома под различные размеры экранов, которые устанавливаются посредством директив @media.

Допустим, вы установили блок ссылок на похожие статьи в два ряда. Тогда, если прописать псевдокласс в общий раздел файла стилей, то при отображении на ПК все будет окей. Однако, на меньших экранах при адаптивном дизайне все элементы страницы будут менять свое местоположение.

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

Чтобы этого избежать, необходимо свойство «:nth-child (3n+3){margin-right:0;}» поместить в секцию, предусмотренную для самых больших экранов (такое место можно поискать в вашем файле style.css). У меня это экраны с минимальной шириной 1250 пикселов:

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

Тогда псевдокласс «:nth-child» можно просто не использовать. Но ведь нужно стремиться к совершенству…даже в мелочах. Хотя, каждый решает для себя сам.

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

Как вы помните, у меня на блоге ширина свободной области составляет 730 пикселов. Значит, вполне реально разместить таким же образом и 4 миниатюры стандартного размера 150×150 в ряд (150×4 = 600px). Для этого достаточно внести лишь некоторые изменения в уже существующий комплект правил CSS:

.rel-posts li {border: solid 1px #ccc; height: 260px; float:left; margin:0 8px 8px 0; background:#faf0e6;}
.rel-posts li:nth-child(4n+4){margin-right:0;}
.cat_thumb {margin: 8px 8px 0 8px;}
.cat_link {width: 160px; margin: 5px 5px 0 10px;}

Не забудьте расположить псевдокласс «:nth-child(4n+4)» в нужном месте файла стилей. А также необходимо иметь ввиду, что сокращение величины отступов для картинок (.cat_thumb) приводит к тому, что появляется погрешность, поскольку текст заголовков с линками (.cat_link) сжимается с учетом корректного отображения слов.

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

.rel-posts {overflow: auto;}
.rel-posts ul {list-style-type:none; line-height:1.4;}
.rel-posts li {border:solid 1px #ccc; height:260px; float:left; margin:0 8px 8px 0; background:#faf0e6;}
.rel-posts li:nth-child(4n+4){margin-right:0;}
.rel-posts li a {text-decoration:none; color: #1917af;}
.rel-posts li:hover a {text-decoration:none; color:#4f7942;}
.cat_thumb {margin: 8px 8px 0 8px;}
.cat_link {width: 160px; margin: 5px 5px 0 10px;}

Да, чуть не забыл. Напоминаю, что в целях использования 4 картинок с ссылками на тематические публикации необходимо поменять в коде, который вы помещаете в single.php, значение «’showposts’» c 3 на 4, ну или на 8, если желаете выводить ячейки в два ряда. Визуальное отображение уже готового варианта тоже лишним не будет:

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