用豆包开发了一个子比主题首页用的轮播图小工具，超好用的

2天前更新

2302

看着有一家的网站的这个轮播图挺好看的，于是想用豆包做一个，在豆包一次次嘴硬的肯定能运行的努力下，终于做成功了，下面把代码发出来给大家

第1步在自定义代码这里填写CSS代码和js代码

CSS代码

.decoration-tool-box{display:flex;flex-wrap:wrap;gap:15px;margin:20px 0}
@media(max-width:768px){.decoration-tool-box{flex-direction:column}}
.zib-carousel-custom{width:100%;height:100%;position:relative;overflow:hidden}
.zib-carousel-custom .swiper-slide{width:100%;height:100%}
.zib-carousel-custom img,.zib-tool-img-box img{width:100%;height:100%;object-fit:cover;object-position:center}
.swiper-button-next,.swiper-button-prev{color:#fff!important;background:rgba(0,0,0,.3);width:36px;height:36px;border-radius:50%}
.swiper-pagination-bullet-active{background:#fff!important}

js代码

jQuery(window).on('load', function() {
    setTimeout(function() {
        if (jQuery('.zib-carousel-custom .swiper-slide').length >= 2) {
            try {
                new Swiper('.zib-carousel-custom', {
                    loop: true,
                    autoplay: {
                        delay: 3000,
                        disableOnInteraction: false
                    },
                    speed: 800,
                    pagination: { el: '.swiper-pagination', clickable: true },
                    navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' }
                });
            } catch(e){}
        }
    }, 1000);
});

然后在宝塔里找到子比主题的安装路径/wp-content/themes/zibll新建个文件func.php，本来是要装在functions.php这个文件里的，根据functions.php文件提示，新建个文件func.php可以有同样的效果，在线更新主题的时候，func.php文件的内容将不会被覆盖（手动更新仍然会覆盖）所以我把代码装在了func.php

func.php

<?php


class Zib_Decoration_Tool_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'zib_decoration_tool_widget',
            '装修小工具（轮播+双图）终极版',
            array('description' => '左侧轮播可加图+链接，右侧双图+链接，1张图不轮播')
        );
    }

    public function widget($args, $instance) {
        extract($args);
        $carousel_w = !empty($instance['carousel_w']) ? $instance['carousel_w'] : '65%';
        $carousel_h = !empty($instance['carousel_h']) ? $instance['carousel_h'] : '400px';
        $right_w = !empty($instance['right_w']) ? $instance['right_w'] : '32%';
        $top_h = !empty($instance['top_h']) ? $instance['top_h'] : '190px';
        $bottom_h = !empty($instance['bottom_h']) ? $instance['bottom_h'] : '190px';
        $arrow_offset = !empty($instance['arrow_offset']) ? intval($instance['arrow_offset']) : 15;

        $right_top = !empty($instance['right_top']) ? $instance['right_top'] : '';
        $right_bottom = !empty($instance['right_bottom']) ? $instance['right_bottom'] : '';
        $right_top_link = !empty($instance['right_top_link']) ? $instance['right_top_link'] : '';
        $right_bottom_link = !empty($instance['right_bottom_link']) ? $instance['right_bottom_link'] : '';

        echo $before_widget;
?>

<div class="decoration-tool-box">
<div class="carousel-wrap" style="width:<?php echo $carousel_w; ?>;height:<?php echo $carousel_h; ?>;overflow:hidden;border-radius:10px">
    <div class="zib-carousel-custom swiper-container">
        <div class="swiper-wrapper">
            <?php for($i=1;$i<=10;$i++): ?>
                <?php 
                $img = !empty($instance["img$i"]) ? $instance["img$i"] : '';
                $link = !empty($instance["link$i"]) ? $instance["link$i"] : '';
                if($img): ?>
                    <div class="swiper-slide">
                        <a href="<?php echo esc_url($link); ?>"><img src="<?php echo esc_url($img); ?>"></a>
                    </div>
                <?php endif; ?>
            <?php endfor; ?>
        </div>
        <div class="swiper-button-prev" style="left:<?php echo $arrow_offset;?>px"></div>
        <div class="swiper-button-next" style="right:<?php echo $arrow_offset;?>px"></div>
        <div class="swiper-pagination"></div>
    </div>
</div>

<div class="right-wrap" style="width:<?php echo $right_w; ?>;display:flex;flex-direction:column;gap:15px">
    <div class="zib-tool-img-box" style="height:<?php echo $top_h; ?>;overflow:hidden;border-radius:10px">
        <a href="<?php echo esc_url($right_top_link);?>"><img src="<?php echo esc_url($right_top);?>"></a>
    </div>
    <div class="zib-tool-img-box" style="height:<?php echo $bottom_h; ?>;overflow:hidden;border-radius:10px">
        <a href="<?php echo esc_url($right_bottom_link);?>"><img src="<?php echo esc_url($right_bottom);?>"></a>
    </div>
</div>
</div>

<?php
        echo $after_widget;
    }

    public function form($instance) {
        $defaults = array(
            'carousel_w'=>'65%','carousel_h'=>'400px','right_w'=>'32%','top_h'=>'190px','bottom_h'=>'190px','arrow_offset'=>'15',
            'right_top'=>'','right_bottom'=>'','right_top_link'=>'','right_bottom_link'=>''
        );
        for($i=1;$i<=10;$i++) $defaults["img$i"] = $defaults["link$i"] = '';
        $instance = wp_parse_args((array)$instance, $defaults);
?>

<h4 style="margin:0 0 5px;">📏 尺寸设置</h4>
<p><label>轮播宽度：</label><input class="widefat" name="<?php echo $this->get_field_name('carousel_w'); ?>" value="<?php echo $instance['carousel_w']; ?>"></p>
<p><label>轮播高度：</label><input class="widefat" name="<?php echo $this->get_field_name('carousel_h'); ?>" value="<?php echo $instance['carousel_h']; ?>"></p>
<p><label>右侧宽度：</label><input class="widefat" name="<?php echo $this->get_field_name('right_w'); ?>" value="<?php echo $instance['right_w']; ?>"></p>
<p><label>右侧上图高度：</label><input class="widefat" name="<?php echo $this->get_field_name('top_h'); ?>" value="<?php echo $instance['top_h']; ?>"></p>
<p><label>右侧下图高度：</label><input class="widefat" name="<?php echo $this->get_field_name('bottom_h'); ?>" value="<?php echo $instance['bottom_h']; ?>"></p>
<p><label>箭头向内缩进(15最佳)：</label><input class="widefat" name="<?php echo $this->get_field_name('arrow_offset'); ?>" value="<?php echo $instance['arrow_offset']; ?>"></p>

<hr>
<h4 style="margin:0 0 5px;">🖼️ 轮播图片（最多10张，1张不轮播）</h4>
<?php for($i=1;$i<=10;$i++): ?>
<p><strong>轮播图 <?php echo $i; ?></strong></p>
<p><label>图片地址：</label><input class="widefat" name="<?php echo $this->get_field_name("img$i"); ?>" value="<?php echo $instance["img$i"]; ?>"></p>
<p><label>跳转链接：</label><input class="widefat" name="<?php echo $this->get_field_name("link$i"); ?>" value="<?php echo $instance["link$i"]; ?>"></p>
<?php endfor; ?>

<hr>
<h4 style="margin:0 0 5px;">🖼️ 右侧上下图片 + 链接</h4>
<p><label>右侧上图片：</label><input class="widefat" name="<?php echo $this->get_field_name('right_top'); ?>" value="<?php echo $instance['right_top']; ?>"></p>
<p><label>右侧上链接：</label><input class="widefat" name="<?php echo $this->get_field_name('right_top_link'); ?>" value="<?php echo $instance['right_top_link']; ?>"></p>
<p><label>右侧下图片：</label><input class="widefat" name="<?php echo $this->get_field_name('right_bottom'); ?>" value="<?php echo $instance['right_bottom']; ?>"></p>
<p><label>右侧下链接：</label><input class="widefat" name="<?php echo $this->get_field_name('right_bottom_link'); ?>" value="<?php echo $instance['right_bottom_link']; ?>"></p>

<?php
    }

    public function update($new_instance, $old_instance) {
        $instance = array();
        $keys = array('carousel_w','carousel_h','right_w','top_h','bottom_h','arrow_offset','right_top','right_bottom','right_top_link','right_bottom_link');
        for($i=1;$i<=10;$i++) { $keys[] = "img$i"; $keys[] = "link$i"; }
        foreach($keys as $k) $instance[$k] = sanitize_text_field($new_instance[$k]);
        return $instance;
    }
}

function register_zib_decoration_tool_widget() {
    register_widget('Zib_Decoration_Tool_Widget');
}
add_action('widgets_init', 'register_zib_decoration_tool_widget');

装好后，就可以在自定义的小工具里找到

装修小工具（轮播+双图）终极版，这个变态名称的小工具，受不了的是还来个终极版的名称，豆包真是太可爱了，然后大家就可以把小工具拉到首页，填写图片链接使用了

5人已评分