WordPress 博客实现主题支持Widget功能

其实现在的WordPress博客主题作者制作WordPress主题的时候都会给主题添加上支持Widget功能效果,也仅有极少部分是不支持的,既然作者不让它支持,但作为主题使用者可以为其添加支持Widget功能。博客吧介绍下如果实现WordPress博客支持Widget(小工具)功能。

两栏(单侧栏)主题Widget功能:

  1. 登陆博客后台,点击“外观”选项卡下的“编辑”选项进入当前主题编辑界面
  2. 选择主题支持函数文件functions.php,在<?php和?>之间添加以下函数代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    <?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>' // 标题的结束标签
    	));
    }
    ?>
  3. 更新functions.php文件后,选择边栏模板sidebar.php,在其中添加以下代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    
    <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>
  4. 更新文件后,主题就支持Widget了。

三栏(两侧栏,如博客吧当前主题)主题Wideget功能:

  1. 登陆博客后台,点击“外观”选项卡下的“编辑”选项进入当前主题编辑界面
  2. 选择主题支持函数文件functions.php,在<?php和?>之间添加以下函数代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    
    <?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>' // 标题的结束标签
     
    	));
    }
    ?>
  3. 更新functions.php文件后,选择其中一个边栏模板sidebar_l.php,在其中添加以下代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    <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>
  4. 选择另一个边栏模板sidebar_r.php,在其中添加以下代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    <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>
  5. 更新文件后,两侧栏主题就实现了Wideget功能了。

提示:如果实在不懂得怎么添加的话,可以找一个支持Wideget的WordPress博客主题打开相关几个主题文件,查看下代码的位置,然后效仿添加即可。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Grow your business fast with

Suku