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

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

On Nov 8th, 2009 // by Alan // Posted in Tutorial, Wordpress // Go to comment

首先提个与本文章内容无关的，发现太多朋友喜欢去掉版权信息了，想不明白，版权信息就那么碍眼？？！像 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=%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(); ?>，在其前面加入以下代码：

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

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

Related Posts

68 Comments for this entry.

  1. 吖Bee
    on Nov 8th, 2009 // #1 Reply

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

  2. Showfom
    on Nov 8th, 2009 // #2 Reply

    嗯哼~

  3. 单点日志
    on Nov 9th, 2009 // #3 Reply

    赫赫,不尊重别人的劳动

  4. bsod1
    on Nov 9th, 2009 // #4 Reply

    I did those with my own effort, thanks for support

  5. 笑话老李说
    on Nov 10th, 2009 // #5 Reply

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

  6. Showfom
    on Nov 11th, 2009 // #6 Reply

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

    • Alan
      on Nov 11th, 2009 Reply

      吓死我了，囧囧囧

      • Showfom
        on Nov 13th, 2009

        呼呼

      • dreamxy
        on Nov 28th, 2009

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

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

  7. Branko
    on Nov 17th, 2009 // #7 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 Nov 17th, 2009 // #8 Reply

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

  9. Vichair
    on Nov 19th, 2009 // #9 Reply

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

    • Alan
      on Nov 19th, 2009 Reply

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

  10. 开心凡人
    on Nov 27th, 2009 // #10 Reply

    dardlight 很漂亮啊

  11. 天缘博客
    on Nov 27th, 2009 // #11 Reply

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

  12. dreamxy
    on Nov 28th, 2009 // #12 Reply

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

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

    • Alan
      on Nov 28th, 2009 Reply

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

  13. koobai
    on Nov 29th, 2009 // #13 Reply

    来学习的~~~

  14. 羽中
    on Dec 4th, 2009 // #14 Reply

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

  15. gil
    on Dec 4th, 2009 // #15 Reply

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

  16. showm
    on Dec 10th, 2009 // #16 Reply

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

  17. 破钟
    on Dec 25th, 2009 // #17 Reply

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

    • Alan
      on Dec 25th, 2009 Reply

      GeSHi Error: GeSHi could not find the language htmtl (using path /home/alanoy/public_html/alanoy.com/wp-content/plugins/codecolorer/lib/geshi/) (code 2)
  18. A.shun
    on Dec 25th, 2009 // #18 Reply

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

  19. shirp
    on Jan 13th, 2010 // #19 Reply

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

    • Alan
      on Jan 13th, 2010 Reply

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

  20. Ark
    on Jan 18th, 2010 // #20 Reply

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

    • Alan
      on Jan 19th, 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
        on Jan 21st, 2010

        搞定了，十分感谢Alan老兄

      • Ark
        on Jan 21st, 2010

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

    • Alan
      on Jan 21st, 2010 Reply

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

      • Ark
        on Jan 22nd, 2010

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

  21. iliang
    on Jan 21st, 2010 // #21 Reply

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

  22. iliang
    on Jan 21st, 2010 // #22 Reply

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

    • Vince
      on Apr 6th, 2010 Reply

      我在IE下偶尔会遇到这个问题… 比较奇怪

      • Vince
        on Apr 6th, 2010

        可能是Google的jQuery库没有加载

  23. stop
    on Feb 7th, 2010 // #23 Reply

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

  24. ltfox
    on Apr 4th, 2010 // #24 Reply

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

    • Alan
      on Apr 4th, 2010 Reply

      请问是什么的副标题呢？

      • ltfox
        on Apr 5th, 2010

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

    • Alan
      on Apr 5th, 2010 Reply

      在想要显示的地方加上：

      1
      <?php bloginfo('description'); ?>
      • ltfox
        on Apr 6th, 2010

        got it, thx!

  25. hidehai
    on Apr 21st, 2010 // #25 Reply

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

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

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

    ：(

    • hidehai
      on Apr 22nd, 2010 Reply

      呵呵，谢谢LZ来测试评论。

      留空必填栏直接提交也会有错误提示吗?

      也或许机器问题，虽然几率不大，我是IE7。

      • Alan
        on Apr 23rd, 2010

        留空栏提交有提示的吧

  26. 1234567
    on Apr 30th, 2010 // #26 Reply

    楼主的这两个主题都非常不错, 收藏了. 不过看来还是有不少小毛病的地方,希望不断改进!

  27. V-Ren
    on Jun 13th, 2010 // #27 Reply

    今天又搞了顶部的 Breadcrumb ！
    是你说的步骤添加的，搞好后显示是这样的效果：
    > > Personal DiaryWin Live Writer Test
    感觉应是这样的呀：
    > Personal Diary> Win Live Writer Test
    请教怎么搞定！
    我用的是WP 2.9.2 ！
    谢谢啦！

    • Alan
      on Jun 13th, 2010 Reply

      那个插件更新了的缘故，样式看来要修改修改了，在 style.css 里面的
      .bread_home a, .bread_home a:visited {} 大括号里面加入 float: left;
      把 .breadcrumb span {} 里面的全删除改成 margin: 0 5px

      • V-Ren
        on Jun 13th, 2010

        刚才的那个问题解决了！
        非常感谢！
        高人！
        还有一个问题：
        就是我的页面的底部显示又不正常了：
        http://nashsp.com/index.php/music/a-simple-song-leehom-wang.html
        再次蛮烦腻一下！
        谢啦！

      • V-Ren
        on Jun 13th, 2010

        真的不好意思再麻烦你啦……
        唉！
        首页的RECENT COMMENTS 显示的全文是怎么搞的？
        谢谢啦！
        T_T

    • Alan
      on Jun 13th, 2010 Reply

      你的相关文章放错地方了吧

      • V-Ren
        on Jun 13th, 2010

        那怎么找啊？急呀！

    • Alan
      on Jun 13th, 2010 Reply

      评论插件WP-RecentComments

  28. V-Ren
    on Jun 13th, 2010 // #28 Reply

    重新查看了一遍！按你的步骤来的！没有啊？！

    • Alan
      on Jun 13th, 2010 Reply

      肯定是哪里不对了，原因要你自己排查了

      • V-Ren
        on Jun 13th, 2010

        好吧！
        真的非常感谢！

      • V-Ren
        on Jun 13th, 2010

        老大！
        我的眼睛都花啦！
        实在找不出啊！

    • Alan
      on Jun 13th, 2010 Reply

      因为是你自己修改的，所以我也不知道原因的。你把插件逐个禁用看一下会不会冲突？

      • V-Ren
        on Jun 13th, 2010

        发现style.css 文件中已经存在了：
        /**************breadcrumb*****************/
        与你要加的那段代码，一样的！
        是不是这个原因呢？

    • Alan
      on Jun 13th, 2010 Reply

      请问你现在时想解决哪个问题？如果是底部显示不正常的问题，那跟这个没关系

    • Alan
      on Jun 13th, 2010 Reply

      你把你的single.php文件发我看看吧

  29. V-Ren
    on Jun 13th, 2010 // #29 Reply
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="entry single" id="post-”>
        <h2 class=”entrytitle” id=”post-”>
            <a title="” href=”" rel=”bookmark”></a>
            <?php edit_post_link('’, ”, ”); ?>
        </h2>

    Leave a comment

    <?php st_related_posts('number=5&title=Related Posts&nopoststext=No Related Posts&include_page=false&order=random&xformat=%title% (%post_comment%)%post_excerpt%&except_wrap=5′);?>
    • Alan
      on Jun 13th, 2010 Reply

      整个文件直接发到我邮箱 alanoy11[at]gmail.com

      • V-Ren
        on Jun 13th, 2010

        非常感谢啦！
        刚刚解决了问题！
        个人的问题！
        很抱歉！打扰了！
        我把第一段
        —–你说的“CSS 已经在发布版的主题中了（并没有去掉，哈哈），这样就跟我自用的样式一致了上面的”
        —–的代码也加在了single.php代码的最下面了，刚才把它删了好了！
        真的非常感谢！
        还有一个问题：TWITTER 怎么才能显示呢？

    • Alan
      on Jul 7th, 2010 Reply

      Twitter 参考下面链接：
      http://www.alanoy.com/darklight-2/comment-page-1/#comment-54

  30. 北斗天狼
    on Jun 19th, 2010 // #30 Reply

    其实我也很不喜欢那种使用别人主题，把别人版权去掉的人。但是我居然就成了那种人，主要原因是主题设计者在底部加了一个很大的网站LOGO图片，我实在没办法才取消的。所以我的意见是其实那些取消的人，可能还是有一些是有苦衷的，我们应该谅解一下。

  31. Bian
    on Jul 7th, 2010 // #31 Reply

    请问下LZ 最新发出来这套主题就是你现在用的吗？我在用的时候为什么版面会错位呢，侧边栏都跑到最下面去了，自成一列了，但是看LZ的就没这情况，我用的是IE6，而且文章下面的tags不显示啊，LZ能否解答下

Write a Comment.

XHTML: You can use these tags: <code>, [cci](for inline codes), <blockquote>, <strong>, <em>