第11课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、前台调用

  1. <div class="col-sm-12 col-md-12 featured-thumb">
  2.       <?php if (has_post_thumbnail()) : ?>  
  3.         <a href="<?php the_permalink() ?>" title="<?php the_title_attribute() ?>"><?php the_post_thumbnail('pop-thumb'); ?></a>           
  4.       <?php endif; ?>
  5.    </div>

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控制响应式缩放图片

  1.  
  2. jQuery(function($){
  3.   $('.featured-thumb img').addClass('img-responsive');
  4. });

发布日期:

所属分类: WordPress 主题 标签:  


下一篇:

没有了,已经是最新文章