为wordpress开启缩略图 如无缩略图则随机显示的方法

使用wordpress建站的站长大多喜欢用到缩略图,使页面更加漂亮。那在制作主题的时候要怎样运用呢?在网上找了一些方法,留着以后不时之需。

一、开启缩略功能

在主题的functions.php中,添加一段代码,代码如下:

1
add_theme_support( 'post-thumbnails' );

二、调用缩略图

判断一篇文章是否存在缩略图,如果有,则显示缩略图,否则显示默认缩略图。

1
2
3
4
5
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail( 'thumbnail' ); ?>
<?php else: ?>
//显示默认图片
<?php endif; ?>

the_post_thumbnail可以是字符串或数组

a.字符串参数时:thumbnail(小尺寸)、medium(中等尺寸)、large(大尺寸)、full(完整尺寸)

1
  <?php the_post_thumbnail( 'thumbnail' ); ?>

b.数组参数

//尺寸60×60

1
<?php the_post_thumbnail( array(60,60) ); ?>

c.默认尺寸:

1
<?php the_post_thumbnail(); ?>

三、add_image_size

如果大中小满足不了你的尺寸可使用

1
add_image_size('newchicun',148,100,$crop);

使用时:

1
<?php the_post_thumbnail('newchicun' ); ?>

四,设置默认图片

第一步:添加功能函数

找到使用的主题模板的functions.php文件添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if (function_exists('add_theme_support'))
add_theme_support( 'post-thumbnails' ) ;
function catch_first_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) ){
$random=mt_rand(1,20);
echo
get_bloginfo('stylesheet_directory');
echo'/images/random/tb'.$random.'.jpg';
}
return
$first_img;
}

请在主题目录images文件夹下建立random文件夹,里面存入20张图片,命名tb1-20,jpg格式

第二步:指定位置调用函数

找到index.php文件即首页文件,找到the_content();或相似的代码在它之前添加如下代码:

1
2
3
<a href="<?php%20the_permalink()%20?>" rel="bookmark" title="<?php the_title(); ?>">
<img class="card-img-top" src ="<?php echo catch_first_image() ?>" width="290px" height ="135px" alt ="<?php the_title(); ?>"/ >
</a>

第三步:添加缩略图样式CSS代码:

具体样式需要根据网站内容调整,如下作为示例

1
2
.home-thumb{margin:5px 15px 5px 5px; width: 140px; height:100px; border:3px solid
#eee;float:left;overflow:hidden;} .home-thumb img{max-height:186px;max-width:186px}
  1. 海涛说道:

    还有一个方法就是安装相关的插件来实现。

    先去后台管理安装Easy Thumbnail Switcher插件 直接搜索 下载完成后 启用。

    3.添加成功后,我们去文章列表看看效果,貌似没什么反应。

    4.去主题文件找到functions.php这个文件,添加下面的代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    //缩略图获取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>';
    }
    }
    }

    从代码中可以看出,其实不用安装上面那个插件也行的,插件的作用主要是上传自己想要的图片。

    整个代码分为三个部分,一个部分就是有特色图,第二个就是没有特色图,第三个就是以上都没有的情况下调用默认的缩略图。

    5.在页面中显示缩略图,在要显示缩略图的地方,加上下面这段代码即可

    1
    <?php post_thumbnail(210,130); ?>

    那么调用代码中的210和130就分别是宽度和高度了,大家根据自己的情况适当修改。

发表回复

您的电子邮箱地址不会被公开。

佛系随缘更新 表达欲望太低了……