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

件功能是必须的。

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

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

添加小部件功能

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

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.9 – 新建Sidebar.php文件 新建Sidebar.php文件 这里将会涉及小工具区域,具体的步骤将在之后描述。1.在主题模板中创建一个php文件2.打开你的Index.php文件,剪切你的sidebar文件,该文件通常位于标签下方。在我们的主题中,请将以下代码复制。
WordPress主题制作教程2.6-WordPress的条件标签(二) 页面模板  is_page_template()检测是否使用了页面模板 is_page_template(‘post.php’)检测是否使用页面模板‘post’,页面模板与其他标签有所不同,用户需要使用文件名(如post.php或my...
wordpress主题制作开发实战教程3.1(2)- 主题制作基本流程及一些小功能 在学习了上一节的WordPress主题基础之后,在本章节我们将学习主题制作的基本流程以及一些小功能。基本流程:1.创建主题文件夹2.创建主题模板文件3.模板文件引入css小功能:显示作者,时间,评论数量等 主题制作基本流程 创建一个主题,首先我们需要的是一...
WordPress主题制作教程2.3-WordPress 模板标签 主题中使用模板标签从数据库中检索内容,内容可以是博客标题或侧边栏的内容。模板标签是将内容放入主题的首选方法,因为:他们可以打印动态内容; 他们可以用于多个主题文件; 他们可以将主题分为更小,更易理解的部分。    什么是模板标签?  ...
WordPress主题制作开发实战教程5 – 调试和验证 在主题制作过程中,我们可能会出现许多的错误。所以我们需要反复调试,直到达到我们所满意的效果。本章节我们将学习调试和验证的方法及调试工具。工作流程在文件中添加一些代码 在浏览器上查看是否美观 在不同的浏览器上验证 如果没完成则修改代码直至完成 完成则...
如何处理wordpress中JavaScript文件冲突问题 在编写WordPress主题中,如果第三方提供的HTML/JS/CSS文章中,包含了很多.js文件,在引入这些JavaScript文件过程中会这样那样的错误,比如什么“$ is not a function”之类的,这时候可以通过以下方式来一一排查。 1.正确在functi...
WordPress主题制作开发实战教程4.1- 站点设置,固定链接设置 在本章节中,我们将带领大家去学习WordPress主题的站点设置,固定链接设置 站点设置 有时我们需要将我们网站的一些基本信息在网站上显示出来,比如网站标题,网站介绍,邮箱地址等,让人更加的了解这个网站,所以我们需要添加站点设置功能。在后台设置网站信息,在前台页面显示则需要在想显示的页面...
如何在filezilla的ftp中找到域名所对应的WordPress网站程序目录 WP花园作为上海专业的WordPress开发公司,已经为很多客户开发了WordPress互联网项目,我们的高速云服务器上会有很多不同的客户站点项目,这时候作为项目管理者,如果想了解具体某个项目放在服务器的什么地方,应该如何找到呢?【举个例子】我们的某个金融客户www.abc.com的...

发表评论

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.