如何给wordpress首页自动显示文章内容的第一个图片
敏捷个人手机应用中使用到的数据来源于wordpress中,因为自己写的页面,所以可以自己写代码获取文章内容的第一个图片作为文章缩略图来显示,这样用户看到首页时图文并茂,感觉会好一些。

现在后台简单的使用PHP编写,使用正则表达式获取第一个图片地址
//格式化博客列表内容
private function formatIndexContent($blogs) {
//strip $rs content
foreach ($blogs as $blog) {
preg_match_all('|<img.*?src=[\'"](.*?)[\'"].*?>|i', $blog->post_content, $images);
$match = $images[1];
if (count($match) == 0) {
$blog->pic = "";
}
else {
$blog->pic = $match[0];
}
$blog->post_content = mb_substr(strip_tags($blog->post_content), 0, 140) . "...";
}
return json_encode($blogs);
}
敏捷个人网站使用的是自带的主题 Twenty Eleven Theme,之前也想把网页上wordpress首页自动显示一下缩略图,不过查找了一下网络,找到一个插件,用了一下发现这个插件的机制是生成一张缩略图,而我不希望它在我服务器上生成图片,我只是想要自动显示第一张图片作为缩略图而已。没改之前是这样的显示页面,看起来是不是觉得单调呢?

想改了好几次,今天决定改掉它,结果现在如下,是不是看了起来舒服多了啊。

下面我简单说一下,如何修改wordpress的php带来来实现这个首页自动显示文章内容缩略图的功能。
- 找到主题下的functions.php,增加一个现实第一个图片的方法。我是用的是 twentyeleven 主题,所以修改文件存在于 wp-content/themes/twentyeleven/functions.php
//获取文章第一张图片,如果没有图就会显示默认的图
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){
$first_img = bloginfo('template_url'). '/images/default-thumb.jpg';
}
return $first_img;
} - 首页是index.php生成的,我们能看到以下代码,
<?php get_template_part( 'content', get_post_format() ); ?>
说明是根据文章类型来生成的内容,不同文章类型的内容生成文件一般是content*.php的文件

我的文章之前都是用相册类型编写的,所以我只需要修改 content-gallery.php文件即可。找到 <div class="entry-content">,在后面添加显示图片的代码即可
<div class="entry-content">
<a href="<?php the_permalink(); ?>"><img src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>"/></a> //增加这一行即可
<?php if ( post_password_required() ) : ?> - 修改后,把functions.php和 content-gallery.php上传到服务器后即可
如何给wordpress首页自动显示文章内容的第一个图片的更多相关文章
- wordpress chronus主题 显示文章阅读数
wordpress chronus主题 显示文章阅读数 第一步:将下面的代码拷贝到文件 /wp-content/themes/chronus/inc/template-tags.php 中 funct ...
- 如何处理wordpress首页不显示指定分类文章
如何实现wordpress首页不显示指定分类文章,要实现这一步,首先必须找到需要屏蔽的该目录的id,那么如何查看wordpress的分类id呢?有两种方法: 通过wordpress后台查看分类的ID ...
- wordpress调用文章摘要,若无摘要则自动截取文章内容字数做为摘要
以下是调用指定分类文章列表的一个方法,作者如果有填写文章摘要则直接调用摘要:如果文章摘要忘记写了则自动截取文章内容字数做为摘要.这个方法也适用于调用description标签 <ul> & ...
- 数据库:MySQL实战;左链接;查询WordPress数据库中的文章内容
在1年前,我用学生价租了一个阿里云服务器(是真的便宜啊),自己在CentOS系统上用命令行搭了个WordPress的环境,开始了为期一个月使用自建博客的历程. 事实证明,博客在类似博客园这样的平台上写 ...
- Hexo瞎折腾系列(4) - 站点首页不显示文章全文
文章摘要设置 打开主题配置文件 _config.yml 文件,找到如下: # Automatically Excerpt. Not recommend. # Please use <!-- mo ...
- DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)
如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...
- 让wordpress标签云显示文章数的正确方法
先看一下效果 在百度经验找到一个教程,可惜,根据实践发现方法是错误的, 百度经验上的代码: 1 2 3 4 5 6 7 8 9 10 11 12 //标签tag所包含的文章数量 function Ta ...
- dede调取文章内容的第一张图片
dede调用文章第一张图片(非缩略图)的实现方法 这篇文章主要是介绍dede调用文章第一张图片的实现代码,需要的朋友可以参考下 需要进行两个操作 第一步,修改include/extend.func.p ...
- cell高度自动适应文章内容
效果: 描述:表视图中生成多个不同的cell,cell的高度跟文字内容的多少有关 要求:需要自己在网上下载一个plis文件,然后修改两个标题 一 : 创建工程文件UIAutomaticCellHeig ...
随机推荐
- nohup
在启动weblogic的时候我们经常看到如下的命令: nohup ./startWebLogic.sh >out.log 2>&1 & 从09年开始用weblogic到现在 ...
- MQTT V3.1----flow
该文章转自:聂永的博客(http://www.blogjava.net/yongboy/archive/2014/02/15/409893.html) 网络故障 在任何网络环境下,都会出现一方连接失败 ...
- 算法:POJ1006 三重峰值问题
这题有直接套公式的解法 这里提供一个O(n)的解法. package practice; import java.io.BufferedInputStream; import java.util.Sc ...
- javascript 设计模式-----工厂模式
所谓的工厂模式,顾名思义就是成批量地生产模式.它的核心作用也是和现实中的工厂一样利用重复的代码最大化地产生效益.在javascript中,它常常用来生产许许多多相同的实例对象,在代码上做到最大的利用. ...
- 如何用MediaCapture解决二维码扫描问题
二维码扫描的实现,简单的来说可以分三步走:“成像”.“截图”与“识别”. UWP开发中,最常用的媒体工具非MediaCapture莫属了,下面就来简单介绍一下如何利用MediaCapture来实现扫描 ...
- [.net 面向对象编程基础] (18) 泛型
[.net 面向对象编程基础] (18) 泛型 上一节我们说到了两种数据类型数组和集合,数组是指包含同一类型的多个元素,集合是指.net中提供数据存储和检索的专用类. 数组使用前需要先指定大小,并且检 ...
- Linux uniq命令
200 ? "200px" : this.width)!important;} --> 介绍 uniq命令是一个文本去重命令,它能对标准输入和文本文件进行去重操作,并且能将结 ...
- 如何为编程爱好者设计一款好玩的智能硬件(八)——LCD1602点阵字符型液晶显示模块驱动封装(中)
六.温湿度传感器DHT11驱动封装(下):如何为编程爱好者设计一款好玩的智能硬件(六)——初尝试·把温湿度给收集了(下)! 七.点阵字符型液晶显示模块LCD1602驱动封装(上):如何为编程爱好者设计 ...
- redis系列-redis的持久化
redis对数据的持久化有两种方式:RDB(快照保存)和AOF(命令日志). RDB 介绍:将内存快照保存到磁盘,dump.rdb二进制文件 触发:满足“N 秒内数据集至少有 M 个改动”,或使用sa ...
- JS判断鼠标移入元素的方向
最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...