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