Piklist入门教程十二:Widgets应用

用Piklist做个widgets小工具是很方便快捷,你在WordPress写少量代码就可以制作出强大的widgets。本教程,我们创建一个widgets,包含select,text和colorpiker控件。

1.首先,在piklist parts中的widgets目录下新建两个php文件,注意文件名要:输出页为widgetName.php,设置页为widgetName-form.php,记住widgetName名一定要对应,这样两个输出和设置页才会关联!
widget_file

2.假如你的是自己开发的主题,请在functions.php里看看注册了widgets没有,如果没以请拷贝下面代码到你的主题的functions.php中,要是你安装的主题已经有,就可以直接把widget拖到右边的sidebar中,当然可以自己注册一个来区分管理,更多详细的请参考wordpress手册 http://codex.wordpress.org/Widgets_API

function my_widgets_init() {
    register_sidebar( array(
        'name' => 'My Sidebar',
        'id' => 'my_sidebar',
        'before_widget' => '<div>',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="test">',
        'after_title' => '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_widgets_init' );

3.登陆你的后台,打开appearance->widgets,顺便把piklist开发的插件的widget也拖到这个sidebar上,如下图:

mywidgets
4.设置页加上所要的控件,widget-demo-form.php全部代码:(此文件不是必须)

<?php

piklist('field', array(
    'type' => 'text'
    ,'field' => 'widget_text'
    ,'label' => 'Title'
    ,'description' => 'Field Description'
    ,'value' => 'Default text'
));

piklist('field', array(
    'type' => 'select'
    ,'field' => 'widget_select'
    ,'label' => 'Select box'
    ,'description' => 'Choose from the dropdown.'
    ,'choices' => array(
        'option1' => 'Option 1'
        ,'option2' => 'Option 2'
        ,'option3' => 'Option 3'
        )
));

piklist('field', array(
    'type' => 'colorpicker'
    ,'field' => 'widget_colorpicker'
    ,'label' => 'Choose a color'
    ,'value' => '#aee029'
    ,'description' => 'Click in the box to select a color.'
));

5.设置页加上所要的控件,widget-demo.php全部代码:(此文件必须要有)

<?php
/*
Title: MyDemoWidget
Description: A description of what my widget does
*/

echo $before_widget;

echo $before_title;

echo $settings['widget_text'];

echo $after_title;

echo $settings['widget_select'];

echo $settings['widget_colorpicker'];

echo $after_widget;

6.记得在后台你的widget上先选中要的widget再保存一下数据。

widget_sel
7.最后前端sidebar.php输出我们自定义的widget,代码如下:

<?php if ( ! dynamic_sidebar('my_sidebar') ) : ?>
<!--order code-->
<?php endif; ?>
文章分类 Piklist, 经验分享 标签: ,

发表评论