使用WordPress內(nèi)置圖片倉庫制作縮略圖的小技巧
發(fā)布時間：2012-12-25 15:10:04 作者：佚名 
我要評論
我要評論WordPress 不僅是博客, 很多時候 WordPress 還被用作為 CMS (內(nèi)容管理系統(tǒng)). 博主們喜歡為每個文章加上統(tǒng)一大小的縮略圖,
WordPress 不僅是博客, 很多時候 WordPress 還被用作為 CMS (內(nèi)容管理系統(tǒng)). 博主們喜歡為每個文章加上統(tǒng)一大小的縮略圖, 尤其是信息類平臺. 其中比較常用的處理辦法是用 custom field 向文章插入圖片, 通過上傳大小一致的小圖或者使用 phpThumb 等工具生成縮略圖.
2.7 開始, WordPress 大幅提升多媒體功能, 越來越多人使用 WP 的內(nèi)置圖片倉庫. 對這些用戶來說, 制作縮略圖變得并不那么困難, 在上傳圖片的時候就會默認生成 150x150 規(guī)格的小圖 (如果圖片高度/寬度不足 150px, 使用原高度/寬度). 那我們可以充分利用這個功能, 在文章列表上加上這個圖片作為縮略圖. 這樣處理各有利弊, 好處是簡單, 智能 (不用每次輸入縮略圖), 壞處是消耗服務器流量.
Okay, 現(xiàn)在要做的就是提取上傳生成的小圖片, 并放置在文章的適當位置. 我創(chuàng)建了一個文件 thumb.php, 圖片獲取和調(diào)用一起處理, 文件內(nèi)容如下.
<?php
$args = array(
'numberposts' => 1,
'order'=> 'ASC',
'post_mime_type' => 'image',
'post_parent' => $post->ID,
'post_status' => null,
'post_type' => 'attachment'
);
$attachments = get_children($args);
$imageUrl = '';
if($attachments) {
$image = array_pop($attachments);
$imageSrc = wp_get_attachment_image_src($image->ID, 'thumbnail');
$imageUrl = $imageSrc[0];
} else {
$imageUrl = get_bloginfo('template_url') . '/img/default.gif';
}
?>
<a href="<?php the_permalink() ?>"><img class="left" src="<?php _fcksavedurl=""<?php" _fcksavedurl=""<?php" echo $imageUrl; ?>" alt="<?php the_title(); ?>" width="150" height="150" /></a>
這段代碼會去找第一個上傳的圖片縮略圖 (如果第一個圖片被刪除, 則找第二個的, 如此類推...), 如果找不到任何上傳圖片則使用默認圖片
然后在文章列表 index.php, 存檔頁面 archive.php 和搜索頁面 search.php 中調(diào)用, 調(diào)用代碼如下.
<?php include('thumb.php'); the_content('Read More...'); ?>
這段代碼是把圖片放在文章內(nèi)容前面, 圖片如何擺放需要用 CSS 調(diào)整一下布局, 這里就不多說了.
最后我兩留兩個問題給同學們.
1. 如果圖片高度或者寬度不足 150px, 這樣做必然將圖片拉伸, 很不美觀. 用什么辦法可以讓圖片都顯示為 150x150, 并居中顯示? 提示: 可以用 CSS 實現(xiàn), 類似方法可以在 Elegant Box 主題中找到.
(答案請看文章《用CSS 背景屬性代替圖片SRC》)
2. 在文章列表中, 我們只希望看到縮略圖, 而屏蔽其他所有圖片, 除了使用文章摘要去除所有標簽樣式, 是否有其他方法可以做到?
2.7 開始, WordPress 大幅提升多媒體功能, 越來越多人使用 WP 的內(nèi)置圖片倉庫. 對這些用戶來說, 制作縮略圖變得并不那么困難, 在上傳圖片的時候就會默認生成 150x150 規(guī)格的小圖 (如果圖片高度/寬度不足 150px, 使用原高度/寬度). 那我們可以充分利用這個功能, 在文章列表上加上這個圖片作為縮略圖. 這樣處理各有利弊, 好處是簡單, 智能 (不用每次輸入縮略圖), 壞處是消耗服務器流量.
Okay, 現(xiàn)在要做的就是提取上傳生成的小圖片, 并放置在文章的適當位置. 我創(chuàng)建了一個文件 thumb.php, 圖片獲取和調(diào)用一起處理, 文件內(nèi)容如下.
復制代碼
代碼如下:<?php
$args = array(
'numberposts' => 1,
'order'=> 'ASC',
'post_mime_type' => 'image',
'post_parent' => $post->ID,
'post_status' => null,
'post_type' => 'attachment'
);
$attachments = get_children($args);
$imageUrl = '';
if($attachments) {
$image = array_pop($attachments);
$imageSrc = wp_get_attachment_image_src($image->ID, 'thumbnail');
$imageUrl = $imageSrc[0];
} else {
$imageUrl = get_bloginfo('template_url') . '/img/default.gif';
}
?>
<a href="<?php the_permalink() ?>"><img class="left" src="<?php _fcksavedurl=""<?php" _fcksavedurl=""<?php" echo $imageUrl; ?>" alt="<?php the_title(); ?>" width="150" height="150" /></a>
這段代碼會去找第一個上傳的圖片縮略圖 (如果第一個圖片被刪除, 則找第二個的, 如此類推...), 如果找不到任何上傳圖片則使用默認圖片
然后在文章列表 index.php, 存檔頁面 archive.php 和搜索頁面 search.php 中調(diào)用, 調(diào)用代碼如下.
復制代碼
代碼如下:<?php include('thumb.php'); the_content('Read More...'); ?>
這段代碼是把圖片放在文章內(nèi)容前面, 圖片如何擺放需要用 CSS 調(diào)整一下布局, 這里就不多說了.
最后我兩留兩個問題給同學們.
1. 如果圖片高度或者寬度不足 150px, 這樣做必然將圖片拉伸, 很不美觀. 用什么辦法可以讓圖片都顯示為 150x150, 并居中顯示? 提示: 可以用 CSS 實現(xiàn), 類似方法可以在 Elegant Box 主題中找到.
(答案請看文章《用CSS 背景屬性代替圖片SRC》)
2. 在文章列表中, 我們只希望看到縮略圖, 而屏蔽其他所有圖片, 除了使用文章摘要去除所有標簽樣式, 是否有其他方法可以做到?
相關(guān)文章
CyberPanel安裝WordPress并配置偽靜態(tài)規(guī)則
下面教你如何在 CyberPanel安裝WordPress以及配置偽靜態(tài),需要的朋友可以參考下2023-12-27
這篇文章主要介紹了wordpress無法安裝更新主題插件的解決辦法,需要的朋友可以參考下2020-12-27WordPress必備數(shù)據(jù)庫SQL查詢語句整理
發(fā)現(xiàn)幾條比較實用的，適合 WordPress 實用的SQL語句。于是就趕緊收集分享出來了,需要的朋友可以參考下2017-09-23wordpress在安裝使用中出現(xiàn)404、403、500及502問題的分析與解決方法
wordpress是很多新手站長搭建個人博客最喜愛的程序，但是最近在使用WordPress的時候遇到了一些問題，所以想著將遇到問題總結(jié)分享出來，下面這篇文章主要給大家介紹了關(guān)于wo2017-08-11WordPress取消英文標點符號自動替換中文標點符號的優(yōu)雅方法
這篇文章主要介紹了WordPress取消英文標點符號自動替換中文標點符號的優(yōu)雅方法,需要的朋友可以參考下2017-04-04- 這篇文章主要給大家介紹了wordpress自定義上傳文件類型的方法，如WordPress默認允許上傳 .exe 后綴名的可運行文件，那么我們怎么禁止用戶在WordPress后臺發(fā)表文章時上傳 .e2016-12-19
- 大家可能發(fā)現(xiàn)了當實現(xiàn)了前端用戶中心，后臺控制面板就失去了作用，那么限制其他用戶進入后臺控制面板就很有必要了！那么我們要怎么做呢？通過下面這篇文章分享的方法后，只2016-12-19
WordPress實現(xiàn)回復文章評論后發(fā)送郵件通知的功能
這篇文章主要介紹了WordPress實現(xiàn)回復文章評論后發(fā)送郵件通知的功能,涉及wordpress針對評論與郵件的相關(guān)操作技巧,需要的朋友可以參考下2016-10-11WordPress使用自定義文章類型實現(xiàn)任意模板的方法
這篇文章主要介紹了WordPress使用自定義文章類型實現(xiàn)任意模板的方法,可通過自定義文章類型來實現(xiàn)任意模版的使用,具有一定參考借鑒價值,需要的朋友可以參考下2016-10-11WordPress后臺地址被改導致無法登陸后臺的簡單解決方法
這篇文章主要介紹了WordPress后臺地址被改導致無法登陸后臺的簡單解決方法,簡單分析了后臺無法登陸的原因與相應的解決方法,涉及針對wordpress配置項的簡單修改,需要的朋友2016-10-11
