1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 оценок, среднее: 5,00 из 5)
Загрузка...

Post grid: вордпресс похожие записи и код без плагина

Плагин Post grid обещает красиво выводить сетку похожих записей после постов вордпресс. Его я пыталась установить на 2 сайтах. На рабочем он плохо отображал, вероятно, из-за того, что много кастомного кода. А на мой я не знаю, почему не стал. Шорткод не срабатывает вообще.

Аналоги Post grid

Плагин POST GRID для вывода постов сеткой на WordPress не единственный, хотя и современный. Есть еще варианты: Recent Posts Widget Extended и Content Views. Если вбить их в поиск плагинов в админке, там еще схожие покажут.
Я не знаю, может наши сайты устарели и не могут поддержать сетку. На моем сайте, например, в коде нету флексов даже. Эту тему Basic давно придумали.

Последние записи без плагина

Искала плагины, наткнулась на код. Решила попробовать. Как ни странно, заработало сразу без глюков. У меня в дочерней еще не было файла single, я его создала. Там не нужно никаких комментариев писать для подключения, как в стилях и функциях.
Сам код:
<!--похожие записи-->
<div class="sample-posty">
<p>Ещё статьи по теме:</p>
<?php
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'showposts'=>3, // количество отображаемых ссылок
'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><a class="zapisi-post" href="<?php the_permalink() ?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>">
<?php the_post_thumbnail(); ?><?php the_title(); ?></a></li>
<?php
}
echo '</ul>';
}
wp_reset_query();
}
?>
</div>

Я на первом сайте поставила 3 записи, а у себя 6, так как названия старых статей короткие. Потом переделаю. Я еще добавила class=”zapisi-post”, так как хотела сделать плитку линкабельной.

На рабочем код вставила в single.php перед php get_footer, то есть в самом конце контент блока. На моем сайте немного сложнеее. Здесь в single.php код такой был:

<?php get_header(); ?>
<main id="content" class="content">
<?php if(function_exists('the_ratings')) { the_ratings(); } ?> 
<?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(); ?>

Получается, что все внутри контейнера main, куда входит текст и комментарии с формой. Конечно же, после комментариев мне не подходит, нужно, чтобы статьи шли после текста.  Поэтому я разделила код на 2 части. Закрыла тегом часть про вывод поста и открыла перед  условием для комментариев. Между ими вставила наш код записей. И получилось так:

<?php get_header(); ?>
<main id="content" class="content">
<?php if(function_exists('the_ratings')) { the_ratings(); } ?> 
<?php while (have_posts()) : the_post(); 
get_template_part( 'content', get_post_format() ); endwhile;?> 
<!--похожие записи-->
<div class="sample-posty">
<p>Ещё статьи по теме:</p>
<?php
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'showposts'=>6, // колличество отображаемых ссылок
'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><a class="zapisi-post" href="<?php the_permalink() ?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>">
<?php the_post_thumbnail(); ?><?php the_title(); ?></a></li>
<?php
}
echo '</ul>';
}
wp_reset_query();
}
?>
</div>
<?php while 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(); ?>

css для вывода последних записей плитками

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

Сайт наш на бутстрапе, ему как раз хорошо все на флексах. И мне понятно, что пишу. Я более старые варианты плохо понимаю, я тогда еще соску сосала, когда те методы были популярны.

На том сайте я делала без картинок, так как их пока нет на записях.

.sample-posty p{font-weight:700;text-align:center;}
.sample-posty ul{display:flex;justify-content:center;list-style-type:none;flex-wrap:wrap;padding:5px;}
.sample-posty li{padding:10px;background:#f8f8f8;margin:5px;max-width:400px;
text-align:center;}
.sample-posty li:hover{background:#119ff0;}
.sample-posty li a{text-align:center;padding:5px;}
.sample-posty li a:hover{color:white;}
.zapisi-post{display:block;width:100%;height:100%;}

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

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

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

/*похожие записи*/
.sample-posty p{font-weight:700;text-align:center;}
.sample-posty ul{display:flex;justify-content:center;list-style-type:none;flex-wrap: wrap;}
.sample-posty li{padding: 0 10px;
background:azure;margin:5px;max-width:300px;text-align:center;border:1px solid#008080;}
.sample-posty li:hover{background:#0b86cd;}
.sample-posty li a{text-align:center;text-decoration: none;color:#222;}
.sample-posty li a:hover{color:white;}
.zapisi-post{display:block;width:100%;height:100%;line-height:30px;}
.attachment-post-thumbnail{margin-top:10px;}

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

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

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

Комментарии 4

  • Я давно отказался от автоматической выведения похожих постов в конце страницы. Вывожу все вручную. Прямо в статьей разметку делаю. А потом стили в css.

    Вывожу с миниатюрами 260 на 210 px. Но чем больше записей, тем они меньше. Вывожу не более 4 записей в одну строку.

    Мне так удобнее. То что нужно, то вставил. А автоматом выводить, может не тов вывести или вообще, может появится дубликат ссылки со статьи. Поэтому такой способ не использую.

  • Как понять дубликат? он не выведет 2 одинаковые же. Ни разу такого не видела, пока тестирую на рабочих. Я позже, когда будет больше контента, возможно заменю вывод по категории выводом по тегам. Но я же создала очень много подкатегорий во избежание вывода чуши.Должно идти релевантно. Только картинок нет, надо ставить. Я на рабочих все заполнила, картинки 300 на 200. Можно было делать без размеров, но я сделала фиксированно, чтобы картинки делались не гигантами, как я там понаходила у них в плитках сделок. Все позаменяла, максимально большие это 300 теперь, скорость экономим. А кто после меня будет заполнять, не сильно перетрудятся подстроить размер 300 на 200. Я считаю, что иногда нужно подстраивать контент, а не верстку. Так рационально. Я имею ввиду, вариант вставлять любые картинки есть, но я специально сделала фиксированные, чтоб никто не гадил гигантскими картинками. А у себя тоже так сделала, чтоб самой не лениться и не гадить) А то могу кинуть лишь бы что с мыслью потом переделаю и не переделать.)Если ты вручную пишешь плитки и всем страницам разные то у тебя будет слишком много стилей в таблице потом. Или ты только разметку ставишь? но это тоже нормально, пишешь ссылки сам вручную и все.А я плаги статьи делаю сейчас вручную. Я просто плагинов боюсь, что сдохнут когда-то и все накроется. А вручную никуда не денется. Там просто. Просто каждую строчку оборачиваю классом, стили один раз записаны в таблицу. И еще якорные ссылки идут и все. div class=”plan-yakor” вокруг строчек и ссылки внутри a href=”# бла-бла-бла

  • План статьи хотела написать. Это слишком долго якоря ставятся вручную. Надоело. Я сделала только 3 страницы и уже устала. черная дыра на моем компе снова всоcала таблицу, поэтому я пишу коды на сайте. Надо будет написать и якоря, отсюда копировать потом. я не понимаю,храню все файлы в папках.старательно записываю все. И все равно некоторые исчезают. Нашла редактор, он сам строит по тексту содержание и потом можно якоря списать и пункты. Пункты строит по заголовкам.c-wd.ru/tools/html/. он еще теги чистит, текста.

  • Я только разметку делаю для похожих записей. Классы везде одинаковые. Поэтому тут один стиль для всех. Стили для этих классов помещаю в css.
    Там немного.

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

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

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

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

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

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

Я согласен с политикой конфиденциальности

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.