仿“无觅”样式的相关文章代码版之二

在几个月之前, Kayo 曾经写过一篇文章介绍如何在 WordPress 中做一个“相关文章”栏目,最后我折腾了一个仿无觅样式的栏目,因为之前一直有为每一篇文章配上特色图片,因此该栏目会读取文章的特色图片作为栏目内容。昨天经一位童鞋提醒能不能弄成读取文章内容中的图片显示出来,突然觉得这个想法也不错,毕竟不是每一篇文章都能配上一幅适合的特色图片,于是折腾了一会,便有了以下的代码,因为原理在之前大致相同,这里就不在详细叙述了,如果有问题欢迎童鞋们及时指正!

 

<div class="same_cat_posts">
    <h3><?php _e('You may also like'); ?></h3>
    <ul class="same_cat_posts_ul">
        <?php
                foreach(get_the_category() as $category){
            $cat = $category->cat_ID;
            }
            query_posts('cat=' . $cat . '&orderby=rand&showposts=5');  //控制相关文章排序为随机,显示5篇相关文章
            while (have_posts()) : the_post();
            $imgContent = $post->post_content;
            $imgser = '~<img [^\>]*\ />~'; // 搜索所有符合的图片
            preg_match_all( $imgser, $imgContent, $aimgs );
            $imgnum = count($aimgs[0]); // 检查一下至少有一张图片
        ?>

        <li>
            <?php if ( $imgnum > 0 ) {  ?>
                        <a class="same_cat_posts_img" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo $aimgs[0][1];//如果没有启用jQuery图片延时加载就改为[0][0] ?></a>
            <? } else {  ?>
                <a class="same_cat_posts_img" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/wordpress_default.jpg" alt="<?php the_title(); ?>" ></a>
            <? } ?>
                <h3 class="same_cat_posts_tittle"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
        </li>
            <?php endwhile; wp_reset_query(); ?>
    </ul>
</div>

 

首先还是需要准备一幅图片作为当文章没有特色图片时显示的默认图片,并把该图放到主题文件夹里的 images 文件夹,这次我使用的是旅游拍摄时的图片(点我下载),当然你也可以使用自定义的图片,只要修改图片名或功能代码中相应的文件名即可。

本文由 Kayo Lee 发表,本文链接:https://kayosite.com/imitate-wumi-related-articles-two.html

评论列表

  • 评论者头像
    回复

    哈哈,沙发了,谢谢kayo分享方法

    • 评论者头像
      回复

      @沐歌 嘻嘻,方法的思路比较简单,折腾一下就好!

  • 评论者头像
    回复

    这个听给力的说 哥们现在用的 就是高仿无觅的这个嘛?

  • 评论者头像
    回复

    自己动手丰衣足食啊

  • 评论者头像
    回复

    想你看齐,嘿嘿u~~来学习哈~~

  • 评论者头像
    回复

    啊啦啦~~~我的友鏈頁面終於弄好啦~~~
    我也想弄個仿無覓的. 不想要無覓啦~~
    研究研究先~

    • 评论者头像
      回复

      @Leyar 哈哈,我看到Leyar的友情居了,见到Kayo的小名。
      不妨试试仿无觅的,无觅的点击时总是在地址栏里出现无觅的url,灰常不爽!

  • 评论者头像
    回复

    大師!!跪拜! :mrgreen:

  • 评论者头像
    回复

    这个功能不错,要是输出的rss也能就好。 :wink:

    • 评论者头像
      回复

      @Glow 这个?神马意思 :?:

      • 评论者头像
        回复

        @Kayo
        就是在阅读器中订阅你的博客也能看到推荐的博文。

        • 评论者头像
          回复

          @Glow 对喔,输出到rss里也不错,有空折腾一下这个!

  • 评论者头像
    回复

    又有新东西上市~ :mrgreen:

  • 评论者头像
    回复

    都是高手啊,我还是直接用插件了。
    欢迎老朋友们,回归尘埃影像,全新网站改版完毕,欢迎大家前来吐槽

  • 评论者头像
    回复

    这个不错。给力呀。

  • 评论者头像
    回复

    昨天给力的把无觅给干掉了 准备上你这个
    嘿嘿 支持一个

  • 评论者头像
    回复

    preg_match_all函数好给力啊!
    我看了你网站上的效果,真的高仿啊,就是有一点相关代码中抓取的图片都是原图,不像无觅那样截成小图省流量和加载时间
    赞~\(≧▽≦)/~

    • 评论者头像
      回复

      @贺昌 嘻嘻,正则表达式都是强大的!
      无觅的图是改了尺寸的,这个还没有留意到呢!看来又要折腾一下了!

  • 评论者头像
    回复

    嗯,这个还不错!现在主题有貌似的功能,虽然没这个强大,懒得折腾了……

    • 评论者头像
      回复

      @何静稔 嗯嗯,现在不少主题都有推荐文章的功能了,这个是个人折腾之用~

  • 评论者头像
    回复

    就是这么个方法,rss输出也可以这么写 :wink:

    • 评论者头像
      回复

      @无冷 嗯嗯,修改一下,应该也可以输出rss的!

  • 评论者头像
    回复

    这个不错,呵呵,我一直没有用无觅,不怎么喜欢用那种东西。 :mrgreen:

1 2

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O