关于DarkLight的相关文章和Bread Crumb样式

十一 8th 2009 Wordpress 36 Comments

related-posts-and-breadcrumb首先提个与本文章内容无关的，发现太多朋友喜欢去掉版权信息了，想不明白，版权信息就那么碍眼？？！像 Jinwen 说的朋友加油，加个版权链接磊落点吧，囧rz。

好了，进入正题，关于我自用的 DarkLight 主题中相关文章和文章顶部导航的样式问题，由于每个 Wordpress 用户的使用习惯不同，而且这两个效果都需要插件支持，所以没有在 DarkLight 发布版中放入代码和使用方法，不过最近挺多人询问关于这两个样式如何实现，于是在此把这两个样式的实现和相关的插件作下说明。PS，昨天有位朋友问了顶部 Breadcrumb 的实现问题，忘了把 CSS 代码给你了，你再看看这篇文章添加进去吧。

  • 相关文章，需要 Simple Tags 插件支持。
    在 single.php 文件中找到 ，在其后面加入以下代码：

    1
2
3
4
5
6
7
8

    <div class="related_post">
        <div class="related_post_mid">
          <?php if (function_exists('st_get_related_posts')){;?>
          <?php st_related_posts('number=5&title=<h4>Related Posts</h4>&nopoststext=<strong><em>No Related Posts</em></strong>&include_page=false&order=random&xformat=<a href="%permalink%" title="%title% (%date%)">%title% (%post_comment%)</a><p>%post_excerpt%</p>&except_wrap=5');?>
          <?php } ;?>
        </div>
        <div class="related_post_bottom"></div>
</div>

    CSS 已经在发布版的主题中了（并没有去掉，哈哈），这样就跟我自用的样式一致了。

  • Bread Crumb 导航，需要 Breadcrumb NavXT 插件支持。
    首先在 single.php 中找到

    1

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    在其前面加入以下代码：

    1
2
3
4
5
6
7
8
9

    <div class="breadcrumb">
	<?php
		if(function_exists('bcn_display'))
		{
			bcn_display();
		}
	?>
</div>
<div class="clear"></div>

    其次，在 style.css 文件中加入以下样式：

    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

    .breadcrumb {
	margin-bottom: 15px;
	padding-bottom: 10px;
	font-size: 13px;
	line-height: 27px;
	background: url(images/entrybottom.png) repeat-x 0 bottom;
	color: #CCCCCC;
	font-style: italic;
	overflow: hidden;
}
* html .breadcrumb {
	height: 27px;
}/*ie6*/
.breadcrumb span {
	float: left;
	margin-right: 8px;
}
.breadcrumb a, .breadcrumb a:visited {
	color: #CCCCCC;
}
.breadcrumb a:hover {
	text-decoration: underline;
}
.bread_home {
	text-indent: -99999em;
}
.bread_home {
	margin-right: 6px !important;
}
.bread_home a, .bread_home a:visited {
	display: block;
	background: url(images/bread_home.png) no-repeat;
	height: 24px;
	width: 24px;
}
.bread_current {
	color: #EEEEEE;
}

    最后，在 Wordpress 后台的 Breadcrumb NavXT 设置 General 下的：
    - Breadcrumb Separator:

    1

    <span class="bread_sep"><em>&gt; </em></span>

    - Home Prefix:

    1

    <span class="bread_home">

    - Home Suffix:

    1

    </span>

    当然你可以在其他页面添加类似导航，代码的放置类似，后台设置简单明了，自己摸索了。

, , ,