本课示范了在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、前台调用
<div class="col-sm-12 col-md-12 featured-thumb">
<?php if (has_post_thumbnail()) : ?>
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute() ?>"><?php the_post_thumbnail('pop-thumb'); ?></a>
<?php endif; ?>
</div>
优酷土豆链接：优酷土豆视频高清观看
优酷全部教程播单：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');
});