小部件可以让我们的主题拥有更多的小功能,比如搜索,文章归档等,使用起来非常实用,所以在网站建设中使用小部

件功能是必须的。

小部件可以从网站的主题设置里面添加,无需编写代码。

小部件主要出现在侧边栏和脚部,你也可以在其他地方使用。

添加小部件功能

首先我们需要添加小部件功能

1在function.php里编写侧边栏

打开function.php文件

添加代码

function osmag_widgets_init() {
 register_sidebar (array(
 'name' => __('Sidebar','osmag'),
 'id' => "sidebar-widget-area",
 'before_widget' => '<li id="%1$s" class="widget %2$s">',
 'after_widget' => '</li>',
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => '</h2>' )
 );
 register_sidebar (array(
 'name' => __('Left Footer','osmag'),
 'id' => "footer-left-widget-area",
 'before_widget' => '<li id="%1$s" class="widget %2$s">',
 'after_widget' => '</li>',
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => '</h2>' )
 );
 register_sidebar (array(
 'name' => __('Right Footer','osmag'),
 'id' => "footer-right-widget-area",
 'before_widget' => '<li id="%1$s" class="widget %2$s">',
 'after_widget' => '</li>',
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => '</h2>' )
 );
}
add_action('init', 'osmag_widgets_init');

代码显示

后台显示效果

添加了Sidebar Left footer right footer三个小工具

在侧边栏添加小部件区域

我们已经添加了小部件功能,现在就运用它。

打开主题的siderbar.php文件

删除以前所有代码后添加如下代码:

<aside class="sidebar right third">
<?php if ( is_active_sidebar( 'sidebar-widget-area' ) ) : ?>
 <div class="bdr grd-vt-main rnd shdw-centered">
 <?php dynamic_sidebar( 'sidebar-widget-area' ); ?>
 </div>
<?php endif; ?>
</aside>

未添加时效果

添加后效果

在脚部添加小部件区域

打开主题的footer.php文件

在文件中添加如下代码:

<aside class="footer first">
	<?php if ( is_active_sidebar( 'footer-left-widget-area' ) ) : ?>
			<?php dynamic_sidebar( 'footer-left-widget-area' ); ?>
	<?php endif; ?>
	</aside>

	<aside class="footer second">
	<?php if ( is_active_sidebar( 'footer-right-widget-area' ) ) : ?>
			<?php dynamic_sidebar( 'footer-right-widget-area' ); ?>
	<?php endif; ?>
	</aside>

未添加时效果

添加后效果

添加侧边栏小部件

在后台仪表盘—->appearance—->widgets—->sidebar

显示效果

专业网站开发网页设计公司

深度阅读:

wordpress主题制作开发实战教程3.1(1)- 主题基础 在本章节中,我们将学习到WordPress的一些主题基础主题基础主要有:1.WordPress的模块文件知识2.模板文件工作流程以及优先级3.主题里的基本循环  主题基础 Wordpress主题包含了许