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

件功能是必须的。

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

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

添加小部件功能

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

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

显示效果

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

深度阅读:

如何在filezilla的ftp中找到域名所对应的WordPress网站程序目录 WP花园作为上海专业的WordPress开发公司,已经为很多
wordpress主题制作开发实战教程3.12 – 创建一个page.php模板页面 创建一个page.php模板页面我们通过复制index.php文件来创建page.php文件,并作出一些调整1.创建一个php文件,命名为page.php2.复制index.php文件的所有php代码至page.php文件中3.在page.php中,找到并删除关于Th...
wordpress的网站设置与插件及主题之间的联系 许多wordpress站点只能使用一种主题。如果随意切换其他主题是否站点中的设置和数据就都消失了呢,答案是并不尽然。那么具体应该会有哪些设置丢失呢?小编今天就带你梳理一下wordpress 默认设置 2.wordpress wordpress默认设置为后台基本设置中的各项设置 如下图所示...
wordpress主题制作开发实战教程3.9 – 新建Sidebar.php文件 新建Sidebar.php文件 这里将会涉及小工具区域,具体的步骤将在之后描述。1.在主题模板中创建一个php文件2.打开你的Index.php文件,剪切你的sidebar文件,该文件通常位于标签下方。在我们的主题中,请将以下代码复制。
WordPress主题制作开发实战教程4.4- 图片功能 有时我们需要在文章中添加一些图片,让我们更好的理解,并且使得文章更美观,所以在主题中添加图片功能也是必须的添加图片功能 首先我们需要添加图片功能,然后才能使用。打开function.php文件在php结束标签?>之前添加如下代码: add_theme_sup...
wordpress主题制作开发实战教程3.1(1)- 主题基础 在本章节中,我们将学习到WordPress的一些主题基础主题基础主要有:1.WordPress的模块文件知识2.模板文件工作流程以及优先级3.主题里的基本循环  主题基础 Wordpress主题包含了许多文件,其中有模板页面。模板页面是层级结构,...
WordPress主题制作开发实战教程4.2 – 导航栏功能 网站中使用导航栏是为了让访客能够清晰明了地找到网站相应的板块内容。在
wordpress主题制作开发实战教程3.8 – 新建Header.php文件 新建Header.php文件 1.在主题下创建一个名为Header.php的文件2.打开你的Index.php文件,剪切
标签或

发表评论

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

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

wechat logo