Twitter

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

in Wordpress // 74 Comments

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

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

相关文章,需要 Simple Tags 插件支持

在 single.php 文件中找到 ,在其后面加入以下代码:

<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=%title% (%post_comment%)<p>%post_excerpt%</p>&except_wrap=5');?>
        <?php } ;?>
    </div>
    <div class="related_post_bottom"></div>
</div>

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

Bread Crumb 导航,需要 Breadcrumb NavXT 插件支持

首先在 single.php 中找到 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>,在其前面加入以下代码:

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

其次,在 style.css 文件中加入以下样式:

.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: <span class="bread_sep"><em>&gt; </em></span>
- Home Prefix: <span class="bread_home">
- Home Suffix: </span>
当然你可以在其他页面添加类似导航,代码的放置类似,后台设置简单明了,自己摸索了。

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

  1. Branko / November 17, 2009 / Reply

    this is not working for me:

    <em>&gt; </em>

    it shows like this:

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

    two greater than signs are together….

    so i used this:

     &nbsp; &gt; &nbsp;

    ___________________________

    sorry for the double comment, you can delete previous one

  2. Mr.Chou / November 17, 2009 / Reply

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

  3. dreamxy / November 28, 2009 / Reply

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

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

  4. 破钟 / December 25, 2009 / Reply

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

    • Alan / December 25, 2009 / Reply

      GeSHi Error: GeSHi could not find the language htmtl (using path /home/alanoy/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)
  5. shirp / January 13, 2010 / Reply

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

  6. Ark / January 18, 2010 / Reply

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

    • Alan / January 19, 2010 / 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 / January 21, 2010 / Reply

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

      • Ark / January 22, 2010 / Reply

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

  7. iliang / January 21, 2010 / Reply

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

  8. stop / February 7, 2010 / Reply

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

    • Alan / February 7, 2010 / Reply

      见下面链接里面我的回复:
      http://www.alanoy.com/darklight-2/comment-page-1/#comment-54

  9. ltfox / April 4, 2010 / Reply

    您好,请问有没有代码可以显示副标题出来的?谢谢你

      • ltfox / April 5, 2010 / Reply

        不好意思,没问清楚。
        就是在常规选项那里,博客标题下面不是可以加一个副标题吗?相当于对标题的一个简短描述,请问哪个描述如何显示出来?谢谢

  10. hidehai / April 21, 2010 / Reply

    问下LZ日志中的代码高亮是用什么实现的?

    还有个问题,我切换回Dark主题,发现日志的评论功能没有ajax回显了,但是在about页面,能够回显,即错误提示。

    不知道是什么引起的..日志和bout页面的源代码我比较过了,没什么差别。

    :(

Leave a Reply