摘要：wordpress小工具的功能开发一直是被各位主题大佬所忽略的宝地，wordpress的核心重点除了主题和插件外，另一个…
wordpress小工具的功能开发一直是被各位主题大佬所忽略的宝地，wordpress的核心重点除了主题和插件外，另一个值得去挖掘的选项就是小工具，小工具的功能可以二次拓展和开发，是不可多得的网站功能拓展项的核心功能运用区域，今天大挖给大家分享一组可以运用wordpress小工具实现的轮播幻灯片功能，可以任意添加在主题的侧边栏位置，方便调整位置及自定义链接及图片，适合有开发基础的wordpresser使用和尝试，和大多数的功能增强一样，只需要把下面这段代码复制到wordpress主题的funionst.php文件中即可。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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>
<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
}
}
|
来源：http://www.wazhuti.com/2074.html
