仿“无觅”相关文章效果

/ 40评 / 1

无觅的相关文章效果相信很多朋友都非常喜欢,而且效果很棒,但是它每次访问相关文章的时候,并不是直接访问的文章对应链接,而是通过跳转的方式,虽然效果没什么不通过,但是总觉得别扭,于是搜索代码中~~~

百度结果中,有不少结果,经过我测试使用,我只成功使用了来自Kayosite提供的代码,效果和无觅非常相似,经过我的一番调整和增强,我已经深深爱上了它,于是不敢独享,拿出来分享一下。

其实效果非常简单,首先将下方代码粘贴到 文章页面 模板的合适位置

<div class="same_cat_posts">
<h3>猜你喜欢</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=6'); //控制相关文章排序为随机,显示6篇相关文章
while (have_posts()) : the_post();
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');
?>
<li>
<?php if ( has_post_thumbnail() ) { ?>
<a class="same_cat_posts_img" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php echo catch_first_image() ?>" alt="<?php the_title(); ?>" /></a>
<? } else { ?>
<a class="same_cat_posts_img" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php echo post_thumbnail_src(); ?>&h=96&w=96&zc=1" alt="<?php the_title(); ?>" class="thumbnail"/></a>
<? } ?>
<p class="same_cat_posts_tittle"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php echo mb_strimwidth(get_the_title(), 0, 35, '…'); ?></a></p>
</li>
<?php endwhile; wp_reset_query(); ?>
</ul>
</div>

然后添加CSS

/* 相关文章 */
.same_cat_posts a {color: #555; text-decoration: none; }
.same_cat_posts {width: 730px; height: 160px; margin: 5px 0px 5px 0px; }
.same_cat_posts h3 {margin-bottom: 10px; font-weight: bolder; font-size: 10pt;}
.same_cat_posts ul {list-style: none; margin-left: 25px;}
.same_cat_posts ul li {float: left; padding: 5px; border-right: 1px solid #CCCCCC; }
.same_cat_posts ul li:hover {background: #dddddd; }
.same_cat_posts ul li img {width: 96px; height: 90px; padding: 2px; border: 1px solid #CCCCCC; }
.same_cat_posts ul li .same_cat_posts_tittle { margin-left: 2px; width: 96px; height: 50px; font-size: 9pt; text-decoration: none; }

这里特别注意的是CSS,你需要调整!仿 无觅 效果是否相似,CSS决定一切

经过上方操作后,下面你需要下载下面的文件,解压并上传到正在使用的主题目录里

点击下载 | 备用下载1备用下载2

上传后,将cache文件夹的权限设置为777

好啦,完场上方操作后,刷新一下你文章页面,是不是有效果了呢?

  1. 无名说道:

    我用的好像是水煮鱼的插件,主题背景换了哈 ❓

  2. GW_Soul说道:

    问下主人翁这个博客首页的文章显示部分,文章摘要的显示字数是如何实现的?
    本银小白,望指点。。
    另外能不能实现诸如
    ipc.me中那个“特卖“页面?
    谢谢!

    • Tokin说道:

      @GW_Soul 文章摘要百度一下方法有很多的,至于你说的那个“特卖”貌似新建个页面就行了吧…

  3. 瞳梦说道:

    增加内链的功效 相关文章的外表

  4. oyoy说道:

    手机上橹过,点了广告,不知道有没有用。

  5. 韩麦斯说道:

    现在懒的添加什么了,好多功能我都减掉了,为的就是减少数据库查询

  6. 黑涩的猪说道:

    实在是懒得添加

  7. 大发说道:

    我就是不喜欢他那个跳转。。

  8. 秦天添博客说道:

    要改动这么多地方么,表示有压力。 😥

  9. oyoy说道:

    主题已带,无压力。这娃娃真能折腾。有空帮我研究下倡萌那儿侧边栏怎么显示出了大学的最新文章呢,我想在山庄侧边栏显示你们3个的最新文章,哈哈

    • Tokin说道:

      @oyoy 大发的主题好丰富的功能啊…
      方法倒是有,还不少呢,Rss能实现Js也能实现,不过我都没测试过,不知道行不行,有空我研究呀

  10. Xider说道:

    小清新风格的主题,我喜欢~ 😆

    不过我还是不怎么喜欢加这个..这个貌似也没带来多大成效~

发表评论

邮箱地址不会被公开。 必填项已用*标注