敏捷个人手机应用中使用到的数据来源于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. AIX常用命令总结

    1.查看机器硬盘信息 :lspv :lsdev -Cc disk :lsattr -EI hdisk0 :lscfg -vl hdisk0 2.查看AIX系统版本号 : oslevel -s : os ...

  2. HTML5-块元素标签的使用

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. wpf下datagrid使用过程中需要注意的几点(一)

    MainWindow.xaml中的代码如下: <DataGrid CanUserAddRows="False" ItemsSource="{Binding}&quo ...

  4. 解剖SQLSERVER 第七篇 OrcaMDF 特性概述(译)

    解剖SQLSERVER 第七篇  OrcaMDF 特性概述(译) http://improve.dk/orcamdf-feature-recap/ 时间过得真快,这已经过了大概四个月了自从我最初介绍我 ...

  5. 人人都是 DBA(VII)B 树和 B+ 树

    B 树(B-Tree)是为磁盘等辅助存取设备设计的一种平衡查找树,它实现了以 O(log n) 时间复杂度执行查找.顺序读取.插入和删除操作.由于 B 树和 B 树的变种在降低磁盘 I/O 操作次数方 ...

  6. Wix 安装部署教程(十五) --CustomAction的七种用法

    在WIX中,CustomAction用来在安装过程中执行自定义行为.比如注册.修改文件.触发其他可执行文件等.这一节主要是介绍一下CustomAction的7种用法. 在此之前要了解InstallEx ...

  7. 对map集合进行排序

          今天做统计时需要对X轴的地区按照地区代码(areaCode)进行排序,由于在构建XMLData使用的map来进行数据统计的,所以在统计过程中就需要对map进行排序. 一.简单介绍Map   ...

  8. 相识Highcharts,几分钟玩转Highcharts

    Highcharts是一个功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 官网:http://www.hcharts.cn/ 我觉得对于刚接触一个东西的新手来说,有时候对一个东西真 ...

  9. 自动备份文件到GITHUB的方法

    由于一个制作着玩的项目需要制作上传文件的功能,自己又不是搞网站的,也不想去维护一个服务器. 于是开发了一个上传服务器,可以自动把我上传到服务器的数据同步到Github服务器 而github服务器又提供 ...

  10. [每日电路图] 7、设计一个PCB的流程及细节·总结——给外行的同学或刚入行的同学一个宏观鸟瞰电路板设计的大致流程的文章

    前言 最近两天使用AD14软件设计了一个蓝牙防丢器电路板(PCB)图纸,中间有一些细节在本文中记录下,方便下次设计PCB时参考.也希望能给外行的同学或刚入行的同学一个宏观鸟瞰电路板设计的大致流程的文章 ...