WordPress: Using Images：修訂間差異

目錄

• 1 Images Resources for Wordpress
• 2 Wordpress圖像資源
• 3 Using Images in Posts
• 4 在文章中使用圖像
  • 4.1 Image Size and Quality
  • 4.2 圖像尺寸大小和質(zhì)量
  • 4.3 Resizing Images
  • 4.4 調(diào)整圖像大小
  • 4.5 Styling Images
  • 4.6 設(shè)計(jì)圖像
    • 4.6.1 Styling All Images
    • 4.6.2 設(shè)計(jì)所有的圖像
    • 4.6.3 Styling Some Images
    • 4.6.4 設(shè)計(jì)一些圖像
    • 4.6.5 Styling One or Two Images Inline
    • 4.6.6 設(shè)計(jì)一個(gè)或者兩個(gè)圖像 Inline
• 5 Resources
• 6 資源

A picture says more than a thousand words.

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

WordPress makes it easy for you to add images to your WordPress site. You can upload them directly from within WordPress by using the built-in file uploading utility in the post screen. Or you could use any FTP Client software to upload many images to your WordPress site.

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

The Quicktag buttons feature an image link, making it easy to link to images from within your post as you write it. If you used the inline upload feature, your picture will be in the /wp-content folder.

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

Wordpress can now (within the posting page) resize images and create thumbnails. There are also photo galleries that can show many images without adding each one separately to a page. WordPress現(xiàn)在可以（在置入的頁(yè)面中）調(diào)整圖像的大小并且創(chuàng)建極小的東西。也有圖片集可以顯示許多的圖像，而且不需要將每個(gè)圖像單獨(dú)地添加到一個(gè)網(wǎng)頁(yè)上。

And if you choose to let the images speak for you, consider creating a PhotoBlog or Gallery. 如果你選擇讓這些圖像替你說(shuō)話，你可以考慮創(chuàng)建一個(gè)博客圖片或者圖片集.

Wordpress圖像資源

thumb|right|Example of images in background, sidebar, blockquote, and postThere are a variety of WordPress Image Plugins which add image functionality, utilities, and galleries to your website. Some run from within WordPress while others stand alongside.

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

You can also add images to your WordPress site through the use of template tags, plugins, and in the style sheet of your Theme. For example, you can add images to your:

通過(guò)使用模板標(biāo)簽，插件，和你的主題的樣式表，你可以給你的WordPress站點(diǎn)添加圖像。例如，你可以添加圖像到你的：

• Categories
• 分類

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

• Graphics Symbols
• 圖形標(biāo)記

• Header
• 標(biāo)題

• Headings
• 標(biāo)題

• Smiliesthumb|right|Gravatar used in Comments

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

• Sidebar
• 工具條

• Footer
• 頁(yè)腳

• Lists
• 列表

• Menus
• 菜單

• Between posts
• 在文章之間

• Between lists
• 在列表之間

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

• Links and Blogrolls
• 鏈接和友情鏈接

• Wordpress:Next and Previous Links
• 上一個(gè)和下一個(gè)鏈接

• Template Tags - Many feature image parameters
• 模板標(biāo)簽 –許多特色圖像的參數(shù)

在文章中使用圖像

Images can be used in a variety of methods in your WordPress posts and Pages. They can be a major subject, or a referenced detail that enhances the information or story.

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

The first thing you should consider is the "look" of the images on your page. Not what the images are of, but the general look of how they flow and interact with the rest of the content on your page. Wordpress:Wrapping Text Around Images helps you to begin to understand how images interact with the text around them, changing the margins, padding and borders around the images within the content. It will also help you understand how to create captions under your images.

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

The next thing to consider is the size of the images. There are two ways of actually sizing an image. It is either the size that it is, or a thumbnail link which, when clicked, takes the user to a new page with an enlarged image of the graphic.

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

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

The size and quality of an image for use on a web page is determined by a variety of things. 一個(gè)網(wǎng)頁(yè)上使用的一個(gè)圖像的尺寸大小取決于許多因素。

Physical Size

The physical size of an image is based upon two things: The size of the image on the screen and the file size. Generally, the file size is treated as a different issue.

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

File Size

This is the size of the file on your hard drive or server.

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

Resolution

Resolution refers to the number of pixels in an image. Resolution is sometimes identified by the width and height of the image as well as the total number of pixels in the image.

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

File Type

There are basically X image types popularly found on the Internet: jpeg,gif,png and (for favicons (the icons next to the address)) ico.

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

The physical size of the image is information we need to know in order to determine how much "space" will the image occupy on a web page. If your WordPress Theme features a fixed width content area of 600 pixels and the image you want to use is 800, the image will push the sidebar and layout of your web page around, messing up your design. Images within that 600 pixel width need to be restricted to that maximum width in order to protect the layout of your page. It's up to you to determine what size they should be from there, matching the image to your overall layout and styles.

圖像的物理尺寸是我們需要知道的信息，來(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ì)相搭配。

File size dictates the time it takes to load your page, the larger the file size, often increased because of a high image resolution quality, the longer it will take to load. People often don't have the patience to wait through long web page loads, so keeping your file sizes low speeds up your web page access times. Typically, large high quality images should be kept between 100K and 60K. Smaller images should be closer to 30K and lower. 文件尺寸規(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或者更低的。

The resolution of the image dictates its clarity. The higher the resolution, though, the larger the file size, so you have to make a compromise between quality and file size. 圖像的分辨率規(guī)定了它的清晰度。像素越高，文件尺寸越大，因此你需要在質(zhì)量和文件尺寸上做一個(gè)妥協(xié)。

Luckily, the various file types most commonly used on the Internet have compression features. When you save the file as one of these types, it condenses or compresses the data information in the image file. Internet browsers can decompress this information to display the image on the screen. Some graphic software programs allow you to set the compression rate to control the quality of the image (and file size) at the time you save it. Depending upon your use of the images on your site, you may have to experiment with this to get the right ratio that keeps the resolution quality good while maintaining a small file size. 幸運(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ì)量。 Websites use four common file types. The end of a filename (called the extension) tells what type it is. One type, ico, is to make a favicon file -- but this is usually only done when a website is first set up. The other three types are used for general images:

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

• jpg (JPEG) is good for photographs. Saving a photo as jpg removes detail from the photo. Good photo editors let you control how much detail is removed (the "compression"). Different photos need different compression; doing this carefully and viewing the result can give you a usable photo with a small file size.

• jpg (JPEG)對(duì)照片較使用。將一張照片以jpg保存，除掉了圖片中的詳細(xì)信息。好的照片編輯器，讓你控制清楚了的詳細(xì)信息的數(shù)量("壓縮")。不同的照片需要不同的壓縮；認(rèn)真地做，瀏覽結(jié)果，可以給你一個(gè)擁有小的文件尺寸的有用的照片。

• gif can be poor for photographs. It's better for line art, like logos, with solid areas of the same color.
• gif對(duì)照片不太好。它更適用于藝術(shù)線條，像logos,擁有同樣顏色的面積。
• png is for both photographs and line art. It compresses photos without losing detail, but usually makes larger photo files than JPEGs. Some older browsers don't completely support png, though.
• png對(duì)于照片和藝術(shù)線條都適用。它在沒(méi)有丟失詳細(xì)信息的情況下，壓縮了照片，但是通常比JPEGs制作的照片文件要大。一些老的瀏覽器也不完全支持png。

If you aren't sure which file type is best for a particular image, try saving the image in more than one type and comparing the file sizes. Using the right type can make a big difference! There's more information in article. 如果你不確定哪一個(gè)文件類型更加地適合一個(gè)特別的圖像，試著將文件保存在幾種類型，并且比較一下文件的尺寸大小。使用一個(gè)正確的類型起著很重要的作用！在文章中有更多的信息。

Resizing Images

調(diào)整圖像大小

Not all graphic software packages allow you to resize images, though most should. Check your graphics software table of contents or index for resize, size, transform, reduce, or enlarge, all synonyms for the for the same thing. If they don't have the feature, you may have to find different software.

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

The process of resizing images is fairly simple. There are usually two methods: 重新調(diào)整圖像的大小的過(guò)程非常地簡(jiǎn)單。通常有兩種方法： 1) You can resize an image through the use of tools provided which allow you to manually shift the edges of an image to deform or resize the image. The best way is to grab a corner, not the edge, to resize the image. The corner "handle" will usually resize the image maintaining the overall height-width ratio. Check your manual for specific instructions. 1）你可以通過(guò)使用提供的工具來(lái)重新調(diào)整圖像的大小，工具允許你動(dòng)手改變圖像的邊緣，來(lái)將圖像變形，或者重新調(diào)整圖像大小。角落"處理"通常能重新調(diào)整圖像大小，保持總體的高-寬比例。查看你的手冊(cè)以得到特別的指示說(shuō)明。 2) The other method involves simply specifying the image's final size. The advanced graphics programs allow you to set it by exact dimensions or a percentage of reduction or enlargement. 2）另一種方法包括簡(jiǎn)單地規(guī)定圖像的最終尺寸。高級(jí)的圖像程序允許你通過(guò)精確的尺寸或者縮小或者擴(kuò)大的百分?jǐn)?shù)來(lái)重新地調(diào)整尺寸的大小。 After resizing the image, the image may be smaller, but it may also be slightly out of focus. You can sharpen the focus of the small image by using the sharpen feature in your software. 在重新調(diào)整了圖像的大小以后，圖像可能變小了，也有可能稍微地不再突出了。你可以使用你的軟件上的突出功能，突出小的圖像。 When you have fine-tuned your small sized image or new thumbnail, export the image as a jpg, gif, or png. 但你已經(jīng)調(diào)整了你的小尺寸的圖像或者新的極小的東西，將圖像以jpg, gif, or png輸出。

Styling Images

設(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ì)所有的圖像

Styling your images from within the style.css of your WordPress Theme can cover the styling for every image on your site, or specific images.

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

Wordpress:Image:leaf.gif

Wordpress:Image:leaf.gif

To style every image on your site to look a particular way, look for or add the CSS selector for the image tag. Then add your styles to the tag. For instance, let's say that you want a black border around all of your images and you want space between the border and the image, as well as the appropriate spacing around the image and the text. 為你的站點(diǎn)上每個(gè)圖像都設(shè)計(jì)一下，使它們看起來(lái)特別，為image tag找一個(gè)或者添加一個(gè)CSS選擇器。然后將你的類型添加到標(biāo)簽上。例如，假如你想讓你的圖像的周圍圍繞著一個(gè)黑色的邊沿，而且你想讓邊沿和圖像之間留有間距，也想要圖像和文字周圍留有合適的間距。

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

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

Wordpress:Image:leaf.gif

Wordpress:Image:leaf.gif

Maybe you want something a little more dramatic. You can change the border thickness and set it to a "double" line. And maybe you really want to isolate your image from the rest of the text, so you increase the margin around the image. 也許你想要一個(gè)稍微地更加生動(dòng)的東西。你可以改變邊沿的厚度，把它設(shè)置為一個(gè)"雙的"線條。也許你真的想將圖像與文章的其它部分隔離起來(lái)，這樣的話，你可以增加圖像周圍的空白。

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

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

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

You can add to your style sheet a specific style for certain images. If you have already styled all of your images, you must make sure you specify every style declaration or attribute specified in the image tag style in order to override that attribute. If you do not change the margin, then it will remain the same in the new style. This is called the CSS Parent/Child Relationship. 你可以將一個(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

Wordpress:Image:leaf.gif

Let's say you would like to have some images in your posts filed in the category of Nature have a nice green background. The rest of the images should look the same, just the ones you add in your Nature category. You simply add a class to your style sheet and each image within that category. 假如你想讓歸檔在自然類別，有一個(gè)美麗的綠色背景，中的文章上有一些兒圖像。其它的圖像看起來(lái)應(yīng)該是一樣的，就是你添加到你的自然分類中的圖像。你只要將一個(gè)class添加到你的樣式表和分類中的每個(gè)圖像。

To make it easy to remember, we'll call our class "nature". We want to have a very dark green thick border and a medium green background around the image to highlight it.

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

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

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

On each of the images within that category, you simply add the class for "nature":

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

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

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

If you need more styles for different images, you can create more of them as needed. 如果你需要為不同的圖像準(zhǔn)備更多的類型，你只要?jiǎng)?chuàng)建更多需要的類型就可以了。

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

Wordpress:Image:leaf.gif

Wordpress:Image:leaf.gif

There are times when you just want one or two images on your site to look different from the rest. This technique is called inline styles. It applies the CSS styles directly to the image itself.

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

For example, say you want to have an image isolated against a back background to call attention to it. 例如，假如你想將一個(gè)圖像與一個(gè)黑色的背景隔離起來(lái)，以提醒人們注意。

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

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

This is not a technique to use on every image. It is to be used on occasional images that need a "little something special."

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

資源

• Image Plugins
• 圖像插件

• WordPress Design and Layout
• WordPress 布局和設(shè)計(jì)

• Wordpress:Photoblogs and Galleries
• 照片博客與圖片集

• Image File Formats on the Web
• 環(huán)球網(wǎng)上圖像文件版式

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