梓悦生活

  • 🍟首页
  • 🍪免费资源
  • 🍓Wordpress
  • 🍋琐碎生活
  • 🍘关于
关注周围的人或事,体验人生历程
  1. 首页
  2. Wordpress
  3. 正文

wordpress特色图像功能

2016/09/07 3646点热度 0人点赞 0条评论

尽量多用视觉。图像比文字更容易记忆,可以使学习更有效率(甚至可以让知识回想与转述的效率提升89%)。图像也可以让事情更容易理解,将文字放进或靠近想关联的图像中,而不是把文字放在底部或下一页,让学习者解读相关内容时可达到事半功倍的效果。

所以技术文章,最好配一些图,虽然可以完全靠文字来理解,但是一张图片能够让读者更容易理解,所以图片是技术文章不可或缺的一部分。这篇文章介绍wordpress缩略图的几种方法。

wordpress自带的缩略图功能(特色图像)

只需要在functions.php中加入代码就能实现此功能。

add_theme_support( 'post-thumbnails' );//可以针对页面或者日志开启此功能
add_theme_support( 'post-thumbnails', array( 'post' ) ); // 给日志启用日志缩略图
add_theme_support( 'post-thumbnails', array( 'page' ) ); // 给页面启用日志缩略图

wordpress开启特色图片功能代码

-----------------------------------------------------------------------------------------------------

开启此功能后会在文章的右下角出现此功能。如果已经确认开启,却没有发现此功能,在编写文章的页面,显示选项中查看是否显示此项。

然后在要调用的地方加入如下代码:

<?php the_post_thumbnail(); ?>

特色图片其他操作

缩略图设置不同的尺寸,但是缺点是你如果本来默认3中大小尺寸,你再加3个,总共有6张大小不同的图片,有点浪费空间。

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); // 默认尺寸的设置顺序是: 宽度、高度
add_image_size( 'first', 50, 50, true );//设置顺序:名称、宽度、高度
add_image_size( 'second', 75, 75, true );
add_image_size( 'third', 100, 100, true );

要调用的地方加入如下代码

<?php the_post_thumbnail('second'); ?>

给图片加入alt,class属性

<?php the_post_thumbnail('thumbnail',array(
    'alt' => trim(strip_tags( $post->post_title )),
    'title'=> trim(strip_tags( $post->post_title )),
   ‘class’ =>‘thumb’
    )
); ?>

自定义设置缩略图

完善的大概有两种,其中缓存版是将外链图片复制到自己服务器上。

非缓存版缩略图操作方法

非缓存版php代码如下:

//缩略图获取post_thumbnail
function post_thumbnail( $width = 275,$height = 170 )
{
    global $post;
    //如果有特色图片则取特色图片
    if ( has_post_thumbnail() )
    {
        echo '<a href="'.get_permalink().'" class="thumbnail">';
        $domsxe = simplexml_load_string(get_the_post_thumbnail());
        $thumbnailsrc = $domsxe->attributes()->src;
        echo '<img src="'.$thumbnailsrc.'" alt="'.trim(strip_tags( $post->post_title )).'" width="'.$width.'" height="'.$height.'"/>';
        echo '</a>';
    }
    else
    {
        $content = $post->post_content;
        preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
        $n = count($strResult[1]);
        //没有设置特色图片则取文章第一张图片
            if($n > 0)
            {
                echo '<a href="'.get_permalink().'" class="thumbnail"><img src="'.$strResult[1][0].'"  alt="'.trim(strip_tags( $post->post_title )).'" width="'.$width.'" height="'.$height.'"/></a>';
            }
            else
            {
                //既没有设置特色图片、文章内又没图片则取默认图片
                echo '<a href="'.get_permalink().'" class="thumbnail"><img src="'.get_bloginfo('template_url').'/img/no-has-thumbnail.png" alt="wordpress技巧——特色图像功能以及自定义缩略图设置"  alt="'.trim(strip_tags( $post->post_title )).'" width="'.$width.'" height="'.$height.'"/></a>';
            }
    }
}

以上代码加入functions.php中,调用方法如下:

<?php post_thumbnail(210,130); ?>
因为它智能采取缩略图又可以自定义大小,但是对于有些用外链图片的博客则有点欠妥,,引用外链图片影响网页加载速度和已写不稳定因素,以下缓存版就能解决外链图片问题。

缓存版缩略图操作方法

缓存版缩略图php代码如下:

// 加入缩略图
add_theme_support( 'post-thumbnails' );
function post_thumbnail( $width = 100,$height = 80 ){
    global $post;
    if( has_post_thumbnail() )
    { //如果有缩略图,则显示缩略图
        $timthumb_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
        $post_timthumb = '<img src="'.get_bloginfo("template_url").'/timthumb.php?src='.$timthumb_src[0].'&h='.$height.'&w='.$width.'&zc=1" alt="'.$post->post_title.'" class="thumb" />';
        echo $post_timthumb;
    }
    else
    {
        $post_timthumb = '';
        ob_start();
        ob_end_clean();
        $output = preg_match('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $index_matches); //获取日志中第一张图片
        $first_img_src = $index_matches [1]; //获取该图片 src
        if( !empty($first_img_src) )
        {//如果日志中有图片
            $path_parts = pathinfo($first_img_src); //获取图片 src 信息
            $first_img_name = $path_parts["basename"]; //获取图片名
            $first_img_pic = get_bloginfo('wpurl'). '/cache/'.$first_img_name; //文件所在地址
            $first_img_file = ABSPATH. 'cache/'.$first_img_name; //保存地址
            $expired = 604800; //过期时间
            if ( !is_file($first_img_file) || (time() - filemtime($first_img_file)) > $expired )
            {
                copy($first_img_src, $first_img_file); //远程获取图片保存于本地
                $post_timthumb = '<img src="'.$first_img_src.'" alt="'.$post->post_title.'" class="thumb" />'; //保存时用原图显示
            }
                $post_timthumb = '<img src="'.get_bloginfo("template_url").'/timthumb.php?src='.$first_img_pic.'&h='.$height.'&w='.$width.'&zc=1" alt="'.$post->post_title.'" class="thumb" />';
            } else
            { //如果日志中没有图片,则显示默认
            $post_timthumb = '<img src="'.get_bloginfo("template_url").'/images/default_thumb.gif" alt="wordpress技巧——特色图像功能以及自定义缩略图设置" alt="'.$post->post_title.'" class="thumb" />';
        }
        echo $post_timthumb;
    }
}

将以上代码塞入functions.php文件中,然后操作以下两步:

  1. 主题文件中加入timthumb.php文件
  2. 调用方法<? php post_thumbnail( 100,80 ); ?>其中参数是必须的。
标签: wordpress
最后更新:2016/09/14

Meteor

关注周围的人或事,体验人生历程!

点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

文章目录
  • wordpress自带的缩略图功能(特色图像)
    • 特色图片其他操作
  • 自定义设置缩略图
    • 非缓存版缩略图操作方法
    • 缓存版缩略图操作方法
最新 热点 随机
最新 热点 随机
[教程]AWS免费EC2注册/使用/添加IPV6/SSH连接/删除实例 使用VestaCP搭建邮局(含DKIM,DMARC教程) [教程]利用宝塔面板邮局管理器搭建Roundcube Webmail自建邮局 [测评]喵云互联绍兴电信NAT套餐1测评 iperf3 网络性能测试 [收藏]13 个免费 PPT 模板网站汇总
[测评]喵云互联绍兴电信NAT套餐1测评[教程]利用宝塔面板邮局管理器搭建Roundcube Webmail自建邮局使用VestaCP搭建邮局(含DKIM,DMARC教程)[教程]AWS免费EC2注册/使用/添加IPV6/SSH连接/删除实例
Zymic免费6G支持PHP稳定空间 抓取Bing每天资讯 OpenVZ魔改BBR - lkl-rinetd 一键脚本 利用DNSPod实现动态域名解析DDNS CloudFlare的WordPress插件 Vultr 推出免费云主机,用于鼓励全球创新
最近评论
b2b系统 发布于 1 年前(12月29日) 感谢分享
Meteor 发布于 2 年前(10月20日) 哈哈,友链一直都在,后来换了主题后忘记修改显示数量了,现在恢复好了。
弋牧 发布于 2 年前(10月12日) 这里已经看不到我的友连了吗?
彩鸽 发布于 2 年前(10月04日) 写的不错
B2B海外商城系统 发布于 2 年前(09月21日) 感谢分享
标签聚合
技巧 wordpress Linux技巧 虚拟主机 域名解析 VPS 活动 宝塔
友情链接
  • Anders Norén
  • Appurse
  • CSS参考手册
  • DeeTeam-迪提姆
  • Fatesinger
  • FreeSSL
  • gandi
  • Internetbs
  • LogoMaker
  • Meteor's Blog
  • PM唐杰
  • SSL For Free
  • WPEX-Themes
  • 优品PPT
  • 免费顶级域名
  • 博客大全
  • 印记
  • 弋牧
  • 挖站否
  • 闫宝龙博客

COPYRIGHT © 2023 梓悦生活. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang