WordPress纯代码高仿 无觅相关文章 图文模式功能

无觅的相关文章插件确实是一个不错的插件,Jeff的阳台到现在还在使用它(貌似产生了依赖性)。但到了devework.com,为了体现轻度、代码化的主题制作理念。所以在网络上找了些资料,结合自己不怎么样的技术,折腾出了个高仿无觅相关文章图文模式功能。具体效果见文章下方的“亲,意犹未尽?来看更多:”部分,是不是感觉还挺像呢?下面就分享一下折腾的成果。

首先说明,本方法实现的相关文章原理是通过获取该文章分类,找到同一分类的文章,这些文章即为“相关文章”。而图片的话,采用的是timthumb 截图(好处是节约空间,提高加载速度),默认的话是截取文章的第一张图片,文章没有图片的话就使用随机图片。

你要准备的东西

1、下载相关文件: timthumb.php 【点击下载】,放到主题根目录下。timthumb是一个PHP截图插件,具体功能请自行谷歌。 2、找十张图片作为随机图片,格式要一样(建议jpg格式,下面的代码默认为此),大小弄成你需要的大小(下面代码默认是114×114)。放入主题的images文件夹中(一般都有吧?) 3、在你的主题根目录下新建一个文件夹为cache,文件夹的权限设置为777

折腾教程

一、在你的主题需要显示效果文章的地方加入以下代码:

<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=5'); //控制相关文章排序为随机,显示5篇相关文章 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 $thumbnail[0]; ?>" alt="<?php the_title(); ?>" /></a> <?php } else { ?> <a class="same_cat_posts_img" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"> <img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo post_thumbnail_src(); ?>&h=114&w=114&zc=1" alt="<?php the_title(); ?>" class="thumbnail"/></a> <?php } ?><p class="same_cat_posts_tittle"><a itemprop="relatedLink" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <?php the_title(); ?></a></p></li><?php endwhile; wp_reset_query(); ?> </ul> </div>

你需要修改的地方:第4行相关文章形式的数量,代码的是5篇。第9行的114×114该成你需要的。

二、添加以下css代码到你的主题的style.css样式文件中:

/* Devework.com 相关文章 */ .same_cat_posts a {color: #555; text-decoration: none} .same_cat_posts {width:670px; height: 160px; margin: 25px 0px 5px 0px; } .same_cat_posts h3 {margin-bottom: 10px; font-weight: bolder; font-size: 16px;border-bottom:2px solid #08A5E0;padding-bottom:12px} .same_cat_posts ul {list-style: none; margin-left: -43px} .same_cat_posts ul li {float: left; padding: 5px; border-right: 1px solid #CCC;height: 168px;overflow:hidden} .same_cat_posts ul li:hover {background: #C3E99E} .same_cat_posts ul li img {width: 113px; height: 113px; padding: 2px; border: 1px solid #CCCCCC} .same_cat_posts ul li .same_cat_posts_tittle { margin-left: 2px; width: 113px;font-size:12px}

你需要修改的地方:基本上有数字的地方都要修改。

三、在主题的funtions.php的最后一个 ?> 前添加下面的代码:

//添加特色缩略图支持 devework.com if ( function_exists('add_theme_support') )add_theme_support('post-thumbnails'); //输出缩略图地址 devework.com function post_thumbnail_src(){ global $post; if( $values = get_post_custom_values("thumb") ) { //输出自定义域图片地址 $values = get_post_custom_values("thumb"); $post_thumbnail_src = $values [0]; } elseif( has_post_thumbnail() ){ //如果有特色缩略图,则输出缩略图地址 $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full'); $post_thumbnail_src = $thumbnail_src [0]; } else { $post_thumbnail_src = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $post_thumbnail_src = $matches [1] [0]; //获取该图片 src if(empty($post_thumbnail_src)){ //如果日志中没有图片,则显示随机图片 $random = mt_rand(1, 10); echo get_bloginfo('template_url'); echo '/images/'.$random.'.jpg'; //如果日志中没有图片,则显示默认图片 //echo '/images/default_thumb.jpg'; } }; echo $post_thumbnail_src; }

如果你大概看的懂的话,第4、5行的输出自定义域图片地址的代码可能对你没必要,可以删除。不懂的话就不要删除啦。

保存,刷新,搞定!

再来一句:效果见下面。

相关文章:《WordPress 代码实现相关文章(列表模式)功能

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

CRM WebClient UI的浏览器打印实现

WebClient UI上自带了一个打印按钮,按Ctrl + P后可以生成一个新的页面供打印。

42030
来自专栏假装我会写代码

highlight.js 在 Vue 中使用的一点儿经验

33120
来自专栏向治洪

webpack+react环境搭建

前言 我们知道前端的框架纷繁复杂,各有各的优点。而我们选择使用React作为开发框架的时候,往往会选择Webpack+Babel+React来开始我们的项目。之...

24070
来自专栏mySoul

微信小程序插件

微信小程序插件是对一组js接口,自定义组件或页面的封装,用来嵌入微信小程序中,用来被开发者调用。

2.5K30
来自专栏進无尽的文章

兼容-记录Xcode8.0恢复插件全过程

Xcode 的插件大大丰富了 Xcode 的功能,而且有了 Alcatraz ,插件的管理也非常容易,但是有个非常恼人的问题:一旦升级 Xcode ,插件就失效...

17820
来自专栏BestSDK

开发微信小程序,必知的40个小技巧

微信小程序开发者和开发需求者必读的40条技巧分享: Q:为什么脚本内不能使用window等对象 A:页面的脚本逻辑是在JsCore中运行,JsCore是一个没有...

66030
来自专栏Crossin的编程教室

【编程课堂】以 jQuery 之名 - 爬虫利器 PyQuery

很多读者在学习了 Python 之后都想做一些爬虫程序,去网上采集数据或完成一些自动化操作。因此,我们也制作了一套爬虫实战课程,目前正在最后的完善中,很快将和各...

37970
来自专栏娱乐心理测试

40条微信小程序技巧分享

22830
来自专栏Debian社区

Tmux 快速教程:快捷键和配置

Tmux 简单来说就是终端里的『窗口管理器』,如果我使用终端登录到远程主机并运行前台程序,那么这个窗口等于就被占用了,想要看一下 CPU 的使用率,就得再连接一...

48120
来自专栏云飞学编程

Python大牛带你一节课开发一个自定义翻译网站

涉及知识点: web前端模板应用,模板语言应用 web后端开发,数据库入库,查询 爬虫开发,cookie保持,js加密 推荐下小编的Python学习群54211...

11120

扫码关注云+社区

领取腾讯云代金券