WordPress: Using Images：修訂間差異

目錄

• 1 Wordpress圖像資源
• 2 在文章中使用圖像
  • 2.1 圖像尺寸大小和質(zhì)量
  • 2.2 調(diào)整圖像大小
  • 2.3 設(shè)計(jì)圖像
    • 2.3.1 設(shè)計(jì)所有的圖像
    • 2.3.2 設(shè)計(jì)一些圖像
    • 2.3.3 設(shè)計(jì)一個(gè)或者兩個(gè)圖像 Inline
• 3 資源

一副圖畫勝過(guò)一千個(gè)字顯示的內(nèi)容

WordPress讓你非常簡(jiǎn)單地給你的WordPress站點(diǎn)添加圖像。通過(guò)使用文章 界面內(nèi)置的文件上傳功能，你可以直接地在WordPress里下載圖像?；蛘吣憧梢允褂萌魏蔚?FTP Client軟件將許多的圖像上傳到你的WordPress站點(diǎn)上。

Quicktag 按鈕有一個(gè)圖像 鏈接，鏈接到你寫的文章上的圖像變得簡(jiǎn)單。如果你使用行內(nèi)上載的功能，你的圖片會(huì)在/wp-content 文件夾中。

WordPress現(xiàn)在可以（在置入的頁(yè)面中）調(diào)整圖像的大小并且創(chuàng)建極小的東西。也有圖片集可以顯示許多的圖像，而且不需要將每個(gè)圖像單獨(dú)地添加到一個(gè)網(wǎng)頁(yè)上。 如果你選擇讓這些圖像替你說(shuō)話，你可以考慮創(chuàng)建一個(gè)博客圖片或者圖片集.

Wordpress圖像資源

thumb|right|背景，工具條，blockquote標(biāo)簽，中圖像的例子有許多的WordPress圖像插件可以給你的站點(diǎn)添加圖像功能，效用和圖片集。有的在WordPress內(nèi)部運(yùn)行，而有的則是WordPress外部單獨(dú)運(yùn)行。 通過(guò)使用模板標(biāo)簽，插件，和你的主題的樣式表，你可以給你的WordPress站點(diǎn)添加圖像。例如，你可以添加圖像到你的：

• 分類

• 關(guān)于 Gravatars的評(píng)論

• 圖形標(biāo)記

• 標(biāo)題

• 標(biāo)題

• Smiliesthumb|right|在評(píng)論中使用的Gravatar

• 工具條

• 頁(yè)腳

• 列表

• 菜單

• 在文章之間

• 在列表之間

• Graphics in Feeds | RSS Feed圖形圖標(biāo)

• 鏈接和友情鏈接

• 上一個(gè)和下一個(gè)鏈接

• 模板標(biāo)簽 –許多特色圖像的參數(shù)

在文章中使用圖像

圖像可以以許多種不同的方法在你的WordPress文章和網(wǎng)頁(yè)中使用。它們可以是一個(gè)主題，也可以是一個(gè)引用的詳細(xì)信息來(lái)提升信息或者故事的價(jià)值。

你需要考慮的第一件事便是你的網(wǎng)頁(yè)上圖像的"外觀"。并不是圖像是什么，而是指它們?cè)鯓釉谀愕木W(wǎng)頁(yè)上浮動(dòng)以及它們?cè)鯓优c你的網(wǎng)頁(yè)上其它內(nèi)容結(jié)合的整體外觀。包圍在圖像周圍的文字會(huì)幫助你了解圖像怎樣與其周圍的文字相結(jié)合，改變內(nèi)容中的圖像的幅度，填充，和邊界。它會(huì)幫助你了解怎樣在你的圖像下面加上說(shuō)明。

下一個(gè)要考慮的事情是圖像的大小。真正地制定一個(gè)圖像的大小，有兩種方法。圖像或者就是本身的大小，或者是一個(gè)極小的鏈接，當(dāng)你點(diǎn)擊它時(shí)，它就會(huì)帶你來(lái)到一個(gè)新的網(wǎng)頁(yè)，這個(gè)網(wǎng)頁(yè)便有一個(gè)放大了的圖像。

圖像尺寸大小和質(zhì)量

一個(gè)網(wǎng)頁(yè)上使用的一個(gè)圖像的尺寸大小取決于許多因素。

物理尺寸：一個(gè)圖像的物理尺寸取決于兩個(gè)因素：屏面上的圖像尺寸大小和文件尺寸大小。一般來(lái)說(shuō)，文件尺寸大小以另一碼事來(lái)對(duì)待。

文件尺寸：這是你的硬盤或者服務(wù)器上文件的尺寸。

分辨率：分辨率指的是一個(gè)圖像上的像素的多少。分辨率有時(shí)由一個(gè)圖像的寬度和高度以及一個(gè)圖像上總共的像素決定。

文件類型：通常在因特網(wǎng)上能發(fā)現(xiàn)X圖形類型jpeg,gif,png 和 (關(guān)于最喜愛(ài)的圖標(biāo) (地址旁邊的圖標(biāo))) ico.

圖像的物理尺寸是我們需要知道的信息，來(lái)決定圖像在網(wǎng)頁(yè)上會(huì)占據(jù)多大的"空間"。如果你的WordPress主題的特色是有一個(gè)600像素的固定寬度的內(nèi)容區(qū)，你想使用的圖像是800像素，圖像便會(huì)排擠工具條和你的網(wǎng)頁(yè)周圍的布局，混亂了你的設(shè)計(jì)。如果圖像是在600像素的寬度以內(nèi)，你就需要將圖像限制在最大的寬度以內(nèi)，以保護(hù)你的網(wǎng)頁(yè)的布局。由你決定圖像的大小應(yīng)該是多少，來(lái)與整體的布局和設(shè)計(jì)相搭配。

文件尺寸規(guī)定了加載你的頁(yè)面的時(shí)間，文件的尺寸越大，通常會(huì)增加，因?yàn)橐粋€(gè)高的圖像分辨率質(zhì)量，加載的時(shí)間會(huì)越長(zhǎng)。人們通常沒(méi)有耐心來(lái)等待長(zhǎng)時(shí)間的網(wǎng)頁(yè)加載，所以是你的文件尺寸保持很低，來(lái)加速你的網(wǎng)頁(yè)載入時(shí)間。通常來(lái)說(shuō)，高質(zhì)量的圖像應(yīng)該保持在100K到60K.小的圖像應(yīng)該接近于30K或者更低的。

圖像的分辨率規(guī)定了它的清晰度。像素越高，文件尺寸越大，因此你需要在質(zhì)量和文件尺寸上做一個(gè)妥協(xié)。

幸運(yùn)地是，因特網(wǎng)上使用的最常見(jiàn)的不同的文件類型擁有壓縮 功能，當(dāng)你將文件以這些形式中的一種來(lái)保存的時(shí)候，它會(huì)濃縮或者壓縮圖像文件中的數(shù)據(jù)信息。因特網(wǎng)瀏覽器可以將這個(gè)信息解壓以使它在屏面上顯示圖像。有的圖像軟件程序允許你設(shè)置壓縮率，在你保存圖像的時(shí)候，能夠控制圖像的質(zhì)量（和文件的大?。?。取決于你在站點(diǎn)上怎樣使用圖像，你可能要嘗試一下這個(gè)方法，來(lái)得到一個(gè)正確的比率,在保存一個(gè)小的文件尺寸的時(shí)候,保持一個(gè)好的分辨率質(zhì)量。

站點(diǎn)使用四個(gè)常見(jiàn)的文件類型。一個(gè)文件名的最后部分（稱作擴(kuò)展名指出了文件是屬于那種類型的。一種類型，ico,是用來(lái)制作一個(gè)最喜愛(ài)的圖標(biāo)的文件—但這個(gè)通常只有在網(wǎng)站已經(jīng)首先設(shè)置好了的情況下，才起作用。其它的三種類型供常見(jiàn)的圖像使用：

• jpg (JPEG)對(duì)照片較適用。將一張照片以jpg保存，除掉了圖片中的詳細(xì)信息。好的照片編輯器，讓你控制清楚了的詳細(xì)信息的數(shù)量("壓縮")。不同的照片需要不同的壓縮；認(rèn)真地做，瀏覽結(jié)果，可以給你一個(gè)擁有小的文件尺寸的有用的照片。
• gif對(duì)照片不太好。它更適用于藝術(shù)線條，像logos,擁有同樣顏色的面積。
• png對(duì)于照片和藝術(shù)線條都適用。它在沒(méi)有丟失詳細(xì)信息的情況下，壓縮了照片，但是通常比JPEGs制作的照片文件要大。一些老的瀏覽器也不完全支持png。

如果你不確定哪一個(gè)文件類型更加地適合一個(gè)特別的圖像，試著將文件保存在幾種類型，并且比較一下文件的尺寸大小。使用一個(gè)正確的類型起著很重要的作用！在文章中有更多的信息。

調(diào)整圖像大小 ]

雖然大多數(shù)圖形程序軟件包應(yīng)該允許你調(diào)整圖像的大小，但并不是所有的圖形程序軟件包都能。查看你的圖形軟件包表上的內(nèi)容或者索引上的重新調(diào)整, 尺寸大小, 改變, 縮小, 或者放大,所有的標(biāo)志都指著同樣的事。如果它們沒(méi)有這個(gè)功能，你可能要找一個(gè)不同的軟件。

重新調(diào)整圖像的大小的過(guò)程非常地簡(jiǎn)單。通常有兩種方法： 1）你可以通過(guò)使用提供的工具來(lái)重新調(diào)整圖像的大小，工具允許你動(dòng)手改變圖像的邊緣，來(lái)將圖像變形，或者重新調(diào)整圖像大小。角落"處理"通常能重新調(diào)整圖像大小，保持總體的高-寬比例。查看你的手冊(cè)以得到詳細(xì)的指示說(shuō)明。 2）另一種方法包括簡(jiǎn)單地規(guī)定圖像的最終尺寸。高級(jí)的圖像程序允許你通過(guò)精確的尺寸或者縮小或者擴(kuò)大的百分?jǐn)?shù)來(lái)重新地調(diào)整尺寸的大小。 在重新調(diào)整了圖像的大小以后，圖像可能變小了，也有可能稍微地不再突出了。你可以使用你的軟件上的突出功能，突出小的圖像。 但你已經(jīng)調(diào)整了你的小尺寸的圖像或者新的極小的東西，將圖像以jpg, gif, or png輸出。

設(shè)計(jì)圖像

Images can have borders, frames, captions, and be styled in many different ways. There are basically two ways to style an image on your site. You can style it from within the style sheet or inline on a specific image.

圖像可以有邊緣，框架，說(shuō)明,并以多種方式設(shè)計(jì)?；旧嫌袃煞N方法可以設(shè)計(jì)你的站點(diǎn)上的圖像。你可以在一個(gè)設(shè)計(jì)表上設(shè)計(jì)它，也可以在一個(gè)具體的圖像上內(nèi)嵌設(shè)計(jì)。

設(shè)計(jì)所有的圖像

在你的WordPress 主題的style.css設(shè)計(jì)你的圖像，可以包括你的站點(diǎn)上的所有圖像或者特別的圖像設(shè)計(jì)。

Wordpress:Image:leaf.gif

為你的站點(diǎn)上每個(gè)圖像都設(shè)計(jì)一下，使它們看起來(lái)特別，為image tag找一個(gè)或者添加一個(gè)CSS選擇器。然后將你的類型添加到標(biāo)簽上。例如，假如你想讓你的圖像的周圍圍繞著一個(gè)黑色的邊沿，而且你想讓邊沿和圖像之間留有間距，也想要圖像和文字周圍留有合適的間距。

img {
     margin: 5px;
     padding: 10px;
     border: solid black 1px
}

Wordpress:Image:leaf.gif

也許你想要一個(gè)稍微地更加生動(dòng)的東西。你可以改變邊沿的厚度，把它設(shè)置為一個(gè)"雙的"線條。也許你真的想將圖像與文章的其它部分隔離起來(lái)，這樣的話，你可以增加圖像周圍的空白。

img {
     margin: 20px;
     padding: 10px;
     border: double black 1px
}

設(shè)計(jì)一些圖像

你可以將一個(gè)特別的圖像的具體的樣式添加到你的樣式表上。如果你已經(jīng)設(shè)計(jì)好了你的所有的圖像，你必須確定你規(guī)定了每個(gè)設(shè)計(jì)的說(shuō)明或者規(guī)定了image標(biāo)簽形式的屬性，來(lái)制服那個(gè)屬性。如果你不改變頁(yè)邊的空白，那么它在新的樣式中仍然會(huì)保持原樣。這個(gè)叫做CSS母/子關(guān)系.

Wordpress:Image:leaf.gif

假如你想讓歸檔在自然類別（有一個(gè)美麗的綠色背景）中的文章上有一些兒圖像。其它的圖像看起來(lái)應(yīng)該是一樣的，就是你添加到你的自然分類中的圖像。你只要將一個(gè)class添加到你的樣式表和分類中的每個(gè)圖像。

方便記憶，我們稱我們的class "自然"。我們想在圖像周圍有一個(gè)非常深綠的厚的邊沿和一個(gè)中等綠色的背景，來(lái)突出圖像。

img.nature {
     margin: 20px;
     padding: 20px;
     border:solid #003300 4px;
     background: #006600;
}

在分類中的每個(gè)圖像上，你只有為"自然"添加class：

<img src="leaf.gif" alt="Red leaf" class="nature" />

如果你需要為不同的圖像準(zhǔn)備更多的類型，你只要?jiǎng)?chuàng)建更多需要的類型就可以了。

設(shè)計(jì)一個(gè)或者兩個(gè)圖像 Inline

Wordpress:Image:leaf.gif

有時(shí)，你只想讓你的站點(diǎn)上一個(gè)或者兩個(gè)圖像看起來(lái)與其它的不一樣。這個(gè)技術(shù)叫做inline形式。它直接將CSS形式應(yīng)用到圖像自身。

例如，假如你想將一個(gè)圖像與一個(gè)黑色的背景隔離起來(lái)，以提醒人們注意。

<img src="leaf.gif" alt="Red leaf" style="padding:20px; 
background: black; border: none" />

這并不是一個(gè)用于每一個(gè)圖像的技術(shù)。這只用于一些特殊的圖像，需要"一些特別的東西。"

資源

• 圖像插件
• WordPress 布局和設(shè)計(jì)
• 照片博客與圖片集
• 互連網(wǎng)上圖像文件格式

This article is [[WordPress::Category:Copyedits|marked]] as in need of editing. You can help Codex by editing it.