教你纯代码实现wordpress主题幻灯片轮播图片功能小工具-WordPress主题

摘要：wordpress小工具的功能开发一直是被各位主题大佬所忽略的宝地，wordpress的核心重点除了主题和插件外，另一个...

wordpress小工具的功能开发一直是被各位主题大佬所忽略的宝地，wordpress的核心重点除了主题和插件外，另一个值得去挖掘的选项就是小工具，小工具的功能可以二次拓展和开发，是不可多得的网站功能拓展项的核心功能运用区域，今天大挖给大家分享一组可以运用wordpress小工具实现的轮播幻灯片功能，可以任意添加在主题的侧边栏位置，方便调整位置及自定义链接及图片，适合有开发基础的wordpresser使用和尝试，和大多数的功能增强一样，只需要把下面这段代码复制到wordpress主题的funionst.php文件中即可。

class Yu_banner extends WP_Widget { //继承了 WP_Widget 这个类来创建新的小工具(Widget)  
    function Yu_banner() {  
        // 主要内容方法 
        $widget_ops = array(
              'description' => '添加幻灯片'
          );
        $control_ops = array(
          'width' =>400,
          'height' =>300
        );
       parent::WP_Widget(false,$name='Yu幻灯片',$widget_ops,$control_ops);
        //parent::直接使用父类中的方法  
        //$name 这个小工具的名称,  
        //$widget_ops 可以给小工具进行描述等等。  
        //$control_ops 可以对小工具进行简单的样式定义等等。  
    }  
    function form($instance) {  
         // 给小工具(widget) 添加表单内容
         $nav1_link = $instance['nav1_link'];
         $nav1_title = $instance['nav1_title'];
 
         $nav2_link = $instance['nav2_link'];
         $nav2_title = $instance['nav2_title'];
 
         $nav3_link = $instance['nav3_link'];
         $nav3_title = $instance['nav3_title'];
 
         $nav4_link = $instance['nav4_link'];
         $nav4_title = $instance['nav4_title'];
 
         ?>
          <label>
            <h4>幻灯片1</h4>
            <input type="text" id="<?php echo $this->get_field_id('nav1_link'); ?>" name="<?php echo $this->get_field_name('nav1_link'); ?>"
            value="<?php echo esc_attr($nav1_link); ?>"/>
          
            <span>*幻灯片链接</span>
 
            <input type="text" id="<?php echo $this->get_field_id('nav1_title'); ?>" name="<?php echo $this->get_field_name('nav1_title'); ?>"
            value="<?php echo esc_attr($nav1_title); ?>"/>
            <span>*幻灯片标题</span>
          </label>
 
          <label>
            <h4>幻灯片2</h4>
            <input type="text" id="<?php echo $this->get_field_id('nav2_link'); ?>" name="<?php echo $this->get_field_name('nav2_link'); ?>"
            value="<?php echo esc_attr($nav2_link); ?>"/>
       
            <span>*幻灯片链接</span>
 
            <input type="text" id="<?php echo $this->get_field_id('nav2_title'); ?>" name="<?php echo $this->get_field_name('nav2_title'); ?>"
            value="<?php echo esc_attr($nav2_title); ?>"/>
            <span>*幻灯片标题</span>
          </label>
 
          <label>
            <h4>幻灯片3</h4>
            <input type="text" id="<?php echo $this->get_field_id('nav3_link'); ?>" name="<?php echo $this->get_field_name('nav3_link'); ?>"
            value="<?php echo esc_attr($nav3_link); ?>"/>
           
            <span>*幻灯片链接</span>
 
            <input type="text" id="<?php echo $this->get_field_id('nav3_title'); ?>" name="<?php echo $this->get_field_name('nav3_title'); ?>"
            value="<?php echo esc_attr($nav3_title); ?>"/>
          
            <span>*幻灯片标题</span>
          </label>
 
          <label>
            <h4>幻灯片4</h4>
            <input type="text" id="<?php echo $this->get_field_id('nav4_link'); ?>" name="<?php echo $this->get_field_name('nav4_link'); ?>"
            value="<?php echo esc_attr($nav4_link); ?>"/>
            <span>*幻灯片链接</span>
 
            <input type="text" id="<?php echo $this->get_field_id('nav4_title'); ?>" name="<?php echo $this->get_field_name('nav4_title'); ?>"
            value="<?php echo esc_attr($nav4_title); ?>"/>
            <span>*幻灯片标题</span>
          </label>
 
          <?php wp_enqueue_media(); ?>
          <script>   
          jQuery(document).ready(function(){   
          var ashu_upload_frame;   
          var value_id;   
          jQuery('.ashu_upload_button').live('click',function(event){   
              value_id =jQuery( this ).attr('id');       
              event.preventDefault();   
              if( ashu_upload_frame ){   
                  ashu_upload_frame.open();   
                  return;   
              }   
              ashu_upload_frame = wp.media({   
                  title: 'Insert image',   
                  button: {   
                      text: 'Insert',   
                  },   
                  multiple: false   
              });   
              ashu_upload_frame.on('select',function(){   
                  attachment = ashu_upload_frame.state().get('selection').first().toJSON();   
                  //jQuery('#'+value_id+'_input').val(attachment.url).trigger('change');   
                  jQuery('input[name='+value_id+']').val(attachment.url).trigger('change');   
              });   
                 
              ashu_upload_frame.open();   
          });   
          });   
    </script>
 
         <?php
 
 
    }  
    function update($new_instance, $old_instance) {  
         // 进行更新保存  
        $instance = $old_instance;
        $instance[ 'nav1_link' ] = strip_tags( $new_instance[ 'nav1_link' ] );
        $instance[ 'nav1_title' ] = strip_tags( $new_instance[ 'nav1_title' ] );
 
        $instance[ 'nav2_link' ] = strip_tags( $new_instance[ 'nav2_link' ] );
        $instance[ 'nav2_title' ] = strip_tags( $new_instance[ 'nav2_title' ] );
 
        $instance[ 'nav3_link' ] = strip_tags( $new_instance[ 'nav3_link' ] );
        $instance[ 'nav3_title' ] = strip_tags( $new_instance[ 'nav3_title' ] );
 
        $instance[ 'nav4_link' ] = strip_tags( $new_instance[ 'nav4_link' ] );
        $instance[ 'nav4_title' ] = strip_tags( $new_instance[ 'nav4_title' ] );
        return $instance;  
    }
 
    function widget($args, $instance) {  
        // 输出显示在页面上  
         $nav1_link = $instance['nav1_link'];
         $nav1_title = $instance['nav1_title'];
 
         $nav2_link = $instance['nav2_link'];
         $nav2_title = $instance['nav2_title'];
 
         $nav3_link = $instance['nav3_link'];
         $nav3_title = $instance['nav3_title'];
 
         $nav4_link = $instance['nav4_link'];
         $nav4_title = $instance['nav4_title'];
 
        ?>
          <div id="zSlider" >
            <div id="picshow">
    <div id="picshow_img">
        <ul>
<li style="display: list-item;"><a href="/life/361.html" target="_blank">
                <img src="<?php echo $nav1_link;?>" alt="<?php echo $nav1_title;?>"></a></li>
<li style="display: list-item;"><a href="/life/394.html" target="_blank">
                <img src="<?php echo $nav2_link;?>" alt="<?php echo $nav2_title;?>"></a></li>
<li style="display: list-item;"><a href="/life/364.html" target="_blank">
                <img src="<?php echo $nav3_link;?>" alt="<?php echo $nav3_title;?>"></a></li>
<li style="display: list-item;"><a href="/gear/rs/320.html" target="_blank">
                <img src="<?php echo $nav4_link;?>" alt="<?php echo $nav4_title;?>"></a></li>
 
 
 
        </ul>
    </div>
</div>
<div id="select_btn">
    <ul>
        <li class="current"></li><li class=""></li><li class=""></li><li class=""></li>
    </ul>
</div>
            <div class="focus-bg-title"><div id="focus-left" class="arrow-left" onmouseover="IFocuse(this,true)" onmouseout="IFocuse(this,false)"></div>
            <div id="focus-center" class="focus-title">
            <div style="float:left;width:580px;padding-left:10px;font-size:18px;" id="focus-tl-s"></div>
            <div style="float:right;width:200px;"></div>
            </div>
            <div id="focus-right" class="arrow-right"></div></div>
            </div>
        <?php
    }  
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

class Yu_banner extends WP_Widget { //继承了 WP_Widget 这个类来创建新的小工具(Widget)

function Yu_banner() {

// 主要内容方法

$widget_ops = array(

'description' => '添加幻灯片'

);

$control_ops = array(

'width' =>400,

'height' =>300

);

parent::WP_Widget(false,$name='Yu幻灯片',$widget_ops,$control_ops);

//parent::直接使用父类中的方法

//$name 这个小工具的名称,

//$widget_ops 可以给小工具进行描述等等。

//$control_ops 可以对小工具进行简单的样式定义等等。

}

function form($instance) {

// 给小工具(widget) 添加表单内容

$nav1_link = $instance['nav1_link'];

$nav1_title = $instance['nav1_title'];

$nav2_link = $instance['nav2_link'];

$nav2_title = $instance['nav2_title'];

$nav3_link = $instance['nav3_link'];

$nav3_title = $instance['nav3_title'];

$nav4_link = $instance['nav4_link'];

$nav4_title = $instance['nav4_title'];

<label>

<input type="text" id="<?php echo $this->get_field_id('nav1_link'); ?>" name="<?php echo $this->get_field_name('nav1_link'); ?>"

value="<?php echo esc_attr($nav1_link); ?>"/>

<span>*幻灯片链接</span>

<input type="text" id="<?php echo $this->get_field_id('nav1_title'); ?>" name="<?php echo $this->get_field_name('nav1_title'); ?>"

value="<?php echo esc_attr($nav1_title); ?>"/>

<span>*幻灯片标题</span>

</label>

<label>

<input type="text" id="<?php echo $this->get_field_id('nav2_link'); ?>" name="<?php echo $this->get_field_name('nav2_link'); ?>"

value="<?php echo esc_attr($nav2_link); ?>"/>

<span>*幻灯片链接</span>

<input type="text" id="<?php echo $this->get_field_id('nav2_title'); ?>" name="<?php echo $this->get_field_name('nav2_title'); ?>"

value="<?php echo esc_attr($nav2_title); ?>"/>

<span>*幻灯片标题</span>

</label>

<label>

<input type="text" id="<?php echo $this->get_field_id('nav3_link'); ?>" name="<?php echo $this->get_field_name('nav3_link'); ?>"

value="<?php echo esc_attr($nav3_link); ?>"/>

<span>*幻灯片链接</span>

<input type="text" id="<?php echo $this->get_field_id('nav3_title'); ?>" name="<?php echo $this->get_field_name('nav3_title'); ?>"

value="<?php echo esc_attr($nav3_title); ?>"/>

<span>*幻灯片标题</span>

</label>

<label>

<input type="text" id="<?php echo $this->get_field_id('nav4_link'); ?>" name="<?php echo $this->get_field_name('nav4_link'); ?>"

value="<?php echo esc_attr($nav4_link); ?>"/>

<span>*幻灯片链接</span>

<input type="text" id="<?php echo $this->get_field_id('nav4_title'); ?>" name="<?php echo $this->get_field_name('nav4_title'); ?>"

value="<?php echo esc_attr($nav4_title); ?>"/>

<span>*幻灯片标题</span>

</label>

<?php wp_enqueue_media(); ?>

jQuery(document).ready(function(){

var ashu_upload_frame;

var value_id;

jQuery('.ashu_upload_button').live('click',function(event){

value_id =jQuery( this ).attr('id');

event.preventDefault();

if( ashu_upload_frame ){

ashu_upload_frame.open();

return;

}

ashu_upload_frame = wp.media({

title: 'Insert image',

button: {

text: 'Insert',

multiple: false

});

ashu_upload_frame.on('select',function(){

attachment = ashu_upload_frame.state().get('selection').first().toJSON();

//jQuery('#'+value_id+'_input').val(attachment.url).trigger('change');

jQuery('input[name='+value_id+']').val(attachment.url).trigger('change');

});

ashu_upload_frame.open();

});

</script>

<?php

}

function update($new_instance, $old_instance) {

// 进行更新保存

$instance = $old_instance;

$instance[ 'nav1_link' ] = strip_tags( $new_instance[ 'nav1_link' ] );

$instance[ 'nav1_title' ] = strip_tags( $new_instance[ 'nav1_title' ] );

$instance[ 'nav2_link' ] = strip_tags( $new_instance[ 'nav2_link' ] );

$instance[ 'nav2_title' ] = strip_tags( $new_instance[ 'nav2_title' ] );

$instance[ 'nav3_link' ] = strip_tags( $new_instance[ 'nav3_link' ] );

$instance[ 'nav3_title' ] = strip_tags( $new_instance[ 'nav3_title' ] );

$instance[ 'nav4_link' ] = strip_tags( $new_instance[ 'nav4_link' ] );

$instance[ 'nav4_title' ] = strip_tags( $new_instance[ 'nav4_title' ] );

return $instance;

}

function widget($args, $instance) {

// 输出显示在页面上

$nav1_link = $instance['nav1_link'];

$nav1_title = $instance['nav1_title'];

$nav2_link = $instance['nav2_link'];

$nav2_title = $instance['nav2_title'];

$nav3_link = $instance['nav3_link'];

$nav3_title = $instance['nav3_title'];

$nav4_link = $instance['nav4_link'];

$nav4_title = $instance['nav4_title'];

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</div>

</div>

<?php

}

教你纯代码实现wordpress主题幻灯片轮播图片功能小工具

wordpress后台常用提示信息大全

WPJAM BASIC插件报错提示：if($unread_count = $wpjam_topic_messages[‘unread_count’]){

常用的360搜索好搜代码/百度搜索代码/淘宝搜索代码/

wordpress调用相同文章形式的内容列表

WordPress显示当前文章分类下的最新文章

wordpress文章页面同分类下文章列表调用方法

通过css+js为wordpress主题添加选项卡切换效果

三种常用的wordpress主题模板引用方式

作者: 大挖酱

推荐文章列表

WordPress
网站SEO

WordPress
主题定制

WordPress
仿站

WordPress
建站教程

最新文章

热门文章排名

联系作者Q: 8413708 WX: zdmin7

支付宝扫一扫

微信扫一扫

教你纯代码实现wordpress主题幻灯片轮播图片功能小工具

作者: 大挖酱

推荐文章列表

WordPress网站SEO

WordPress主题定制

WordPress仿站

WordPress建站教程

最新文章

热门文章排名

联系作者Q: 8413708 WX: zdmin7

支付宝扫一扫

微信扫一扫

WordPress
网站SEO

WordPress
主题定制

WordPress
仿站

WordPress
建站教程