Alan's World » Bread Crumb http://www.alanoy.com Do what you want to do Mon, 06 Sep 2010 03:41:53 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 关于DarkLight的相关文章和Bread Crumb样式 http://www.alanoy.com/styles-of-related-posts-and-bread-crumb/ http://www.alanoy.com/styles-of-related-posts-and-bread-crumb/#comments Sun, 08 Nov 2009 06:38:21 +0000 Alan http://www.alanoy.com/?p=53 首先提个与本文章内容无关的，发现太多朋友喜欢去掉版权信息了，想不明白，版权信息就那么碍眼？？！像 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>
    当然你可以在其他页面添加类似导航，代码的放置类似，后台设置简单明了，自己摸索了。

Related Posts

© Alan for Alan's World, 2009. | Permalink | 68 comments
Add to del.icio.us | Google Bookmark | Digg | Live Bookmark | Facebook
Post tags: , , ,

]]> http://www.alanoy.com/styles-of-related-posts-and-bread-crumb/feed/ 68