WordPress多区域添加widget小工具

0612月

WordPress多区域添加widget小工具

近期用了个简单版本的wordpress模板，想在footer里面也添加一个可以自己添加widget小工具的功能，在网上查到了这篇文章，试一下，很管用的。

WordPress的Widget小工具是个非常实用的功能，它让非技术型WordPress用户也可以根据自己对版面的需求轻松定制主题，WordPress无数的widgets让用户得以尽情发挥自己的创意。在很多人的意识里，widget就是出现在侧边栏的小工具，不过实际上它可以出现在主题的任何地方。这篇文章我们就来看一下怎样用简单的步骤让主题的其它版块也支持widget。最后还会送上几个widget使用技巧。

第一步

在当前主题的functions.php文件里添加下面这段代码：

if (function_exists('register_sidebar')) {

	register_sidebar(array(
		'name' => 'Widgetized Area',
		'id'   => 'widgetized-area',
		'description'   => 'This is a widgetized area.',
		'before_widget' => '<div id="%1$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));

}

第一步就是这么简单。代码添加完毕后就可以继续下一步了。下面是对第一步过程的解释，没兴趣的可以跳过。

上面的代码用以确保当前使用的WordPress版本支持widget，并声明一个用来创建主题widget区域的值的数组。下面我们来看看这些值：

Name——将要显示在WP 管理界面的新widget区域的名称
Id——新widget区域的唯一标识符
Description——对新widget区域的说明
Before_widget——用户添加widget小工具前生成的批注
after_widget——用户添加widget小工具后生成的批注
Before_title——添加widget小工具的用户名前的批注
After_title——添加widget小工具的用户名后的批注

有了这些参数，我们的新widget区域最后会得到以下输出（假设我们在新的widget区域添加的是一个内置搜索工具）：

<div id="search-3">
	<h4>Search</h4>
	<form role="search" method="get" id="searchform" action="http://localhost/283/" >
		<div>
			<label for="s">Search for:</label>
			<input type="text" value="" name="s" id="s" />
			<input type="submit" id="searchsubmit" value="Search" />
		</div>
	</form>
</div>

需要注意的是为开始<div>标签生成的批注（markup），该批注根据widget数组指定的通配符匹配获取相关的属性信息。

下面继续第二步骤。

第二步

你希望新的widget区域显示在主题的什么位置，就在相应的主题模板文件中添加以下代码：

<div id="widgetized-area">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('widgetized-area')) : else : ?>

	<div>
		<p><strong>Widgetized Area</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>

当这一步骤也完成后，你所选择的位置上就会出现一个新的支持widget的版块，你可以在这个版块添加任何一个自己需要的widget工具。接下来就能用相同的方法让主题的其它位置也支持widget工具了。

下面是对第二步骤的解释。如果你没有指定widget，那么If/endif语句之间的内容会被输出到浏览器。通过这种形式，用户能了解到，自己可以在WordPress后台的“小工具”菜单中对内容输出的位置进行widget定制。代码里还有一个“pre-widget”类可以设置pre-widget版块的样式。当一个页面上出现多个widget区域时，可以用一个类名称来保持widget样式统一。

同时也要注意我们要将widget数组（见第一步）中指定的id作为代码第二行dynamic_sidebar() 的参数值。

多个新widget区域

重复第一步和第二步，你就可以让主题的各个位置支持widget了。下面假设你需要在主题的头部、侧边栏、和底部添加widget。那么首先你需要把下面的代码复制到functions.php文件里：

if (function_exists('register_sidebar')) {

	register_sidebar(array(
		'name' => 'Header',
		'id'   => 'header',
		'description'   => 'This is the widgetized header.',
		'before_widget' => '<div id="%1$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));
	register_sidebar(array(
		'name' => 'Sidebar',
		'id'   => 'sidebar',
		'description'   => 'This is the widgetized sidebar.',
		'before_widget' => '<div id="%1$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));
	register_sidebar(array(
		'name' => 'Footer',
		'id'   => 'footer',
		'description'   => 'This is the widgetized footer.',
		'before_widget' => '<div id="%1$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));

}

接下来把下面的代码分别添加到header.php、sidebar.php和footer.php文件中。

header.php：

<div id="widgetized-header">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header')) : else : ?>

	<div>
		<p><strong>Widgetized Header</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>

sidebar.php：

<div id="widgetized-sidebar">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?>

	<div>
		<p><strong>Widgetized Sidebar</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>

footer.php：

<div id="widgetized-footer">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('footer')) : else : ?>

	<div>
		<p><strong>Widgetized Footer</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>

成功！当然你也可以根据自己的需要调整代码中的各种细节，但是以上两步就是使主题其它版块支持widget的全部过程。接下来要说的是一些widget的技巧。

Widget使用技巧

管理自定义的widget小工具

给主题添加新的widget后，你可以新建一个独立文件夹并命名为widgets.php，将所有自定义的widget都保存到这个文件夹。用下面的这行代码实现保存自定义widget功能：

if ($wp_version >= 2.8) require_once(TEMPLATEPATH.’/widgets.php’);

将代码添加到functions.php文件里，然后将所有自定义的widget工具保存到widgets.php中。这种方法可以确保所有widget都能够顺利加载并且运行在WordPress支持widget的所有版本上。如此，你的主题文件就能够得到有效管理。

替换WordPress默认widget

WordPress的很多默认小工具都有需要改进的地方。但值得庆幸的是，在WordPress里你可以自由替换这些默认小工具。例如，下面这段代码就可以将内置搜索工具换成你自己需要的widget工具。

<?php function custom_search_widget() { ?>

<form action="http://localhost/283/index.php" method="get">
	<div>
		<label for="s">Site Search</label>
		<input id="s" name="s" alt="Search" type="text" />
	</div>
</form>

<?php } if (function_exists('register_sidebar_widget'))

register_sidebar_widget(__('Search'), 'custom_search_widget'); ?>

隐藏不用的widget区域

如果你通过上面的方法让主题的某个位置支持了widget，但暂时没有在这个位置上安排合适的小工具，那么这个位置就会空出来，从整个版面看上去会很奇怪。为了避免这种情况，请用下面的代码围绕暂时不用的widget区域：

<?php if (function_exists('is_sidebar_active') && is_sidebar_active('sidebar')) { ?

<!-- 第二步骤中的代码（或自定义内容） -->

<?php } ?>

有了上面这段代码，支持widget的版块只会在确实包含已启用小工具的情况下才显示在前台。。同时需要注意，这段代码也支持显示widget外的其它内容。

原文：How to Widgetize Your WordPress Theme in 2 Steps

分享到：

OnlyGrape葡提子,英文建站博客英文网站建设，用户体验设计，前段技术研究，seo网站推广