WordPress主题中“sidebar.php”文件是边栏文件,它的主要作用是将一些需要在多个页面边栏中统一使用的内容集成到该文件,然后通过简单的代码统一调用该文件,最终实现在多个页面都能包含该文件内容的一种方式。
上面我们了解了它的作用,我们就可以根据自己的需要制作一个“sidebar.php”文件,具体制作方法,可以参考以下教程。
一、准备工作
同制作其他WordPress主题文件一样,要具备基本的HTML、CSS、PHP知识,且需先搭建好WordPress开发环境。
二、创建sidebar.php
在主题文件夹(wp - content/themes/yourtheme)中创建sidebar.php文件。
三、构建基本结构
(一)基础HTML容器
1. 首先为侧边栏创建一个HTML容器元素。
例如,使用“<div>”标签:
php
<?php
// sidebar.php
?>
<div id="sidebar">
</div>
(二)添加小工具区域
1. WordPress有强大的小工具功能,侧边栏通常是小工具使用较多的区域。
在 sidebar.php中,可以添加一个小工具区域,使用“dynamic_sidebar”函数。
例如,如果想要创建一个名为“Main Sidebar”的小工具区域:
php
<?php
if (is_active_sidebar('main_sidebar')){
dynamic_sidebar('main_sidebar');
}
?>
这里要确保在functions.php中已经注册了这个小工具区域。如果没有注册,可以使用下面的代码在functions.php中注册:
php
function mytheme_widgets_init() {
register_sidebar( array(
'name' => 'Main Sidebar',
'id' =>'main_sidebar',
'description' => 'The main sidebar for our theme.',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
) );
}
add_action('widgets_init','mytheme_widgets_init');
(三)自定义内容(可选)
1. 除了小工具区域,还可以在侧边栏添加自定义内容,比如自定义图片、文本链接等。
例如,添加一个自定义图片:
php
<?php
// sidebar.php
?>
<div id="sidebar">
<?php if (is_active_sidebar('main_sidebar')){
dynamic_sidebar('main_sidebar');
}?>
< img src="<?php echo get_template_directory_uri();?>/images/sidebar - logo.png" alt="Sidebar Logo">
</div>
这里“get_template_directory_uri()”函数获取模板目录的URL来指定图片位置。
再比如添加一个自定义文本链接:
php
<div id="sidebar">
<?php if (is_active_sidebar('main_sidebar')){
dynamic_sidebar('main_sidebar');
}?>
<p>关于我们</p >
</div>
四、样式化
1. 与footer.php或index.php类似,对于sidebar.php中的内容也需要样式化。
在主题的style.css中,可以定义侧边栏的样式,比如宽度、背景色、边框等。
例如:
css
#sidebar {
width: 30%;
background - color: #f4f4f4;
border: 1px solid #e0e0e0;
float: right;
}
.widget {
margin: 15px;
}
.widget h2 {
font - size: 18px;
}
五、测试
1. 在完成sidebar.php的编写并样式化后,在WordPress网站查看侧边栏是否按预期显示内容并且样式正确。
2. 检查小工具是否能正常拖放到侧边栏小工具区域并且显示正常,自定义内容是否显示准确。