/ Wordpress / Правильные шорткоды для Gutenberg

Правильные шорткоды для Gutenberg

NEW

22.09.2022

36

Если сделать шорткод неправильно то Gutenberg будет отрабатывать его некорректно. В редакторе выведется ошибка «Этот блок содержит неожиданный или недопустимый контент JSON».

Основное правило заключается в том что функция шорткода должна не выводить что-либо (echo), а возвращать (return).

Также можно экранировать функции от срабатывания в админке:

if (is_admin()) { return false; }

Примеры:

Функция (шорткод) по выводу страниц (с заполненными определенными полями для плиточной системы)

function site_masonry() {
	
	if (is_admin()) { return false; }
	
	$args = array(
		'post_type' => 'page',
		'meta_query' => array(
			array(
				'key' => 'thumb_active',
			),
			array(
				'key' => 'thumb_image',
			)
		),
	);
	$array_posts = get_posts($args);

	if (!empty($array_posts)) :		
	$masonry = '<div class="wrapper"><div class="grid">
				<div class="grid-sizer"></div>';
	foreach ($array_posts as $array_post) {

		$thumb_config = get_post_meta($array_post->ID, 'thumb_config', 1);
		$thumb_image = get_post_meta($array_post->ID, 'thumb_image', 1);
		
		$post_class = implode(' ', get_post_class());
		$post_class .= ' '.$thumb_config;
		$post_class .= ' grid-item';

		$masonry .= '<div class="'.$post_class.'" id="post-'.$array_post->ID.'"><a href="'.get_permalink($array_post->ID).'">
			<p>'.$array_post->post_title.'</p>
			<img src="'.$thumb_image.'" alt="'.$array_post->post_title.'">
			</a></div>';

	}
	$masonry .= '</div></div>';	
	
	endif;
	
	return $masonry;
}

add_shortcode( 'site-masonry', 'site_masonry' );

Шорткод вывода слайдера, с подключением файла

function siteslider() { 
	$slider = '';
	include(__DIR__."/slider.php");
	return $slider;
}
add_shortcode( 'site-slider', 'siteslider' );

Содержимое файла slider.php

<?php $args = array( 
	'posts_per_page' => 5, 
	'offset'=> 0, 
	'post_type' => 'slide',
	'meta_query' => array(
		array(
			'key' => '_thumbnail_id',
		)
	)
);

$myposts = get_posts($args);
if (!empty($myposts)) {
	
	$slider = '<div id="index-slider" class="owl-carousel owl-theme">';

	foreach( $myposts as $post ){ setup_postdata($post);
		
		$thumb_src = get_the_post_thumbnail_url($post->ID, 'full');
		$link = get_post_meta($post->ID, 'slidelink', true);				 
								 
		if ( !empty($link) ):
								 
			$slider .= '<div class="item"><a href="'.$link.'">
			<img class="owl-lazy" data-src="'.$thumb_src.'" alt="'.get_the_title().'">
			</a></div>';
				
		else:

			$slider .= '<div class="item"><img class="owl-lazy" data-src="'.$thumb_src.'" alt="'.get_the_title().'"></div>';
			
		endif;		
								 
								 
	}
	
	$slider .= '</div>';
}

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Шорткоды woocommerce

Шорткоды woocommerce

Для вывода (например) на главной странице сайта элементов WC. Последние продуктыПолезно для использования на главной странице. Определяет, сколько товаров показывать на странице и количество сколько столбцов. Код: Рекомендуемые (featured)Работает точно Читать далее »

/

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

Пока нет комментариев. Будь первым!

Правильные шорткоды для Gutenberg
Кросспостинг в соц.сетях
Рекомендации для васКросспостинг в соц.сетяхOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.