原文出处:露兜博客 https://www.ludou.org/create-wordpress-themes-sidebar.html

因原文发表时间较早,已有部分内容过时,所以转载时略有删改。


制作好了header.php 和 footer.php ,今天我们来制作侧边栏sidebar.php。由于侧边栏的可定制性实在是太强了,所以本节内容比较难,我讲解起来也比较困难,有些内容会被略掉!

作为各个页面公用的侧边栏,我们还是像制作header.php 和 footer.php那样,从index.php中提取侧边栏,放到sidebar.php。好,现在在你的主题目录Aurelius下新建文件sidebar.php,从index.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
<!-- Column 2 / Sidebar -->
<div class="grid_4">
    <h4>Catagories</h4>
    <ul class="sidebar">
        <li><a href="">So who are we?</a></li>
        <li><a href="">Philosophy</a></li>
        <li><a href="">History</a></li>
        <li><a href="">Jobs</a></li>
        <li><a href="">Staff</a></li>
        <li><a href="">Clients</a></li>
    </ul>
    <h4>Archives</h4>
    <ul class="sidebar">
        <li><a href="">January 2010</a></li>
        <li><a href="">December 2009</a></li>
        <li><a href="">Novemeber 2009</a></li>
        <li><a href="">October 2009</a></li>
        <li><a href="">September 2009</a></li>
        <li><a href="">August 2009</a></li>
    </ul>
</div>
<div class="hr grid_12 clearfix">&nbsp;</div>

再打开index.php、archive.php和single.php,删掉以上类似代码,改成:

1
<?php get_sidebar(); ?>

我们发现page.php中sidebar对应的代码和其他页面的不一样!怎样才能实现page和其他页面显示不一样sidebar呢?我们把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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?php if (is_page()) { ?>
    <!-- Column 2 / Sidebar -->
    <div class="grid_4 contact">
		<!-- Adress and Phone Details -->
		<h4>Address and Phone</h4>
		<div class="hr dotted clearfix">&nbsp;</div>
		<ul>
			<li> <strong>Your Company Name</strong><br />
				1458 Sample Road, Redvalley<br />
				City (State) H4Q 1J7<br />
				Country<br />
				<br />
			</li>
			<li>USA - (888) 888-8888</li>
			<li>Worldwide - (888) 888-8888</li>
		</ul>
		<!-- Email Addresses -->
		<h4>Emails</h4>
		<div class="hr dotted clearfix">&nbsp;</div>
		<ul>
			<li>General - <a href="mailto:info@yourcompany.com">info@yourcompany.com</a></li>
			<li>Sales - <a href="mailto:sales@yourcompany.com">sales@yourcompany.com</a></li>
		</ul>
		<!-- Social Profile Links -->
		<h4>Social Profiles</h4>
		<div class="hr dotted clearfix">&nbsp;</div>
		<ul>
			<li class="float"><a href="#"><img alt="" src="<?php bloginfo('template_url'); ?>/images/twitter.png" title="Twitter" /></a></li>
			<li class="float"><a href="#"><img alt="" src="<?php bloginfo('template_url'); ?>/images/facebook.png" title="Facebook" /></a></li>
			<li class="float"><a href="#"><img alt="" src="<?php bloginfo('template_url'); ?>/images/stumbleupon.png" title="StumbleUpon" /></a></li>
			<li class="float"><a href="#"><img alt="" src="<?php bloginfo('template_url'); ?>/images/flickr.png" title="Flickr" /></a></li>
			<li class="float"><a href="#"><img alt="" src="<?php bloginfo('template_url'); ?>/images/delicious.png" title="Delicious" /></a></li>
		</ul>
	</div>
	<div class="hr grid_12 clearfix">&nbsp;</div>
<?php } else { ?>
    <!-- Column 2 / Sidebar -->
    <div class="grid_4">
        <h4>Catagories</h4>
        <ul class="sidebar">
            <li><a href="">So who are we?</a></li>
            <li><a href="">Philosophy</a></li>
            <li><a href="">History</a></li>
            <li><a href="">Jobs</a></li>
            <li><a href="">Staff</a></li>
            <li><a href="">Clients</a></li>
        </ul>
        <h4>Archives</h4>
        <ul class="sidebar">
            <li><a href="">January 2010</a></li>
            <li><a href="">December 2009</a></li>
            <li><a href="">Novemeber 2009</a></li>
            <li><a href="">October 2009</a></li>
            <li><a href="">September 2009</a></li>
            <li><a href="">August 2009</a></li>
        </ul>
    </div>
    <div class="hr grid_12 clearfix">&nbsp;</div>
<?php } ?>

然后,把page.php中对应原来sidebar的部分也改成:

1
<?php get_sidebar(); ?>

这样就可以了。

博主露兜在原教程中还简略介绍了注册小工具,并在sidebar显示的知识。我觉得这部分知识涉及知识点较多,初学者可先跳过,后面专写一篇WordPress小工具相关的文章。

版权声明:部分文章、图片等内容为用户发布或互联网整理而来,仅供学习参考。如有侵犯您的版权,请联系我们,将立刻删除。