敏捷个人手机应用中使用到的数据来源于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. 使用vim在Linux下编写C语言程序

    1.进入字符界面 2.创建文件夹用于存放源文件 mkdir helloworld    //创建文件夹命令 cd helloworld        //进入新建的文件夹,这里应该说目录比较好,win ...

  2. No prohects are avaliable for deployment to this server

    没有项目可用于部署到该服务器的项目或者所有项目都已部署到该服务器或没有发现项目 报错的就是这样的信息,网上看了很多解决方案,比如:http://ttov.blog.163.com/blog/stati ...

  3. C++混合编程之idlcpp教程Python篇(8)

    上一篇在这 C++混合编程之idlcpp教程Python篇(7) 第一篇在这 C++混合编程之idlcpp教程(一) 与前面的工程相似,工程PythonTutorial6中,同样加入了四个文件:Pyt ...

  4. 可在广域网部署运行的QQ高仿版 -- GG叽叽V3.5,增加自拍头像功能、细节优化(源码)

    距离上次发版本(GG叽叽V3.4,增加系统设置.最近联系人.群功能)又有1个月了,在这个月内,由于空闲时间不是很多,所以,GG增加的主要功能只是拍照并设定其为自己头像.修改密码.删除好友.以及一些bu ...

  5. 在cocos2dx和unity3d之间选择

    人生最纠结的事,莫过于有选择………… cocos2dx和unity3d从某种意义上讲,都很不错.但当面对特定需求以及团队情况的时候,总是能分出高下的. 假设,目标游戏是一款类似 刀塔传奇 的游戏 我们 ...

  6. InputStream与InputStreamReader的区别

    InputStream是字节流,多用于读取二进制数据 InputStreamReader是字符流,多用于读取文本文件.有不同的编码方式,如utf8等.可以在构造的时候指定编码方式. 例如,两者都有一个 ...

  7. nginx负载下站点错误响应会导致其他节点重复响应问题的解决过程

    目录 前言 问题来了 问题又来了 问题分析 困惑 转机 后续 前言: 这是我上周工作过程中的一次解决问题的过程.解决的是nginx负载下站点错误响应导致其他节点重复响应. 我在整理这个记叙文时,在给这 ...

  8. Ubuntu & MacOS安装Mysql & connector

    Ubuntu & MacOS安装Mysql & connector 1. 安装MySql sudo apt-get install mysql-server apt-get insta ...

  9. Cocos2d-x 3.X手游开发实例详解

    Cocos2d-x 3.X手游开发实例详解(最新最简Cocos2d-x手机游戏开发学习方法,以热门游戏2048.卡牌为例,完整再现手游的开发过程,实例丰富,代码完备,Cocos2d-x作者之一林顺和泰 ...

  10. asp.net 站点重启

    有时一些特殊情况需要重启站点,在System.Web.dll程序集下HttpRuntime类下有一个静态方法UnloadAppDomain,使用这个方法可以重启站点: protected void b ...