wordpress文章编辑器加入特色图像支持的完美方法

最近在做Parallelism主题,由于我把这个主题定位在相册方面,所以特色图片功能至关重要,于是乎,我先通过以下代码给wordpress后台文章编辑器里加入了特色图像支持(添加在主题的functions.php文件中):

1
2
 
add_theme_support( 'post-thumbnails' );

添加之后,在后台的文章编辑器里就会多出一个“特色图片”选项来,如图:QQ截图20170313221900
对了,add_theme_support函数可以很方便给主题添加一些功能支持:函数解释如下:

1
2
3
4
5
6
7
8
9
    <?php   
    add_theme_support( $feature );   
    //参数feature可以使下列内容   
    //'post-formats'-添加文章形式支持,比如相册、图像、视频   
    //'post-thumbnails'-特色图像   
    //'custom-background'-自定义背景   
    //'custom-header'-自定义头部   
    //'automatic-feed-links'-文章和评论RSS feed链接   
    ?>

添加缩略图支持还可以这样:

1
2
3
4
5
6
    <?php   
    add_theme_support( 'post-thumbnails' ); //所有   
    add_theme_support( 'post-thumbnails', array( 'post' ) );          // 只文章   
    add_theme_support( 'post-thumbnails', array( 'page' ) );          // 只页面   
    add_theme_support( 'post-thumbnails', array( 'post', 'movie' ) ); // post和Movies(自定义文章类型)   
    ?>

设置缩略图大小,代码如下:

1
2
3
4
5
    <?php   
    set_post_thumbnail_size( 120, 120, true );   
    //前面两个参数分别为-宽、高   
    //后面参数为是否裁剪图片到这么大 true为裁剪   
    ?>

设置了缩略图大小之后,并不是说你输出特色图像的时候就直接输出这个大小,这个代码的功能只是在你设置缩略图的时候将那个图片生成了一个你设定大小的图片。输出特色图像的时候还是要加上大小,不然就会输出原图。
调用特色图片的方式也很简单,上传特色图片后在需要调用的地方插入以下代码:

1
<?php the_post_thumbnail(); ?>

如果不想简单的使用一个输出缩略图的函数,那就加上一些判断,用户有设置特色图像的时候就输出特色图像,没有设置的时候就调用文章内容中的第一张图像,如果还没有的话,就调用一个默认图片。

1
2
3
4
5
6
7
    <?php   
    $thumb_img = has_post_thumbnail() ? get_the_post_thumbnail( $post->ID, array(360, 200), array('alt'=>$post->post_title) ) : get_post_img( 360, 200 );   
    //has_post_thumbnail判断是否有特色图像,arry(360,200)为特色图像大小   
    //get_the_post_thumbnail调用图像   
    //get_post_img是自定义的调用文章内容中图片函数   
    echo $thumb_img;   
    ?>

将文章内容中的图片取出来原理很简单,用函数get_post_img即可从文章内容中匹配图片,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    <?php   
    //获取缩略图   
    function get_post_img($width="100",$height="100") {   
        //申明全局变量   
        global $post;   
 
        $first_img = '';   
        //从文章内容中匹配图片代码   
        $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
        //要返回的代码$matches[1][0]为匹配的第一个图片代码  
        $first_img = '<img src="'. $matches[1][0] .'" width="'.$width.'" height="'.$height.'" alt="'.$post->post_title .'"/>';  
        //如果没有图片,返回默认图片的代码  
        if(empty($matches[1][0])){  
            $first_img = '<img src="'. get_bloginfo('template_url') .'/images/defalt.png" alt="'.$post->post_title .'" width="'.$width.'" height="'.$height.'"/>';   
        }   
 
        return $first_img;   
    }   
    ?>

最后在主题的/images 目录下上传一张名为defalt.png 的图片作为默认图片即可。
关于将文章中显示的第一张图设为特色图像的教程我之前也分享过,但方法略有不同,可以参考:http://blog.bcdon.com/2016/12/2550.html
获取wordpress特色图片URL地址的两种方法可参考:http://blog.bcdon.com/2017/03/2732.html

发表一条评论:

电子邮件地址不会被公开。 必填项已用*标注