要解决ACF Gutenberg块在后台未渲染Slick Slider的问题,您可以使用以下方法:
function load_slick_slider() {
wp_enqueue_style( 'slick-slider', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css' );
wp_enqueue_script( 'slick-slider', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array( 'jquery' ), '1.8.1', true );
}
add_action( 'wp_enqueue_scripts', 'load_slick_slider' );
function render_acf_gutenberg_slider( $block ) {
$slider_images = get_field( 'slider_images' ); // 替换为您自己的ACF字段名称
if ( $slider_images ) {
echo '
';
}
}
acf_register_block_type
函数在ACF Gutenberg块中注册自定义函数:function register_acf_gutenberg_block() {
acf_register_block_type(
array(
'name' => 'acf-gutenberg-slider',
'title' => 'ACF Gutenberg Slider',
'render_callback' => 'render_acf_gutenberg_slider',
'category' => 'formatting',
'icon' => 'images-alt2',
'keywords' => array( 'slider', 'slick', 'acf' ),
)
);
}
add_action( 'acf/init', 'register_acf_gutenberg_block' );
请确保替换代码中的slider_images
和acf-gutenberg-slider
为您自己的ACF字段名称和Gutenberg块名称。
这样,您就可以在ACF Gutenberg块中使用Slick Slider,并确保在后台正确渲染。