Thumbnails
在functions中處理
這個功能讓主題支持特色圖片(Post Thumbnails),這個功能是 2.9 版本引進的,我們可以將日誌類型(Post Type)數組作為第二個參數,來指定哪些日誌類型要啟用這個功能。
add_theme_support('post-thumbnails');//所有日誌類型都支持。
add_theme_support('post-thumbnails',array('post'));// Posts only
add_theme_support('post-thumbnails',array('page'));// Pages only
add_theme_support('post-thumbnails',array('post','movie'));// Posts and Movies
這個功能必須在 init hook 之前調用,所以必須在主題的 functions.php 文件或者在 『after_setup_theme』 hook 中調用。
對於自定義日誌類型(custom post types),我們可以在使用 register_post_type() 註冊新的日誌類型的時候,添加 post thumbnails 的支持。
將圖像輸出為HTML
將圖像輸出為HTML 也非常容易,使用函數:
get_the_post_thumbnail();
舉例
<?php echo get_the_post_thumbnail( $post->ID, 'large' ); ?>
輸出:
<img width="640" height="131" src="http://127.0.0.1/wpstrap/wp-content/uploads/2020/07/頂部圖像2-980X200.jpg" class="attachment-large size-large wp-post-image" alt="" srcset="http://127.0.0.1/wpstrap/wp-content/uploads/2020/07/頂部圖像2-980X200.jpg 980w, http://127.0.0.1/wpstrap/wp-content/uploads/2020/07/頂部圖像2-980X200-300x61.jpg 300w, http://127.0.0.1/wpstrap/wp-content/uploads/2020/07/頂部圖像2-980X200-768x157.jpg 768w" sizes="(max-width: 640px) 100vw, 640px" />
獲取特色圖片URL地址
假設您將使用它作為元素上的background-image
而不是內容圖像。 不幸的是,沒有超級簡單/明顯的功能。
會有一些比較特別的需求——獲取page頁面文章特色圖片的URL地址,而不是獲取特色圖片本身。這種情況一般很少,但就是有那麼個特殊情況,如:首頁要用page頁面文章內容中的圖片,page頁面要調用一個全屏的banner圖,這個banner是以元素背景圖的形勢展示。這時,我們用the_post_thumbnail()函數來調用就不適合了,因為,它會把圖片直接顯示出來,而不會成為其它元素的背景。
這時,我們需要用到2個wordpress主題函數,wp_get_attachment_image_src()和get_post_thumbnail_id()。
在循環中,您必須執行以下操作:
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
$thumb_url = $thumb_url_array[0];
然後$thumb_url
將是該URL。
方法1.使用WordPress函數the_post_thumbnail_url()獲取特色圖片縮略圖URL
獲當前文章的特色圖片直接URL,也可以獲取指定POST_ID的文章特色圖片直接URL。
它必須在循環中使用。
在使用之前先檢查文章是否添加特色圖片,檢查函數為has_post_thumbnail()。
最終的代碼如下,直接添加到要調用特色圖片URl的地方即可:
方法2.使用WordPress函數the_post_thumbnail_url()獲取特色圖片縮略圖URL
一些使用場景1
還有就是有的時候,我們需要設置圖片的寬度為100%,高度自動。這樣通過 the_post_thumbnail() 這個方法就無法實現了。
好了,看下面的方法:
獲取特色圖像:小
<?php
$thumbnail_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail');
echo $thumbnail_image_url[0];
?>
獲取特色圖像:中 –> medium
獲取特色圖像:大 –>large
獲取特色圖像:完整 –> full
獲取特色圖像:指定100X100
<?php
$array_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array(100,100));
echo $array_image_url[0];
?>