核心布局

  • 左侧轮播+右侧双栏,完美适配PC端和手机端显示,手机端自动调整为上下布局
  • 轮播功能调用子比主题
  • 自动播放控制:可开启/关闭自动播放
  • 内容管理:支持自动抓取最新文章或手动指定文章ID,三区域独立配置不同的文章来源

获取代码

  1. 代码添加至子比主题 func.php 文件(或者 function.php)
  2. 后台→外观→小工具,拖拽「New轮播图」至目标区域
  3. 配置筛选、布局、样式参数,保存即可生效
  4. [hidecontent type=”reply” desc=”隐藏内容:评论后查看”]

    /*
     * New轮播图小工具(大海)
     * 基于子比主题框架开发,保留作者信息
     */
    Zib_CFSwidget::create('zib_widget_new_carousel',array('title'=>'New轮播图','zib_title'=>true,'zib_affix'=>true,'zib_show'=>true,'description'=>'左侧轮播+右侧双栏,支持5种切换效果','fields'=>array(array('id'=>'height','type'=>'number','title'=>'模块高度','default'=>400,'unit'=>'px'),array('id'=>'right_width','type'=>'number','title'=>'右侧宽度','default'=>300,'unit'=>'px'),array('id'=>'left_posts','type'=>'text','title'=>'左侧文章ID','desc'=>'多个用逗号分隔,留空自动获取'),array('id'=>'right_top_posts','type'=>'text','title'=>'右上文章ID','desc'=>'多个用逗号分隔,留空自动获取'),array('id'=>'right_bottom_posts','type'=>'text','title'=>'右下文章ID','desc'=>'多个用逗号分隔,留空自动获取'),array('id'=>'left_effect','type'=>'select','title'=>'左侧切换效果','options'=>array('slide'=>'滑动','fade'=>'淡出淡入','cube'=>'3D方块','coverflow'=>'3D滑入','flip'=>'3D翻转'),'default'=>'slide'),array('id'=>'right_top_effect','type'=>'select','title'=>'右上切换效果','options'=>array('slide'=>'滑动','fade'=>'淡出淡入','cube'=>'3D方块','coverflow'=>'3D滑入','flip'=>'3D翻转'),'default'=>'fade'),array('id'=>'right_bottom_effect','type'=>'select','title'=>'右下切换效果','options'=>array('slide'=>'滑动','fade'=>'淡出淡入','cube'=>'3D方块','coverflow'=>'3D滑入','flip'=>'3D翻转'),'default'=>'fade'),array('id'=>'autoplay','type'=>'switcher','title'=>'自动播放','default'=>true),array('id'=>'interval','type'=>'number','title'=>'播放间隔(秒)','default'=>4,'dependency'=>array('autoplay','==',true)),array('id'=>'show_info','type'=>'checkbox','title'=>'显示信息','inline'=>true,'options'=>array('show_author'=>'作者','show_date'=>'日期','show_category'=>'分类','show_tags'=>'标签'),'default'=>array('show_author','show_date','show_category')),array('id'=>'text_style','type'=>'fieldset','title'=>'文字样式','inline'=>true,'fields'=>array(array('id'=>'title_length','type'=>'number','title'=>'标题字数','default'=>30),array('id'=>'excerpt_length','type'=>'number','title'=>'摘要字数','default'=>50),array('id'=>'text_shadow','type'=>'switcher','title'=>'文字阴影','default'=>true))))));
    function zib_widget_new_carousel($args,$instance){if(!Zib_CFSwidget::show_class($instance))return;$cfg=array_merge(array('height'=>400,'right_width'=>300,'left_effect'=>'slide','right_top_effect'=>'fade','right_bottom_effect'=>'fade','autoplay'=>true,'interval'=>4,'show_info'=>array(),'text_style'=>array()),$instance);$show_cfg=array_flip($cfg['show_info']);$posts=array('left'=>nc_get_posts($cfg['left_posts']??'',5),'top'=>nc_get_posts($cfg['right_top_posts']??'',3),'bottom'=>nc_get_posts($cfg['right_bottom_posts']??'',3));if(!array_filter($posts))return;$id='nc-'.uniqid();$shadow=($cfg['text_style']['text_shadow']??true)?'text-shadow:1px 1px 2px rgba(0,0,0,0.8);':'';Zib_CFSwidget::echo_before($instance);echo'<div class="new-carousel-wrap" id="'.$id.'">';$areas=array('left'=>array('height'=>$cfg['height'],'class'=>'nc-left-wrap','pagination'=>true,'button'=>true,'effect'=>$cfg['left_effect'],'interval'=>$cfg['interval']*1000),'top'=>array('height'=>($cfg['height']-10)/2,'class'=>'nc-right-top-wrap','pagination'=>true,'button'=>false,'effect'=>$cfg['right_top_effect'],'interval'=>$cfg['interval']*1000+1000),'bottom'=>array('height'=>($cfg['height']-10)/2,'class'=>'nc-right-bottom-wrap','pagination'=>true,'button'=>false,'effect'=>$cfg['right_bottom_effect'],'interval'=>$cfg['interval']*1000+2000));if($posts['left']){echo'<div class="nc-left-wrap">';nc_render_slider($posts['left'],$areas['left'],$show_cfg,$cfg['text_style'],true);echo'</div>';}if($posts['top']||$posts['bottom']){echo'<div class="nc-right-wrap">';if($posts['top']){echo'<div class="nc-right-top-wrap">';nc_render_slider($posts['top'],$areas['top'],$show_cfg,$cfg['text_style'],false);echo'</div>';}if($posts['bottom']){echo'<div class="nc-right-bottom-wrap">';nc_render_slider($posts['bottom'],$areas['bottom'],$show_cfg,$cfg['text_style'],false);echo'</div>';}echo'</div>';}echo'</div><style>#'.$id.'{display:flex;gap:10px;height:'.$cfg['height'].'px;border-radius:8px;overflow:hidden}#'.$id.' .nc-left-wrap{flex:1;position:relative;border-radius:8px;overflow:hidden}#'.$id.' .nc-right-wrap{width:'.$cfg['right_width'].'px;display:flex;flex-direction:column;gap:10px}#'.$id.' .nc-right-top-wrap,#'.$id.' .nc-right-bottom-wrap{flex:1;position:relative;border-radius:8px;overflow:hidden}#'.$id.' .zib-slider{height:100%}#'.$id.' .new-swiper{height:100%;border-radius:8px;overflow:hidden}#'.$id.' .nc-right-top-wrap .swiper-pagination,#'.$id.' .nc-right-bottom-wrap .swiper-pagination{bottom:8px}#'.$id.' .nc-right-top-wrap .swiper-pagination-bullet,#'.$id.' .nc-right-bottom-wrap .swiper-pagination-bullet{width:6px;height:6px;margin:0 3px}#'.$id.' .swiper-slide::before{content:"";position:absolute;bottom:0;left:0;right:0;height:30%;background:linear-gradient(to top,rgba(0,0,0,0.5) 0%,transparent 100%);z-index:0;pointer-events:none}#'.$id.' .slide-text{z-index:2!important}#'.$id.' .slide-text .slide-title,#'.$id.' .slide-text .slide-desc{'.$shadow.'}#'.$id.' .post-meta{font-size:12px;opacity:0.9;margin-bottom:8px;'.$shadow.'}#'.$id.' .post-excerpt{font-size:13px;opacity:0.95;'.$shadow.'}#'.$id.' .nc-right-top-wrap .post-meta,#'.$id.' .nc-right-bottom-wrap .post-meta{font-size:10px;margin-bottom:4px}#'.$id.' .nc-right-top-wrap .post-excerpt,#'.$id.' .nc-right-bottom-wrap .post-excerpt{font-size:11px}@media(max-width:768px){#'.$id.'{flex-direction:column;height:auto}#'.$id.' .nc-left-wrap{height:200px}#'.$id.' .nc-right-wrap{width:100%;flex-direction:row}#'.$id.' .nc-right-top-wrap,#'.$id.' .nc-right-bottom-wrap{height:150px}}</style><script>jQuery(function($){setTimeout(function(){typeof new_swiper==="function"&&new_swiper();$(".swiper-container-initialized").each(function(){if(this.swiper)this.swiper.update()})},200)});</script>';Zib_CFSwidget::echo_after($instance);}
    function nc_get_posts($ids,$count){if($ids&&($ids=array_filter(array_map('trim',explode(',',$ids)),'is_numeric'))){return get_posts(array('post__in'=>$ids,'orderby'=>'post__in','numberposts'=>-1));}return get_posts(array('numberposts'=>$count,'orderby'=>'date'));}
    function nc_render_slider($posts,$area,$show_cfg,$text_cfg,$is_main){$slides=array();foreach($posts as $post){$text=nc_get_text($post->ID,$show_cfg,$text_cfg,$is_main);$slides[]=array('background'=>nc_get_image($post->ID,$is_main?'large':'medium'),'link'=>array('url'=>get_permalink($post->ID)),'text'=>array('title'=>$text['title'],'desc'=>$text['desc'],'text_align'=>'left-bottom','text_size_pc'=>$is_main?null:14,'text_size_m'=>$is_main?null:12));}zib_new_slider(array('class'=>'mb0','slides'=>$slides,'effect'=>$area['effect'],'autoplay'=>true,'interval'=>$area['interval'],'pc_height'=>$area['height'],'m_height'=>$is_main?200:150,'pagination'=>$area['pagination'],'button'=>$area['button'],'loop'=>true,'lazy'=>false));}
    function nc_get_image($id,$size){if($img=get_the_post_thumbnail_url($id,$size))return $img;if(($content=get_post_field('post_content',$id))&&preg_match('/<img[^>]+src=[\'"]([^\'"]+)[\'"][^>]*>/i',$content,$m))return $m[1];return function_exists('zib_get_thumbnail_url')?zib_get_thumbnail_url():ZIB_TEMPLATE_DIRECTORY_URI.'/img/thumbnail.svg';}
    function nc_get_text($id,$show_cfg,$text_cfg,$is_main){$title=get_the_title($id);$len=$text_cfg['title_length']??30;if(mb_strlen($title)>$len)$title=mb_substr($title,0,$len).'...';$info=array();if(isset($show_cfg['show_author'])&&($author=get_the_author_meta('display_name',get_post_field('post_author',$id))))$info[]=$author;if(isset($show_cfg['show_date']))$info[]=get_the_date('Y-m-d',$id);if(isset($show_cfg['show_category'])&&($cats=get_the_category($id)))$info[]=$cats[0]->name;if(isset($show_cfg['show_tags'])&&($tags=get_the_tags($id)))foreach(array_slice(wp_list_pluck($tags,'name'),0,2)as $tag)$info[]=$tag;$excerpt=get_the_excerpt($id);if(!$excerpt){$content=get_post_field('post_content',$id);$excerpt=wp_strip_all_tags($content);}$excerpt=wp_trim_words($excerpt,$is_main?($text_cfg['excerpt_length']??50):(($text_cfg['excerpt_length']??50)/2));$desc='';if($info)$desc.='<div class="post-meta">'.implode(' · ',$info).'</div>';if($excerpt)$desc.='<div class="post-excerpt">'.$excerpt.'</div>';return array('title'=>$title,'desc'=>$desc);}

     

    [/hidecontent]

     

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。