敏捷个人手机应用中使用到的数据来源于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带来来实现这个首页自动显示文章内容缩略图的功能。

  1. 找到主题下的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;
    }
  2. 首页是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() ) : ?>
  3. 修改后,把functions.php和 content-gallery.php上传到服务器后即可

如何给wordpress首页自动显示文章内容的第一个图片的更多相关文章

  1. wordpress chronus主题 显示文章阅读数

    wordpress chronus主题 显示文章阅读数 第一步:将下面的代码拷贝到文件 /wp-content/themes/chronus/inc/template-tags.php 中 funct ...

  2. 如何处理wordpress首页不显示指定分类文章

    如何实现wordpress首页不显示指定分类文章,要实现这一步,首先必须找到需要屏蔽的该目录的id,那么如何查看wordpress的分类id呢?有两种方法: 通过wordpress后台查看分类的ID ...

  3. wordpress调用文章摘要,若无摘要则自动截取文章内容字数做为摘要

    以下是调用指定分类文章列表的一个方法,作者如果有填写文章摘要则直接调用摘要:如果文章摘要忘记写了则自动截取文章内容字数做为摘要.这个方法也适用于调用description标签 <ul> & ...

  4. 数据库:MySQL实战;左链接;查询WordPress数据库中的文章内容

    在1年前,我用学生价租了一个阿里云服务器(是真的便宜啊),自己在CentOS系统上用命令行搭了个WordPress的环境,开始了为期一个月使用自建博客的历程. 事实证明,博客在类似博客园这样的平台上写 ...

  5. Hexo瞎折腾系列(4) - 站点首页不显示文章全文

    文章摘要设置 打开主题配置文件 _config.yml 文件,找到如下: # Automatically Excerpt. Not recommend. # Please use <!-- mo ...

  6. DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)

    如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...

  7. 让wordpress标签云显示文章数的正确方法

    先看一下效果 在百度经验找到一个教程,可惜,根据实践发现方法是错误的, 百度经验上的代码: 1 2 3 4 5 6 7 8 9 10 11 12 //标签tag所包含的文章数量 function Ta ...

  8. dede调取文章内容的第一张图片

    dede调用文章第一张图片(非缩略图)的实现方法 这篇文章主要是介绍dede调用文章第一张图片的实现代码,需要的朋友可以参考下 需要进行两个操作 第一步,修改include/extend.func.p ...

  9. cell高度自动适应文章内容

    效果: 描述:表视图中生成多个不同的cell,cell的高度跟文字内容的多少有关 要求:需要自己在网上下载一个plis文件,然后修改两个标题 一 : 创建工程文件UIAutomaticCellHeig ...

随机推荐

  1. Python学习笔记1——Python基础

    一. 数据类型和变量 整数:十六进制用0x前缀和0-9,a-f表示 浮点数:小数,科学计数法:10用e代替:整数和浮点数在计算机内部存储的方式是不同的,整数运算永远是精确的(包括除法),浮点数运算则可 ...

  2. Ceph性能测试工具和方法。

    0. 测试环境 同 Ceph 的基本操作和常见故障排除方法 一文中的测试环境. 1. 测试准备 1.1 磁盘读写性能 1.1.1 单个 OSD 磁盘写性能,大概 165MB/s. root@ceph1 ...

  3. Magicodes.Shop——版本历史

    Magicodes.Shop为湖南心莱信息科技有限公司(xin-lai.com)Magicodes系列产品之一. 产品中引用的Magicodes系列Nuget包的开源库地址为:https://gith ...

  4. 【Bugly干货分享】手把手教你逆向分析 Android 程序

    很多人写文章,喜欢把什么行业现状啊,研究现状啊什么的写了一大通,感觉好像在写毕业论文似的,我这不废话,先直接上几个图,感受一下. 第一张图是在把代码注入到地图里面,启动首页的时候弹出个浮窗,下载网络的 ...

  5. 使用you-get下载视频网站视频或其他

    使用you-get下载视频网站视频或其他 文/玄魂 目录 使用you-get下载视频网站视频或其他 前言 1.1 下载.安装 依赖 exe安装 pip安装 Antigen安装 Git 克隆源码 Hom ...

  6. 四则运算的实现(C++)重做

    #include <iostream> using namespace std; void main() { int a0[1000],b0[1000],c0[1000],a1[1000] ...

  7. 通过分析iframe和无阻塞脚本关系能让我们更懂iframe

    在我上篇文章里,我提到一种使用iframe完成无阻塞脚本加载的方式,因为我对iframe的偏见很大,所以上篇文章里我没有展开讨论这个问题. 文章发表后有位网友问了我这样一个问题,下面是他问题的原文,如 ...

  8. 使用抓包工具SpyNet对你的网络进行监控

    步骤1:下载并安装SpyNet Sniffer嗅探器之后,第一次运行SpyNet Sniffer后,将会弹出[Settings(设置)]对话框,在其中选择需要监听对象,如图所示. 步骤2:单击[Act ...

  9. C# 获取当前日期在指定日期范围内是第几周

    public static int GetWeekOfDay(DateTime start, DateTime end) { //总周数 )); //用于存储日期 var weekDic = new ...

  10. GOOGLE PROTOBUF开发者指南

    原文地址:http://www.cppblog.com/liquidx/archive/2009/06/23/88366.html 译者: gashero 目录 1   概览 1.1   什么是pro ...