怎样在wordpress网站添加小工具

知道91 | WordPress | 2014-03-19 | 阅读:11000

wordpress 默认主题的小工具使用非常方面,可以很有效的完成wordpress网站内容的显示控制,当你开发自己的wordpress主题的时候你就可能需要更多的小工具,不仅仅是显示在侧边栏,有可能是显示在网站的header,那么我们怎样添加网站的小工具呢,下面我们就根据图文教程来一步步学习。

添加小工具的显示区域

一般来说我们的wordpress网站的小工具都是显示在侧边栏的,但是你也可以显示在网页的header、footer或者其他任何页面,要做到这些你需要修改两个文件。一个文件是主题下面的function.php文件,另一个文件是小工具所要放的地方,例如你想把小工具放在网站的尾部(footer),那么就需要修改footer.php文件,我们就显示在网站的尾部(footer.php)添加一个小工具区域。控制wordpress小工具显示区域的函数叫做:dynamic_sidebar,它主要是用于侧边栏的,但是你也可以使用它将小工具放在任何页面上(header.php、footer.php、single.php、category.php等等)。

步骤一:修改function.php文件

打开function.php文件,搜索“register_sidebar”,你可以发些和下面的代码相似的代码:

function twentytwelve_widgets_init() {
 register_sidebar( array(
 	'name' => __( 'Main Sidebar', 'twentytwelve' ),
 	'id' => 'sidebar-1',
 	'description' => __( 'Appears on posts and pages except the optional Front Page template, which has its own widgets', 'twentytwelve' ),
 	'before_widget' => '<aside id="%1$s" class="widget %2$s">',
 	'after_widget' => '</aside>',
 	'before_title' => '<h3 class="widget-title">',
 	'after_title' => '</h3>',
 ) );
 }

上面说过Register_sidebar 函数控制了每个侧边栏或小部件区域,我们如果要添加wordpress小工具的区域,就可以像下面这样修改代码:

function twentytwelve_widgets_init() {
 	register_sidebar( array(
 		'name' => __( 'Main Sidebar', 'twentytwelve' ),
 		'id' => 'sidebar-1',
 		'description' => __( 'Appears on posts and pages except the optional Front Page template, which has its own widgets', 'twentytwelve' ),
 		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
 		'after_widget' => '</aside>',
 		'before_title' => '<h3 class="widget-title">',
 		'after_title' => '</h3>',
 	) );
 	register_sidebar(array(
 		'name' => __('Bottom Left', 'twentytwelve'),
 		'id' => 'bottom-left-widget-area',
 		'before_widget' => '',
 		'before_title' => '<h3 class="widget-title">',
 		'after_title' => '</h3>',
 		'after_widget' => ''
 		));
 }

注意参数name,分别代表了小工具区域的名字"Bottom Left"和主题的名字twentytwelve。

步骤二:编辑footer.php文件

在footer.php中找到你需要放置小工具的地方,然后添加下面的代码

 <div id="top-right">
 <?php dynamic_sidebar('bottom-left-widget-area'); ?>
 </div>

bottom-left-widget-area就是第一步中的小工具区域的id("bottom-left-widget-area"),现在保存这两个文件,打开wordpress的后台,在小工具页面中就会看到一个新的小工具区域了。