【10.WordPress Featured Image Tutorial】
【1.一个简单的添加特色图案例】:
1.在后台创建特色图增加功能,在functioni.php加入如下代码
~~~
// Theme setup
function learningWordPress_setup(){
// Navigation Menus 注册菜单功能
register_nav_menus(array(
'primary' => __( 'Primary Menu' ),
'footer' => __( 'Footer Menu' ),
));
// And featured image support
add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'learningWordPress_setup');
~~~
2.在index.php添加缩略图无加工代码:
`<?php the_post_thumbnail(); ?>`
效果如下:

【2.完整一些的添加案例】:
1.在function.php添加代码:
~~~
// Theme setup
function learningWordPress_setup(){
// Navigation Menus 注册菜单功能
register_nav_menus(array(
'primary' => __( 'Primary Menu' ),
'footer' => __( 'Footer Menu' ),
));
// And featured image support
add_theme_support('post-thumbnails');
add_image_size('small-thumbnail',180,120,true);
add_image_size('banner-image',920,210,array('left','top'));
}
add_action('after_setup_theme', 'learningWordPress_setup');
~~~
如图:

2.在index.php添加代码:
~~~
<article class="post <?php if (has_post_thumbnail() ) { ?> has-thumbnail <?php } ?>">
<!-- post-thumbnail -->
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('small-thumbnail'); ?></a>
</div><!-- /post-thumbnail -->
<!-- ...
</article> -->
~~~
如图:

3.在single.php添加代码:
<?php the_post_thumbnail('banner-image'); ?>
如图:

4.在style.css添加样式代码:
~~~
/* Image Style */
img{
max-width:100%;
height:auto;
}
.has-thumbnail{
position:relative;
padding-left:200px;
}
.post-thumbnail{
position:absolute;
top:0;
left:0;
}
~~~
如图:

输入以上代码,实际效果是这样:

而理论上的效果,应该是这样:

当然,这只是一个简单的案例展示,真正的需要我们自己不断去完善。
【备注】:
上传图片的时候,wordpress除了本身尺寸外,还会自动生成几种不同的尺寸,150X150,300X180,768X480,1024X640:

当对媒体库的图片进行截裁时,生效时,源文件会另外生成一个新的图片尺寸:

但是在后台中看到的会是直接替换原来的图片:

在wordpress中,有时想要修改图片的显示设置生效,需要重新上传一次图片,如在single.php想要显示不同尺寸的图片。
- WordPress平台的网站开发
- 电商主题开发
- WooCommerce主题开发优化部分
- 首页开发
- WooCommerce
- 判断用户是否登录
- WordPress Menu
- WooCommerce PayPal Checkout Gateway
- 页面和文章
- 调用产品和文章
- 判断属于哪个页面
- 相关文章
- 消除文章分享按钮集底部的文字
- wordpress主题模板和主题开发
- wordpress主题准备
- wordpress主题文件结构
- 豪源主题
- WooCommerce SEO
- 插件开发
- wordpress二次开发
- theme基本显示
- menu调用
- 分拆为header.php和footer.php
- 页面、文章样式选择显示
- 面包屑导航 Breadcrumb
- 特色图
- 阅读次数统计
- 分页功能
- Advanced Custom Fields
- Custom Post Type UI
- post type
- 小工具
- 小工具调用
- shortcode
- 文章循环输出
- 标题和文章限制字数输出显示
- WordPress主題theme1开发
- wordpress搭建多站点
- wordpress常用函數
- wordpress循环代码
- Woocommerce
- Woocommerce支持
- WordPress插件开发
- wordpress会员插件
- WordPress插件使用
- WordPress插件集
- WordPress的核心
- Wordpress原理
- Wordpress要点
- WordPress网站搬家
- WPML
- 服务器
- Cloud 9
- test
- 网站