我想以轮播样式显示我的自定义插件的图像

Question

我制作了我的第一个自定义插件，它通过短代码显示图片库。当前图像随机显示。我想通过使用 owl 轮播以轮播样式显示它们。

我已经尝试在我的自定义插件文件夹中包含 css 和 owl carousel 的 js 文件。可能是我的脚本和样式没有得到 called.i 需要帮助如何在我的自定义代码中添加循环代码。请逐步指导我，因为我是自定义插件开发的初学者。

这是从中获取图库并包含脚本和样式的元数据，请查看它是否合适。

function gallery_metabox_enqueue($hook) {
    if ( 'post.php' == $hook || 'post-new.php' == $hook ) {
      wp_enqueue_script('gallery-metabox', plugin_dir_url( __FILE__ ) . '/js/gallery-metabox.js', array('jquery', 'jquery-ui-sortable'));

     wp_enqueue_script('gallery-metabox', plugin_dir_url( __FILE__ ) . '/js/owl.carousel.min.js', array('jquery', 'jquery-ui-sortable'));
     wp_enqueue_script('gallery-metabox', plugin_dir_url( __FILE__ ) .'/css/owl.css', array(), null, 'all' );
     /*wp_enqueue_style( 'owl-carousel' );*/
     wp_enqueue_style( 'owl.css', get_stylesheet_uri() );

    }
  }

  add_action('admin_enqueue_scripts', 'gallery_metabox_enqueue');

-----------------------------------------------------------------------------
this is shortcode from where gallery will be displayed in page where shortcode is pasted.

add_shortcode( 'banners', 'display_banners' ); 
function display_banners($atts){
$meta = get_post_meta($atts['id'],'vdw_gallery_id', true);
?>
<div id="owl-demo" class="owl-carousels">
<?php
foreach ($meta as $key => $value) {
$attpost= get_post($value); // declare post variable 
echo '<img class="items" src="'.$attpost->guid.'" />'; 
}
?>
</div>
<?php
   extract(shortcode_atts(array('key' => 'vdw_gallery_id'), $atts));

    if($key && array_key_exists($key, $meta)) {

        return $meta[$key][0];
   }
    exit;
 }
 ?>

Answer 1

您可以使用以下代码获取图像对象

$images = get_post_meta($post->ID, 'vdw_gallery_id', true);
foreach ($images as $image) {
    $image_obj = get_post($image);
    echo $image_obj->post_excerpt;
}

Answer 2

You can replace with

from : wp_enqueue_script('gallery-metabox', plugin_dir_url( __FILE__ ) .'/css/owl.css', array(), null, 'all' );
     /*wp_enqueue_style( 'owl-carousel' );*/

To : wp_enqueue_style('gallery-metabox', plugin_dir_url( __FILE__ ) .'/css/owl.css', array(), null, 'all' );
     /*wp_enqueue_style( 'owl-carousel' );*/

并确保您能够在源代码中获取 css 和 js (ctrl+u)

我想以轮播样式显示我的自定义插件的图像

i want to display images of my custom plugin in carousel style

wordpress

customization

jquery-plugins

owl-carousel