Плагины — один из самых замечательных инструментов в WordPress, которые способны несколькими нажатиями кнопок перекрыть целый круг задач. Это с одной стороны. А с другой, если требуется раз в месяц отпилить брусок, никто не покупает и не тащит домой целый фрезерный станок. Так и с плагинами — ставить отдельный на каждый чих так себе затея. А учитывая, что большинство из них подключает свои файлы CSS и JS — сайт превращается в сборную солянку.
- Предыстория
- Что имеем?
- Реализация шорткода для вывода карточек постов по ID записи
- Код для вставки
- Как пользоваться
- Вывод последних постов определённой категории
- Код для реализации шорткода по категориям
- Параметры и сам шорткод
- Как поменять стили?
- Заключение
- UPD: Обновление шорткода для вывода постов — добавил возможность вывести не только записи, но другие типы записей
- Как пользоваться
Предыстория
Всё началось с того, что копирайтер в статье сослался на похожие записи в статье:
И вот тут как раз таки неплохо было бы сделать перелинковку — ссылки другие на статьи со схожей тематикой, чтобы подробнее раскрыть интент для читателя. И классно было бы это сделать с помощью карточек постов, которые применяются, например, в архивах и на главной странице.
Но, к сожалению, теме нет Reboot такого встроенного функционала, ни хука ни шорткода, что также подтвердили в техподдержке. Там же там посоветовали использовать плагин YARPP. Целый плагин? Только для этого? Ведь, по сути, в шаблоне уже есть нужный функционал, надо его маленько расковырять и сделать, например, нужный шорткод.
Что имеем?
Изначально в теме Reboot предусмотрены следующие виды карточек: small, grid, vertical, horizontal, standart. Выбор, какой из них выводить, есть в конструкторе главной страницы, а также в настройках страницы архивов.
То есть сам функционал есть, но почему-то он не предусмотрен для вывода карточки в самой статье. Давайте это поправим и реализуем небольшой шорткод, который будет работать теперь и в теле статьи.
Реализация шорткода для вывода карточек постов по ID записи
На самом деле реализуем два отдельных шорткода. Первый из них — вывод карточек постов по списку ID нужных записей. Итак, поехали.
Код для вставки
Этот код надо вставить в файл funstions.php темы (дочерней темы):
// add shortcode for post content card
add_shortcode( 'wplancer_posts', 'wplancer_posts_func' );
function wplancer_posts_func( $atts ){
global $post;
$current_ID = get_the_ID();
// default params
$atts = shortcode_atts( [
'post_ids' => '',
'card_type' => 'small',
], $atts );
//get data
if(strlen($atts['post_ids']) > 0){
$ids_number = explode(',', $atts['post_ids']);
$post_card_type = $atts['card_type'];
// clean ids array
foreach ($ids_number as $key => $value){
$ids_number[$key] = (int)trim($value);
if(!is_int($ids_number[$key]) || $ids_number[$key] == $current_ID || $ids_number[$key] <= 0){
unset($ids_number[$key]);
}
}
// get posts from DB
$section_posts = get_posts([
'include' => $ids_number,
]);
// Turn on output buffering
ob_start();
echo "<div class=\"post-cards post-cards--$post_card_type wplancer-content-post-cards\">";
foreach ( $section_posts as $post ) :
setup_postdata($post);
get_template_part( 'template-parts/post-card/' . $post_card_type );
endforeach;
wp_reset_postdata(); //render from buffer
echo "</div>";
return ob_get_clean();
} else {
return null;
}
}
Как пользоваться
Для использования в Гутенберге выбираем блок шорткода, и вставляем:
[wplancer_posts post_ids="101,99,97,67" card_type="small"]Ниже пример, как это выглядит:
Выводятся четыре статьи, с ID 101,99,97,67 с типом карточек small
Шорткод принимает два параметра:
- post_ids — тут перечисляем список ID постов, которые хотим выводить, через запятую. Если случайно в списке будет ID текущего поста, то оно удалится. Если параметр не будет передан, или же будет передана пустая строка, то ничего не будет выведено, не цифровые значения также отфильтруются;
- card_type — тип карточки поста, по умолчанию — small. Как писал выше, в теме доступны варианты: small, grid, vertical, horizontal, standart.
Ещё для примера, с типом vertical:
[wplancer_posts post_ids="701,665" card_type="vertical"]
Вывод последних постов определённой категории
Итак, доливочка. Что если нам требуется, чтобы в теле статьи выводилось определённое количество новых постов из определённой категории? Причём обновление происходило автоматически, если статьи блога в этой категории вдруг добавятся? Можно конечно напихать параметров и изменить предыдущий код, сделать его более универсальным. Но это только приведёт к путанице для юзера, надо будет учитывать кучу параметров. Поэтому, на основе него сделаем новый.
Код для реализации шорткода по категориям
Вставляем в functions.php
// add shortcode for post content card from category
add_shortcode( 'wplancer_posts_cat', 'wplancer_posts_func_cat' );
function wplancer_posts_func_cat( $atts ){
global $post;
$current_ID = get_the_ID();
// default params
$atts = shortcode_atts( [
'post_cats' => '',
'card_type' => 'small',
'numberposts' => 5,
], $atts );
//get data
if(strlen($atts['post_cats']) > 0){
$cat_number = explode(',', $atts['post_cats']);
$post_card_type = $atts['card_type'];
// clean cats array
foreach ($cat_number as $key => $value){
$cat_number[$key] = (int)trim($value);
if(!is_int($cat_number[$key]) || $cat_number[$key] <= 0){
unset($cat_number[$key]);
}
}
// get posts from DB
$section_posts = get_posts([
'category' => $cat_number,
'exclude' => $current_ID,
'numberposts' => $atts['numberposts'],
]);
// Turn on output buffering
ob_start();
echo "<div class=\"post-cards post-cards--$post_card_type wplancer-content-post-cards\">";
foreach ( $section_posts as $post ) :
setup_postdata($post);
get_template_part( 'template-parts/post-card/' . $post_card_type );
endforeach;
wp_reset_postdata(); //render from buffer
echo "</div>";
return ob_get_clean();
}
else{
return null;
}
}
Параметры и сам шорткод
[wplancer_posts_cat post_cats="12,24" numberposts="3" card_type="small" ]Параметры:
- post_cats — ID категорий, списком, через запятую. Если категории с таким ID нет, то выведутся те, что есть. Если список пуст, то вывода также не будет. Если в выборку попадает текущий пост, то он не выводится (удаляется по ID автоматически);
- numberposts — количество выводимых постов. По умолчанию — 5;
- card_type — как и в предыдущем шорткоде — это тип карточки. По умолчанию — small.
Пример:
[wplancer_posts_cat post_cats="56,37" numberposts="3" card_type="small" ]
Шорткод выводит три последних(по дате публикации) поста из категорий с ID 56 и 37.
Как поменять стили?
В контейнер карточек внедрён класс:
wplancer-content-post-cardsЕсли требуется поменять, допустим, нижний отступ для карточки типа horizontal, то перебить стили Reboot можно через иерархию:
.wplancer-content-post-cards .post-card--horizontal{
margin-bottom: 25px;
}
Действовать правила будут только на контентные карточки (которые выводим через шорткод), так что «плитки» в категориях это не затронет.
Заключение
Так как используются шаблоны карточек разработчика, а не придумываются свои, то и все настройки из Внешний вид — Настроить — Карточки постов также сохраняются. То есть если в настройке убрать показ количество просмотров, то в карточке, выведенной шорткодом, он также не будет виден.
Пользуйтесь, пробуйте, но помните, что данная реализация только для темы Reboot. Также внимательно следите за передаваемыми параметрами, проверяйте результат. Если что то пошло не так, то код из functions.php можно удалить. А вообще, делайте бекап, перед любыми действиями.
Если вдруг будет нужен какой-то другой кастомный вывод карточек постов, с другой сортировкой, или выборкой по другим параметрам, то можете написать мне в Телеграм, мы что-нибудь придумаем.
UPD: Обновление шорткода для вывода постов — добавил возможность вывести не только записи, но другие типы записей
На одном из проектов, SEO-специалисту понадобилось создавать страницы, так называемые контент-хабы. И неплохо было бы разместить карточки этих хабов на главной, как и карточки постов. Простая модификация шорткода позволила добавлять тип записи, карточки которой требуется выводить. Шорткод теперь выглядит так:
[wplancer_posts post_ids="244,280,330" card_type="vertical" post_type="page"]- post_ids — как и прежде тут перечисляем список ID постов, которые хотим выводить, через запятую. Если случайно в списке будет ID текущего поста, то оно удалится. Если параметр не будет передан, или же будет передана пустая строка, то ничего не будет выведено, не цифровые значения также отфильтруются;
- card_type — тип карточки поста, по умолчанию — small. Как писал выше, в теме доступны варианты: small, grid, vertical, horizontal, standart;
- post_type — тип поста, по умолчанию — post(запись). Но можно передать параметр
post_type="page", тогда выводиться будут страницы. Также можно передавать и другие типы постов, а также свои типы записей.
При этом код, который добавляем в functions.php теперь будет выглядеть так:
// add shortcode for post content card
add_shortcode( 'wplancer_posts', 'wplancer_posts_func' );
function wplancer_posts_func( $atts ){
global $post;
$current_ID = get_the_ID();
// default params
$atts = shortcode_atts( [
'post_ids' => '',
'card_type' => 'small',
'post_type' => 'post'
], $atts );
//get data
if(strlen($atts['post_ids']) > 0){
$ids_number = explode(',', $atts['post_ids']);
$post_card_type = $atts['card_type'];
$post_type = $atts['post_type'];
// clean ids array
foreach ($ids_number as $key => $value){
$ids_number[$key] = (int)trim($value);
if(!is_int($ids_number[$key]) || $ids_number[$key] == $current_ID || $ids_number[$key] <= 0){
unset($ids_number[$key]);
}
}
// get posts from DB
$section_posts = get_posts([
'include' => $ids_number,
'post_type' => $post_type
]);
// Turn on output buffering
ob_start();
echo "<div class=\"post-cards post-cards--$post_card_type wplancer-content-post-cards\">";
foreach ( $section_posts as $post ) :
setup_postdata($post);
get_template_part( 'template-parts/post-card/' . $post_card_type );
endforeach;
wp_reset_postdata(); //render from buffer
echo "</div>";
return ob_get_clean();
} else {
return null;
}
}
Как пользоваться
В качестве примера приведу, как можно воспользоваться этим в конструкторе главной страницы:
В конструкторе главной страницы добавляем в нужное место блок HTML и вставляем в него шорткод, с указанием post_type="page" и с передачей остальных параметров. В результате на главной выводятся карточки хабов:
Так как во время написания статьи велась работа только над первым хабом, то и в примере пока только одна карточка.
P.S. Эти исправления относятся именно к первому шорткоду в этой статье, в которой мы выводили именно карточки постов по id
P.S.№2 В первом шорткоде в статье была допущена ошибка, которая уже исправлена. Если кому-то это доставило неудобство, то прошу прощения.
Если остались вопросы, то можете написать мне в Телеграм
Всем успехов и удачной разработки. Пока!
Материал был полезен?
