WP Trick

使 WordPress 主题支持 Widget

Jul 27th, 2008 Add Comment

昨天跟俩同学吹水了一天, 心情不错. 临睡前有行善的冲动, 帮网友小改了一下主题. 任务比较简单, 只是为一个三栏主题添加对 Widget 的支持而已.
事后有网友认为这样的做法欠妥, 要么鼓励收费, 要么授人以渔. 我想想也有道理, 打算以后少干这些活, 但多聊聊这些事. 就先从这次简单的案例开始说吧.

单侧边栏

functions.php

<?php
if( function_exists('register_sidebar') ) {
	register_sidebar(array(
		'before_widget' => '<li class="widget">', // widget 的开始标签
		'after_widget' => '</li>', // widget 的结束标签
		'before_title' => '<h3>', // 标题的开始标签
		'after_title' => '</h3>' // 标题的结束标签
	));
}
?>

sidebar.php

<div id="sidebar">
	<ul class="widgets">
<?php // 如果没有使用 Widget 才显示以下内容, 否则会显示 Widget 定义的内容
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) :
?>
	<!-- widget 1 -->
	<li class="widget">
		<h3>标题 1</h3>
		<ul>
			<li>条目 1.1</li>
			<li>条目 1.2</li>
			<li>条目 1.3</li>
		</ul>
	</li>
	<!-- widget 2 -->
	<li class="widget">
		<h3>标题 2</h3>
		<ul>
			<li>条目 2.1</li>
			<li>条目 2.2</li>
			<li>条目 2.3</li>
		</ul>
	</li>
<?php endif; ?>
	</ul>
</div>

双侧边栏

functions.php

<?php
if( function_exists('register_sidebar') ) {
	register_sidebar(array(
		'name' => 'Sidebar_1', // 侧边栏 1 的名称
		'before_widget' => '<li class="widget">', // widget 的开始标签
		'after_widget' => '</li>', // widget 的结束标签
		'before_title' => '<h3>', // 标题的开始标签
		'after_title' => '</h3>' // 标题的结束标签
 
	));
 
	register_sidebar(array(
		'name' => 'Sidebar_2', // 侧边栏 2 的名称
		'before_widget' => '<li class="widget">', // widget 的开始标签
		'after_widget' => '</li>', // widget 的结束标签
		'before_title' => '<h3>', // 标题的开始标签
		'after_title' => '</h3>' // 标题的结束标签
 
	));
}
?>

sidebar.php

<div id="sidebar_1">
	<ul class="widgets">
<?php // 如果没有在侧边栏 1 中使用 Widget 才显示以下内容, 否则会显示 Widget 定义的内容
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_1') ) :
?>
	<!-- widget 1 -->
	<li class="widget">
		<h3>标题 1</h3>
		<ul>
			<li>条目 1.1</li>
			<li>条目 1.2</li>
			<li>条目 1.3</li>
		</ul>
	</li>
<?php endif; ?>
	</ul>
</div>
 
<div id="sidebar_2">
	<ul class="widgets">
<?php // 如果没有在侧边栏 2 中使用 Widget 才显示以下内容, 否则会显示 Widget 定义的内容
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_2') ) :
?>
	<!-- widget 2 -->
	<li class="widget">
		<h3>标题 2</h3>
		<ul>
			<li>条目 2.1</li>
			<li>条目 2.2</li>
			<li>条目 2.3</li>
		</ul>
	</li>
<?php endif; ?>
	</ul>
</div>