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

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

十一 8th 2009 Alan Wordpress Go to comment

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>

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

, , , Leave a comment
声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0.0 共享协议. 转载请注明转自 Alan's World

Related Posts

  • DarkLight 2.3 (70)
    这两天开始动手修改 G-White 主题，很多东西修改，还是比较麻烦的，费了不少时间，然后在各浏览器...
  • DarkLight 2.0 (125)
    DarkLight 2.0 终于如期发布，上个版本 1.04 直接跳到 2.0，改了挺多东西的，优化...
  • New Born (22)
    A new start for Alan’s World，以前的文章全部删了，这在从 PJ Blog...
  • Wordpress Theme: G-White 2.0 (49)
    G-White 是自己做的一个比较久远的主题了，跟 DarkLight 一样，这次也直接跳到 V...

36 Comments for this entry

  1. 吖Bee
    On 十一 8th, 2009 / #1 Reply

    那人就是这样…太注重那些什么收录、PR之类，还有自己的自私。

  2. Showfom
    On 十一 8th, 2009 / #2 Reply

    嗯哼~

  3. 单点日志
    On 十一 9th, 2009 / #3 Reply

    赫赫,不尊重别人的劳动

  4. bsod1
    On 十一 9th, 2009 / #4 Reply

    I did those with my own effort, thanks for support

  5. 笑话老李说
    On 十一 10th, 2009 / #5 Reply

    蛮好的主题，就是字体看不清~~

  6. Showfom
    On 十一 11th, 2009 / #6 Reply

    孩子我已经打掉了 以后再也不会来找你了

    • Alan
      On 十一 11th, 2009 / #7 Reply

      吓死我了，囧囧囧

      • Showfom
        On 十一 13th, 2009 / #8

        呼呼

      • dreamxy
        On 十一 28th, 2009 / #9

        安装你的方法，应该显示“ 主页> 电影资讯> 台湾望春风 ”

        可是显示为 ：“> > 电影资讯 台湾望春风 ”

  7. Branko
    On 十一 17th, 2009 / #10 Reply

    this is not working for me:

    1

    <em>&gt; </em>

    it shows like this:

    1

    <strong>Blog &gt; &gt; uncategorizedTest Post</strong>

    two greater than signs are together….

    so i used this:

    1

     &nbsp; &gt; &nbsp;

    ___________________________

    sorry for the double comment, you can delete previous one

  8. Mr.Chou
    On 十一 17th, 2009 / #11 Reply

    我曾公开过一个其实没太多技术含量的THEME,
    某日，心血来潮查询了一下，根据链接查了用了我的THEME的站若干，只有3个站去掉了版权信息。其中还有2个站花了10块钱购买了版权。
    忽然我发现不然就是我的THEME其实是因为用的人不多，所以显得都挺尊重版权的，不然就是其实现在大家越来越有意识了~呵呵~

  9. Vichair
    On 十一 19th, 2009 / #12 Reply

    alan你twitter那出现了口口口…对了，把我链接更新下吧

    • Alan
      On 十一 19th, 2009 / #13 Reply

      我不会哦，估计是编码问题。链接更新了 :D

  10. 开心凡人
    On 十一 27th, 2009 / #14 Reply

    dardlight 很漂亮啊

  11. 天缘博客
    On 十一 27th, 2009 / #15 Reply

    暴喜欢黑色主题，环保！偶似ZB的。

  12. dreamxy
    On 十一 28th, 2009 / #16 Reply

    按照你的方法，应该显示“ 主页> 电影资讯> 台湾望春风 ”

    可是显示为 ：“> > 电影资讯 台湾望春风 ”

    • Alan
      On 十一 28th, 2009 / #17 Reply

      请确认 CSS 正确地被写入 style.css 文件

  13. koobai
    On 十一 29th, 2009 / #18 Reply

    来学习的~~~

  14. 羽中
    On 十二 4th, 2009 / #19 Reply

    鄙视下去掉版权链接的，隐藏起来就行了。。。xD

  15. gil
    On 十二 4th, 2009 / #20 Reply

    在天朝，版权算个屁！你只有无奈…

  16. showm
    On 十二 10th, 2009 / #21 Reply

    这个主题真的很不错，正在使用中。

  17. 破钟
    On 十二 25th, 2009 / #22 Reply

    你好，想请教在首页边栏显示Blogroll，要在sidebar.php中添加什么代码，我是个新手

    • Alan
      On 十二 25th, 2009 / #23 Reply 
      1
2
3

      <ul id="blogroll">
    <?php wp_list_bookmarks(''); ?>
</ul>
  18. A.shun
    On 十二 25th, 2009 / #24 Reply

    自己做的主题就是好，羡慕

  19. shirp
    On 一 13th, 2010 / #25 Reply

    你好,请教一下
    以前我用你的相似文章的那个功能,后来升级到2.9.1
    simple tags也升级了
    为什么我的后来的文章明明有相同关键词的,却不在相似文章里面显示?(以前的文章正常)

    • Alan
      On 一 13th, 2010 / #26 Reply

      我不知道他现在调用代码改了没，插件相关的 wiki 又是空的，对作者无语了。升 2.9 后我就没用 simple tags 了。你可以试一下 Wordpress Related Posts

  20. Ark
    On 一 18th, 2010 / #27 Reply

    Dear Alan:
    你好，我正在运用你的DarkLight主题，
    这个主题很好很漂亮，我很喜欢
    谢谢你的制作。
    不过有个地方我想请教你一下，
    （我只懂微乎其微的一点点静态HTML语言）
    在你的这个主题中，图片偏暗，但是鼠标移动上去的时候，图片会变亮，
    我想问问你该怎么取消这个功能呢？
    因为我玩摄影，照片的亮度影响到整张照片的效果。
    所以希望能得到答复。
    谢谢

    • Alan
      On 一 19th, 2010 / #28 Reply

      Hi Ark, 在 style.css 文件中找到 .entrybody img，把 {} 里面的
      filter: alpha(opacity=80);
      opacity: 0.8;
      -moz-opacity: 0.8;
      删除，并把
      .entrybody img:hover {
      filter: alpha(opacity=100);
      opacity: 1;
      -moz-opacity: 1;
      }
      删除，就可以了

      • ark
        On 一 21st, 2010 / #29

        搞定了，十分感谢Alan老兄

      • Ark
        On 一 21st, 2010 / #30

        还有个问题，这个模板我用了后，
        在“评论”板块，找不到“回复”的那个小箭头
        所以无法回复评论
        不知怎么回事

    • Alan
      On 一 21st, 2010 / #31 Reply

      请看说明，需要在后台启用嵌套回复才能看到回复评论的箭头

      • Ark
        On 一 22nd, 2010 / #32

        搞定了，实在太感谢Alan老兄啦
        老兄真个厉害，人也热心
        佩服佩服

  21. iliang
    On 一 21st, 2010 / #33 Reply

    为什么我的JS提示错误呢.请给我个回答吧~!

  22. iliang
    On 一 21st, 2010 / #34 Reply

    为什么all.js的138行第4字符有错误啊.浏览器提示的.
    另外Ajax不起作用啊.能否帮我看下啊..5555555现在很困惑啊!

  23. stop
    On 二 7th, 2010 / #35 Reply

    能问下侧边栏那个“click tu follow me on twitter”
    是怎么弄的吗？