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

件功能是必须的。

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

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

添加小部件功能

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

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主题制作教程2.1-WordPress分类目录 WordPress中有很多不同类型的内容,除了默认的Post Types之外,您还可以创建自定义分类目录,所有分类目录存储在同一个地方,在wp_posts数据库表。    默认分类目录  有五种默认的Post Types可供用户使用或或者WordPress安...
WordPress主题制作教程2.2-WordPress 主题文件 虽然WordPress主题只需要两个文件(index.php和style.css),它们通常由许多文件组成,本节将向您展示如何整理文件。    主题文件和文件结构  默认的二十个主题是主题开发最好的例子。  assets - css ...
WordPress主题制作教程2.3-WordPress 模板标签 主题中使用模板标签从数据库中检索内容,内容可以是博客标题或侧边栏的内容。模板标签是将内容放入主题的首选方法,因为:他们可以打印动态内容; 他们可以用于多个主题文件; 他们可以将主题分为更小,更易理解的部分。    什么是模板标签?  ...
WordPress主题制作教程2.4-WordPress主题功能 许多wordpress新手在进行wordpress主题制作时总会遇到这样的问题,什么是WordPress主题功能,怎样去修改它。functions.php文件是您向WordPress主题添加功能的地方。它用于连接WordPress的核心功能,使您的主题更具模块化,扩展性和功能性。如果你想学习...
WordPress主题制作教程2.5-WordPress的CSS和JavaScript 在创建主题时,当你将文件主题启用后,你会发现页面中的所有css/js代码加载失败,如下图所示。这是由于wordpress本身加载样式表/js文件有它自己的规则。 下面WP花园洋葱将带领大家使用标准的WordPress方法加载脚本和样式表。向WordPress添加脚本和样式非常简单。你...
WordPress主题制作教程2.6-WordPress的条件标签(一) 很多WordPress新手不懂如何根据当前页面匹配的条件,在模板文件中使用条件标签来更改内容的显示。条件标签通常使用if else条件语句。改代码首先检查语句的真假,如果发现语句为真,则执行第一组代码,如果语句假的,则跳过第一组代码,直接执行第二组代码例如,下面这段代码:&n...
WordPress主题制作教程2.6-WordPress的条件标签(二) 页面模板  is_page_template()检测是否使用了页面模板 is_page_template(‘post.php’)检测是否使用页面模板‘post’,页面模板与其他标签有所不同,用户需要使用文件名(如post.php或my...
wordpress主题制作开发实战教程3.7 – 在模板文件中分解代码 目前我们的主题已经步入循环,现在需要将主题分解至各个模板文件,以确保主题所有部分的编辑可用。这里有一个好的规则建议:首先,避免重复的标记其次,懂得标记独一无二的代码标签,使其仅仅出现在特殊的页面,比如首页 Header.php、Footer.php、...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

wechat logo