wordpress主题制作探索之—使用小工具

小工具就是widget,可以理解为小块的功能集/组件，可以自由的选择一些widget添加到自定义的位置，在这里我以cnblogs.com 上的某个博客模板版面为例：



左边的一整竖通常称为侧边栏，里面有 导航，日历，公告，搜索，常用链接，随笔分类 这6个模块，在wordpress就是widget了。这些widget可以在后台自由的组合和删除。从而形成独有的侧边栏内容。

WordPress的侧边栏可以定义好多个，虽然名称叫侧边栏，但是可以加在首页底部，也可以加在中部和顶部，所以并不局限于一定要加在左边/右边。这种机制给主题制作带来了很大的方便，比如像下面这种版面：



中间区域中有3个模块分别是新闻动态，公司简介和精品展示。这种版面在早期的企业网站中应用的比较多，还有些版面会放一组滚动的产品或者是产品的幻灯切换。 对于这种版面我们完全可以在将中间区域定义成一个sidebar，然后通过后台将不同的模块放到这个sidebar里面。这样类似的版面就都可以用这种形式实现了。

下面分享下具体的实现步骤：

前提条件： 先写好页面的html结构和css代码，可以是静态的，便于下面直接使用。

一、 定义sidebar

在functions.php中添加下面代码：

register_sidebar(array(

'name'          => ‘首页中部区域’,

'id'            => ‘home2’

'before_widget' => '<div class="widget %2$s">',

'after_widget'  => '</div>',

'before_title'  => '<h3>',

'after_title'   => '</h3>'

));

Name就是中文名称，尽量简洁一目了然。 id尽量定义英文的，是在代码中使用的。

Before_widget 和 after_widget就是围绕这个sidebar的外部标签定义。看你的主题的html结构改就行了。

二、 在模板中调用sidebar

在functions.php中添加

<?php  dynamic_sidebar('home2'); ?>

，这段代码的意思是显示id是home2的sidebar,这里要加在模板中要显示的位置，比如上面提到的中间区域

三、 定义widget

自定义的Widget要继承WP_Widget类，然后实现function widget( $args, $instance ) {}和function form($instance) {} 两个方法。其中widget函数中要定义最终输出的html结构代码。而form函数要定义后台表单的html结构。

以

为例，这个就是form函数要定义的一个表单，用于输入一些值到数据库中。

以

为例，这个就是widget函数要定义的前台页面html结构。

下面添加具体的代码，在主题目录新建一个widget-about1.php，然后写上代码：

<?php

class widget_ui_about1 extends WP_Widget {

function widget_ui_about1() {

$widget_ops = array( 'classname' => 'widget_ui_about1', 'description' => '显示一张企业图片+关于我们' );

$this->WP_Widget( 'widget_ui_about1', '关于我们1号样式[首页区]', $widget_ops );

}

function widget( $args, $instance ) {
extract( $args );

$title = apply_filters('widget_name', $instance['title']);

$pic = $instance['pic'];

$code = $instance['code'];

echo $before_widget;

echo '<div class="panel hc-panel-2 pull-left c-2"><div class="panel-heading"><h3 class="panel-title">'.$title.'</h3><
3ff0
;a href="#" class="more">更多</a></div><div class="panel-body"><div class="thumbnail"><img src="'. $pic .'"><div class="caption"><p class="fstyle3">'. $code .'</p></div></div></div></div>';

echo $after_widget;

}

function form($instance) {

$defaults = array(

'title' => '公司介绍',

'pic' => 'http://www.wpst.cc/wp-content/themes/stion/img2/index_22_03.jpg',

'code' => '这里是介绍文字',

);

$instance = wp_parse_args( (array) $instance, $defaults );

?>

<p>
<label>
标题：
<input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $instance['title']; ?>" class="widefat" />
</label>
</p>

<p>
<label>
公司图片：
<input id="<?php echo $this->get_field_id('pic'); ?>" name="<?php echo $this->get_field_name('pic'); ?>" type="text" value="<?php echo $instance['pic']; ?>" class="widefat" />

</label>

</p>

<p><label>
公司介绍：
<textarea id="<?php echo $this->get_field_id('code'); ?>" name="<?php echo $this->get_field_name('code'); ?>" class="widefat" rows="12" style="font-family:Courier New;"><?php echo $instance['code']; ?></textarea>

</label>
</p>

<?php

}

}

2. 在functions.php中加载定义的widget并注册。

include 'widget-about1.php'; //加载这个php文件
register_widget( 'widget_ui_about1' ); //注册这个widget, 这里要填类名

四、后台使用

1. 进入后台，点击

。

2. 找到

。然后点击添加小工具，

3. 选择

点下+号就加这个widget添加上去了。

4. 填些内容

，比如介绍和标题。完成后点保存和发布就可以了。

五、添加widget的css代码

最后把css定义放到主题的style.css中，这样就可以显示了。

查看本文最新版本，请访问: wordpress主题制作探索之—使用小工具