【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
- 網站