生猛大蝦

关于wordpress缩略图的一些小代码

2014-10-24 1,303 1

最近著名的wordpress缩略图插件timthumb作者做了一个艰难的决定:停止这个缩略图插件的开发及维护.
哥跟着就悲剧了...
他妈的哥所有的wordpress站都是用了timthumb.php输出缩略图啊亲!!!
大爷个球的.
为了不被黑掉站点,只能赶紧找其他解决方案了...
这里来上几段性感的小代码,感谢提供他们的大咖们.

一下内容来自"我爱水煮鱼"
开启 WordPress 日志缩略图功能
要使用日志缩略图功能，首先需要通过函数 add_theme_support() 来开启，具体是在当前 WordPress 主题的 functions.php 文件中添加以下代码：

add_theme_support( 'post-thumbnails' );

上面的代码会在 WordPress 后台编辑日志的界面开启设置日志缩略图的窗体，并且同时给日志和页面开启缩略图功能，如果想单独开启的话，使用以下代码：

add_theme_support( 'post-thumbnails', array( 'post' ) ); // 给日志启用日志缩略图
add_theme_support( 'post-thumbnails', array( 'page' ) ); // 给页面启用日志缩略图

设置日志缩略图大小
开启了 WordPress 日志缩略图功能之后，我们可以通过函数 set_post_thumbnail_size() 来设置缩略图的大小，这里有两种方式：box-resize（盒大小模式）和 hard-crop（裁剪模式）。
盒大小模式按照比例缩小图片直到适合指定的盒子，所以不会扭曲图片。盒大小模式可以指定长度和宽度，比如一张 100X50 的图片在指定的 50X50 的盒子中会被缩小为 50X25。
这种模式的好处是可以显示整张图片，缺点是生成的图片并不是一样大的，它是按照最长边来设置的，所以有时候是长度一样，有时候是高度一样。如果我们想限制缩略图到一定的宽度，而不在乎它的高度，这时候我们可以指定缩略图的宽度，然后设置它的高度为 9999 或者其他任何认为够大的一个数字。代码如下：

set_post_thumbnail_size( 50, 50 ); // 50 像素宽和 50 像素高，盒大小模式（box resize mode）

第二种是硬裁剪模式（hard-crop），这种模式下，图片会被裁剪为指定的大小，这种方式的好处就是得到我们所希望的，比如我们希望的到一张 50X50 的缩略图，就会得到 50X50 的缩略图，缺点就是图片会被裁减，缩略图中只会显示图片的一部分。这种方式的代码是：

set_post_thumbnail_size( 50, 50, true ); // 50 像素宽和 50 像素高，裁剪模式（hard crop mode）

在主题中显示日志缩略图
现在我们要在主题中使用模板函数来显示日志缩略图，下面这些函数应该在 WordPress 的主循环中使用。
has_post_thumbnail()：判断当前日志是否有缩略图，如果有返回 true，否则为 false：

<?php
if ( has_post_thumbnail() ) {
	//当前日志有缩略图
} else {
	//当前日志没有设置缩略图
}
?>

the_post_thumbnail()：输出日志缩略图，如果缩略图存在的话。

<?php the_post_thumbnail(); ?>

WordPress 日志缩略图具体使用案例
假设我们想在首页使用一个比较小的 50X50 裁剪模式的缩略图，并且想在日志页面使用 400 像素宽（高度不限制）的图片？我们可以设置额外的自定义尺寸缩略图，代码如下：
在 functions.php 中添加如下代码：

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 50, 50, true ); // 普通的缩略图
add_image_size( 'single-post-thumbnail', 400, 9999 ); // 定义日志页面的缩略图大小

在当前主题的 index.php 或者 home.php（取决主题的结构）中的主循环添加如下代码：

<?php the_post_thumbnail(); ?>

在当前主题的 single.php （也是主循环中）添加如下代码：

<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

通过函数 set_post_thumbnail_size() 可以生成默认的日志缩略图。
除此之外，我们还可以通过调用 add_image_size(); 来增加额外的日志缩略图尺寸，然后在日志页面通过 the_post_thumbnail( ); 调用新的缩略图尺寸老显示新的缩略图。
其他 WordPress 日志缩略图相关的函数
get_post_thumbnail_id()：获取日志缩略图 ID
有时候我们想获取缩略图的 ID，日志缩略图的 ID 是存在 meta_key 为 _thumbnail_id 的值中，但是我们只需要使用下面简单的函数就可以获取日志的缩略图 ID：

$image_id = get_post_thumbnail_id();

get_the_post_thumbnail()：获取日志缩略图而不是输出它
有时候，我们可能在 PHP 代码中返回日志缩略图，而不是输出它，可以使用下面简单的代码：

$image = get_the_post_thumbnail( $post->ID, 'thumbnail' );

延伸一下:
WordPress 技巧：获取特色图片地址

<?php
/*
Plugin Name: 获取 WordPress 特色图片地址
Plugin URI:  http://blog.wpjam.com/m/get_post_thumbnail_url/
Description: 获取 WordPress 特色图片地址。
Version: 0.1
Author: Denis
Author URI: http://blog.wpjam.com/
*/
function get_post_thumbnail_url($post_id){
	$post_id = ( null === $post_id ) ? get_the_ID() : $post_id;
	$thumbnail_id = get_post_thumbnail_id($post_id);
	if($thumbnail_id ){
		$thumb = wp_get_attachment_image_src($thumbnail_id, 'thumbnail');
		return $thumb[0];
	}else{
		return false;
	}
}

将上面的代码复制到当前主题的 functions.php 或者单独保存为一个插件并上传激活。使用下面方法调用：

$post_thumbnail_url = get_post_thumbnail_url($post->ID);

WordPress 技巧：获取缩略图源地址
当你使用 WordPress 默认的日志缩略图功能的时候，如果想获取或者输出缩略图的地址，可以通过下面的函数代码：

$img_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full");
echo $img_src[0];

调用时,判断缩略图是否存在，没有的话显示默认图片:

<?php if ( has_post_thumbnail() ) { ?>
<?php the_post_thumbnail(); ?>
<?php } else {?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/default.jpg” /> // 默认图片地址
<?php } ?>

给图片加入alt，class属性:

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

再来:
相比与传统的wp缩略图（大多数主题作者使用的方法），这个集中了所有内容，首先是判断是否带特色图片，有则输出，无就判断是否文章内有图片，有就调用首图，无则调用默认图片（可调用随机文章，见15 16行注释部分）；还有一个好处就是，这个是直接输出缩略图的地址的，这样可以在外部定义缩略图的尺寸，及定义各种id class还有你懂的...

<?php  
function huilang_thumbnail(){  
    global $post;  
    if ( has_post_thumbnail() ){  
        $domsxe = simplexml_load_string(get_the_post_thumbnail());  
        $thumbnailsrc = $domsxe->attributes()->src;  
        echo $thumbnailsrc;  
    } 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 $strResult[1][0];  
        }else {  
            /*$random = mt_rand(1, 10); 
            echo get_bloginfo('template_url').'/img/thumb/img'.$random.'.png';*/  
            echo get_bloginfo('template_url').'/img/default.png';  
        }  
    }  
}  
?>

调用：

<?php huilang_thumbnail( ); ?>

例：

<img width="100" height="100" src="<?php huilang_thumbnail( ); ?>" alt="<?php the_title(); ?>" />

 

再补充一种感觉比较完善的解决办法:

//缩略图获取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 if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink() ?>"><span class="comic_simg_tr">
<?php // 获取特色图像的地址
$timthumb_src = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()) );
echo '<img src="' . $timthumb_src[0] . '" width="136" height="auto" border="0" alt="' . get_the_title() . '" class="thumb" /> '; ?>
</span></a>
<?php } else {?>
<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_url'); ?>/img/default.png" width="136" height="auto" /></a>
<?php } ?>

 

WordPress 技巧：获取缩略图源地址:

$img_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full");
echo $img_src[0];

 

 

 

 

感谢: http://blog.wpjam.com/article/wordpress-post-thumbnail/
http://huilang.me/the-thumbnails-wordpress-call/

虾兄
1 0

相关文章

MySQL 设置优化记录
来自 WPJAM 的修改，给图片文件名增加时间戳
wordpress 博客使用 CloudFlare 的页面规则缓存设置教程
Better Search Replace – 简单强大易用的数据库替换工具
WordPress获取文章所有图片和图片数量
删除 WooCommerce 产品页中的简介 – Remove Woocommerce Product Short Description

评论(1)

发布评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。

小 虾

哦也, 我是小虾

文章487 评论134