关于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>
    当然你可以在其他页面添加类似导航,代码的放置类似,后台设置简单明了,自己摸索了。

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

68 Comments for this entry.

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

  2. 嗯哼~

  3. 赫赫,不尊重别人的劳动

  4. I did those with my own effort, thanks for support

  5. 蛮好的主题,就是字体看不清~~

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

    • 吓死我了,囧囧囧

      • 呼呼

      • dreamxy

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

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

  7. Branko

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

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

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

  10. dardlight 很漂亮啊

  11. 暴喜欢黑色主题,环保!偶似ZB的。

  12. dreamxy

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

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

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

  13. 来学习的~~~

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

  15. gil

    在天朝,版权算个屁!你只有无奈…

  16. 这个主题真的很不错,正在使用中。

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


    • 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. 自己做的主题就是好,羡慕

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

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

  20. Ark

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

    • 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

        搞定了,十分感谢Alan老兄

      • Ark

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

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

      • Ark

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

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

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

    • Vince

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

      • Vince

        可能是Google的jQuery库没有加载

  23. stop

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

  24. ltfox

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

    • 请问是什么的副标题呢?

      • ltfox

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

    • 在想要显示的地方加上:

      1
      <?php bloginfo('description'); ?>
      • ltfox

        got it, thx!

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

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

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

    :(

    • 呵呵,谢谢LZ来测试评论。

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

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

      • 留空栏提交有提示的吧

  26. 1234567

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

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

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

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

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

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

      • 那怎么找啊?急呀!

    • 评论插件WP-RecentComments

  28. 重新查看了一遍!按你的步骤来的!没有啊?!

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

      • 好吧!
        真的非常感谢!

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

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

      • 发现style.css 文件中已经存在了:
        /**************breadcrumb*****************/
        与你要加的那段代码,一样的!
        是不是这个原因呢?

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

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

  29. 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′);?>
    • 整个文件直接发到我邮箱 alanoy11[at]gmail.com

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

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

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

Write a Comment.

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