免插件实现无觅相关文章样式[修正]

先前写过一个文字版的。
这次弄个图片版的吧。
代码取自我的Hacklog package,在此分享出来。

别忘记在主题的 default-post-thumbnails 目录下放一默认图片 default.jpg

修正在没有标签相关文章时不获取随机文章的Bug.(2012-04-05T00:23:12+00:00)
修正有时在首页会导致sidebar 无法显示的bug.(2012-04-05T00:23:12+00:00)
弃用ob_start() 方式获取内容。(2012-04-05T00:23:12+00:00)


其它:
你可以在一目录下放一些命名规范的图片,修改ihacklog_pkg_get_default_post_thumbnail() 函数使之随机显示默认图片。

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
add_action( 'after_setup_theme',    'ihacklog_pkg_add_featured_image_support', 11 );
add_action('wp_head','ihacklog_pkg_related_posts_print_css',999);
add_filter('the_content','ihacklog_pkg_related_posts_with_thumbnail',10);

/**
 * @see http://wordpress.stackexchange.com/questions/23839/using-add-theme-support-inside-a-plugin
 * @see http://codex.wordpress.org/Function_Reference/add_theme_support
 * @see http://codex.wordpress.org/Plugin_API/Action_Reference
 */

function ihacklog_pkg_add_featured_image_support()
{
    $supportedTypes = get_theme_support( 'post-thumbnails' );

    if( $supportedTypes === false )
     {
        add_theme_support( 'post-thumbnails', array( 'post' ) );    
     }            
     set_post_thumbnail_size( 200 , 150 , true );
}

function ihacklog_pkg_get_default_post_thumbnail()
{
    $src = sprintf('%1$s/images/default-post-thumbnails/default.jpg', get_stylesheet_directory_uri());
    return $src;
}


/**
 * @see http://codex.wordpress.org/Function_Reference/query_posts
 * @see http://codex.wordpress.org/Class_Reference/WP_Query#Parameters
 * @author 荒野无灯
 * @description get related posts
 */

function ihacklog_pkg_related_posts_with_thumbnail($content)
{
    global $post;
    if( $post->post_type != 'post'  || !is_singular() )
    {
        return $content;
    }
    $related_posts = '';
    $tag_ids = array();
    $tags = wp_get_post_tags($post->ID);
    if( $tags )
    {
        $related_posts_caption = get_the_tag_list('More posts tagged with: ',' • ','');
        foreach($tags as $tag)
        {
            $tag_ids[]= $tag->term_id;
        }
        $query = new WP_Query(array( 'tag__in' => $tag_ids,
            'post__not_in' =>array($post->ID),
            'orderby'=>'rand',
            'post_status' =>'publish',
            'post_type' =>'post' ,
            'showposts'=>5
        ) );

    }
    if( !$query->have_posts() )
    {
        $related_posts_caption = '随机日志';
        $categoryies = get_the_category();
        foreach( (array)$categoryies as $category)
        {
            $cat_ids[] = $category->term_id;
        }
        //if no related post, fetch random posts.
        $query = new WP_Query(array( 'category__in' => $cat_ids,
            'post__not_in' =>array($post->ID),
            'orderby'=>'rand',
            'post_status' =>'publish',
            'post_type' =>'post' ,
            'showposts'=>5
        ) );
    }
    if( $query->have_posts() )
    {
        if(is_feed())
        {
            ihacklog_pkg_related_posts_print_css();
        }


        $related_posts .= '<!-- start ihacklog related posts --><div class="related-posts">';
        $related_posts .= '<h3 class="related-posts-caption">' . $related_posts_caption . '</h3>';
        $related_posts .= '<ul class="related-posts-ul">';
        while ($query->have_posts())
        {
            $query->the_post();

            $related_posts .= '<li>';
            if ( has_post_thumbnail() )
            {
                $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'thumbnail');
                $the_thumbnail_src = $thumbnail[0];
            }
            else
            {
                $the_thumbnail_src = ihacklog_pkg_get_default_post_thumbnail();
            }
            $related_posts .= sprintf('<a class="related-posts-img" href="%1$s" title="%2$s"><img src="%3$s" alt="%2$s" /></a>', get_permalink() , esc_attr(strip_tags(get_the_title())), $the_thumbnail_src);
            $related_posts .= sprintf('<h3 class="related-posts-tittle"><a href="$1$s" title="%2$s">%2$s</a></h3>', get_permalink() , esc_attr(strip_tags(get_the_title())) );
            $related_posts .= '</li>';
        }
        $related_posts .= '</ul>';
        $related_posts .= '</div>';
    }
    //Ok,my query has been done.now restores the $post global to the current post in the main query
    wp_reset_postdata();
    return $content . $related_posts;
}

function ihacklog_pkg_related_posts_print_css()
{
    echo <<<EOT
<style type="text/css" media="screen">
/** related article **/
.related-posts {
        /*width: 568px; */
        height: 10px;
        margin: 20px 0px 80px;
        font-family: "Microsoft YaHei","WenQuanYi ZenHei";
}

.related-posts a {
        color: #555; text-decoration: none;
}

.related-posts-caption {
    margin-bottom: 10px; font-weight: bold; font-size: 14px;
    border-bottom: 4px double #E3E1DB;
}
.related-posts ul {
    list-style: none;
    margin-left: 10px;     
    margin: 0;
    padding: 0;
    width: 600px;
}
.related-posts ul li {
    display: block;
    background-image: none;
    float: left;
    padding: 5px;
}
.related-posts ul li:hover {
  background-color: #F4F4F4;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 2px 2px 3px #888888;
}
.related-posts ul li img {
    border-radius: 5px 5px 5px 5px;
        width: 96px; height: 90px; padding: 2px; border: 1px solid #CCCCCC;
}
.related-posts ul li .related-posts-tittle {
        margin-left: 2px;
        width: 96px;
        height: 7em;
        overflow:hidden;
        font-size: 12px;
        font-weight:normal;
        text-decoration: none;
}
</style>
EOT
;
}

效果图:

– EOF –

更多
18 Responses Post a comment
  1. 桔子

    安上了,效果非常好。只是文章如果没有标签的话,该篇文章的正文和侧边栏都会不显示,只显示文章的标题,现在的解决办法就是将文章都加了标签。

  2. 這個挺不錯的 弄個屬於自己的無覓
    有些時候 頁面打開 無覓加載的還是挺慢的
    呵呵

  3. 萌囧妹

    发现是之前使用的你的文字版相关文章代码没有删完,加个正则匹配post图片这个不会。

  4. 荒野无灯

    主题冲突问题应该是css导致,这个css仅供参考而已。
    关于显示外链图片,由于我博客基本不使用外链的,因此暂不考虑这个,如果要的话,你可以加个正则匹配post图片再显示即是。

  5. 萌囧妹

    用不起,貌似和主题有冲突,而且不能显示外链图片。

  6. 荒野无灯

    其实我用的就是插件法实现的。如果在主题里面就不用检测是否支持post-thumbnails了~~

  7. 荒野无灯

    默认获取特色图,没有就获取文章的图片(这个忘记加上代码了,后来改的,你如果需要,我可以发给你),文章没图片就调用默认显示的。

  8. 西门

    请教一下,图片是获取对应文章里什么图片?第一张?特色图?还是自动裁剪的图?
    没看到有相关说明。

  9. 潜行者m

    偶尔用用插件,还是可以的吧,省下不少功夫,功能也不差。。

  10. Demon

    不错。不过已经用上了另一个版本的了

  11. 周良

    说的对,WP有点臃肿了,CMS不行的

  12. iShare

    看起来比无觅还要给力啊,外观做的很漂亮

  13. yoco

    这个蛮好的。喜欢,你写的好几个插件都好实用哦~

  14. 荒野无灯

    作为wp来说,用标签还是比较合适的。除非你有更好的算法。
    并且,用WP并不是把它当纯CMS用,我只是用来写博客,如果只是要CMS,WP也许不是最佳选择。

  15. Yafei

    标签匹配已经跟不上潮流了啊,特别是cms

Leave a Reply

Note: You may use basic HTML in your comments. Your email address will not be published.

Subscribe to this comment feed via RSS