蓝蚂蚁工作室:wordpress建站,二次开发,主题修改,仿站等网站地图 | 联系我们

蓝蚂蚁工作室

高性能云服务器就选阿里云
当前位置: 首页 > 教程资料 > wordpress教程 > 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'); ?>

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

 

三、 定义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><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, 这里要填类名

 

四、后台使用

进入后台,点击 。找到

然后点击添加小工具,之后选择点下+号就加这个widget添加上去了。

下面还要填些内容。完成后点保存和发布就可以了。

 
五、添加widgetcss代码

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


本文地址http://www.lmygzs.com/archives/1017.html

版权说明:如非注明,本站文章均为 蓝蚂蚁工作室 原创,转载请注明出处和附带本文链接。

模板分类
联系我们
推荐内容
扫一扫关注我们,微信号:lmywzgzs