第11课WordPress主题制作启用特色图像

本课示范了在wordpress主题制作过程中如何实现特色图像的支持，并且如何让特色图像实现响应式，以下是笔记和部分源码。

1、wordpress免插件自动为文章添加设置特色图像的三种方法

（http://www.511yj.com/wordpress-featured-image.html ）

/*

*增加特色图像

*/

if ( function_exists( 'add_theme_support' ) ) { // Added in 2.9

add_theme_support( 'post-thumbnails' );

//add_image_size('pop-thumb',542,340,true );

// Permalink thumbnail size

}

2、前台调用

PHP if (has_post_thumbnail()) : ?>

PHP the_permalink() ?>" title="PHP the_title_attribute() ?>">PHP the_post_thumbnail('pop-thumb'); ?>

PHP endif; ?>

优酷土豆链接：优酷土豆视频高清观看

优酷全部教程播单：http://i.youku.com/i/UNTU3NDYyODg0/playlists

wordpress主题制作综合教程：http://list.youku.com/albumlist/show/id_49481719

交流群：521068947

本人QQ: 272586593

3、style.css

/*-------------------------------------------------------------

缩略图

---------------------------------------------------------------*/

.featured-thumb {

border-top: #ccc solid 3px;

overflow: hidden;

transition: 0.5s all ease;

-webkit-transition: 0.5s all ease;

-moz-transition: 0.5s all ease;

-ms-transition: 0.5s all ease;

-o-transition: 0.5s all ease;

padding:0;

}

4、js控制响应式缩放图片

 

jQuery(function($){

$('.featured-thumb img').addClass('img-responsive');

});