WordPress:Using Images

A picture says more than a thousand words.

一副圖畫勝過一千個字顯示的內(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讓你非常簡單地給你的WordPress站點添加圖像。通過使用文章界面內(nèi)置的文件上傳功能，你可以直接地在WordPress里下載圖像?；蛘吣憧梢允褂萌魏蔚?FTP Client軟件將許多的圖像上傳到你的WordPress站點上。

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 按鈕有一個圖像鏈接，鏈接到你寫的文章上的圖像變得簡單。如果你使用行內(nèi)上載的功能，你的圖片會在/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)在可以（在置入的頁面中）調(diào)整圖像的大小并且創(chuàng)建極小的東西。也有圖片集可以顯示許多的圖像，而且不需要將每個圖像單獨地添加到一個網(wǎng)頁上。

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

Images Resources for Wordpress

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標簽，中圖像的例子有許多的WordPress圖像插件可以給你的站點添加圖像功能，效用和圖片集。有的在WordPress內(nèi)部運行，而有的則是WordPress外部單獨運行。

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:

通過使用模板標簽，插件，和你的主題的樣式表，你可以給你的WordPress站點添加圖像。例如，你可以添加圖像到你的：

Smilies thumb|right|Gravatar used in Comments

Smilies thumb|right|在評論中使用的Gravatar

Footer
頁腳

Lists
列表

Menus
菜單

Between posts
在文章之間

Between lists
在列表之間

Using Images in Posts

在文章中使用圖像

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)頁中使用。它們可以是一個主題，也可以是一個引用的詳細信息來提升信息或者故事的價值。

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)頁上圖像的"外觀"。并不是圖像是什么，而是指它們怎樣在你的網(wǎng)頁上浮動以及它們怎樣與你的網(wǎng)頁上其它內(nèi)容結(jié)合的整體外觀。包圍在圖像周圍的文字會幫助你了解圖像怎樣與其周圍的文字相結(jié)合，改變內(nèi)容中的圖像的幅度，填充，和邊界。它會幫助你了解怎樣在你的圖像下面加上說明。

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.

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

Image Size and Quality

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

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

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.

；物理尺寸：一個圖像的物理尺寸取決于兩個因素：屏面上的圖像尺寸大小和文件尺寸大小。一般來說，文件尺寸大小以另一碼事來對待。

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

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

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.

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

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)于最喜愛的圖標 (地址旁邊的圖標)) 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.

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

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ī)定了加載你的頁面的時間，文件的尺寸越大，通常會增加，因為一個高的圖像分辨率質(zhì)量，加載的時間會越長。人們通常沒有耐心來等待長時間的網(wǎng)頁加載，所以是你的文件尺寸保持很低，來加速你的網(wǎng)頁載入時間。通常來說，高質(zhì)量的圖像應該保持在100K到60K.小的圖像應該接近于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ì)量和文件尺寸上做一個妥協(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. 幸運地是，因特網(wǎng)上使用的最常見的不同的文件類型擁有壓縮功能，當你將文件以這些形式中的一種來保存的時候，它會濃縮或者壓縮圖像文件中的數(shù)據(jù)信息。因特網(wǎng)瀏覽器可以將這個信息解壓以使它在屏面上顯示圖像。有的圖像軟件程序允許你設置壓縮率，在你保存圖像的時候，能夠控制圖像的質(zhì)量（和文件的大小）。取決于你在站點上怎樣使用圖像，你可能要嘗試一下這個方法，來得到一個正確的比率,在保存一個小的文件尺寸的時候,保持一個好的分辨率質(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:

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

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

gif can be poor for photographs. It's better for line art, like logos, with solid areas of the same color.
gif對照片不太好。它更適用于藝術(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對于照片和藝術(shù)線條都適用。它在沒有丟失詳細信息的情況下，壓縮了照片，但是通常比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. 如果你不確定哪一個文件類型更加地適合一個特別的圖像，試著將文件保存在幾種類型，并且比較一下文件的尺寸大小。使用一個正確的類型起著很重要的作用！在文章中有更多的信息。

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ù)圖形程序軟件包應該允許你調(diào)整圖像的大小，但并不是所有的圖形程序軟件包都能。查看你的圖形軟件包表上的內(nèi)容或者索引上的重新調(diào)整, 尺寸大小, 改變, 縮小, 或者放大,所有的標志都指著同樣的事。如果它們沒有這個功能，你可能要找一個不同的軟件。

The process of resizing images is fairly simple. There are usually two methods: 重新調(diào)整圖像的大小的過程非常地簡單。通常有兩種方法： 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）你可以通過使用提供的工具來重新調(diào)整圖像的大小，工具允許你動手改變圖像的邊緣，來將圖像變形，或者重新調(diào)整圖像大小。角落"處理"通常能重新調(diào)整圖像大小，保持總體的高-寬比例。查看你的手冊以得到特別的指示說明。 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）另一種方法包括簡單地規(guī)定圖像的最終尺寸。高級的圖像程序允許你通過精確的尺寸或者縮小或者擴大的百分數(shù)來重新地調(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

設計圖像

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.

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

Styling All Images

設計所有的圖像

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設計你的圖像，可以包括你的站點上的所有圖像或者特別的圖像設計。

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. 為你的站點上每個圖像都設計一下，使它們看起來特別，為image tag找一個或者添加一個CSS選擇器。然后將你的類型添加到標簽上。例如，假如你想讓你的圖像的周圍圍繞著一個黑色的邊沿，而且你想讓邊沿和圖像之間留有間距，也想要圖像和文字周圍留有合適的間距。

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

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

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. 也許你想要一個稍微地更加生動的東西。你可以改變邊沿的厚度，把它設置為一個"雙的"線條。也許你真的想將圖像與文章的其它部分隔離起來，這樣的話，你可以增加圖像周圍的空白。

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

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

Styling Some Images

設計一些圖像

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. 你可以將一個特別的圖像的特別的形式添加到你的形式表上。如果你已經(jīng)設計好了你的所有的圖像，你必須確定你規(guī)定了每個設計的說明或者規(guī)定了image標簽形式的屬性，來制服那個屬性。如果你不改變頁邊的空白，那么它在新的形式中仍然會保持原樣。這個叫做CSS母/子關(guān)系.

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. 假如你想讓歸檔在自然類別，有一個美麗的綠色背景，中的文章上有一些兒圖像。其它的圖像看起來應該是一樣的，就是你添加到你的自然分類中的圖像。你只要將一個class添加到你的樣式表和分類中的每個圖像。

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 "自然"。我們想在圖像周圍有一個非常深綠的厚的邊沿和一個中等綠色的背景，來突出圖像。

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":

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

<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. 如果你需要為不同的圖像準備更多的類型，你只要創(chuàng)建更多需要的類型就可以了。

Styling One or Two Images Inline

設計一個或者兩個圖像 Inline

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ù)叫做inline形式。它直接將CSS形式應用到圖像自身。

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

<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."

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

Resources

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

久久精品水蜜桃av综合天堂,久久精品丝袜高跟鞋,精品国产肉丝袜久久,国产一区二区三区色噜噜,黑人video粗暴亚裔

WIKI使用導航

站長百科導航

站長專題

WordPress:Using Images

目錄

Images Resources for Wordpress

Wordpress圖像資源

Using Images in Posts

在文章中使用圖像

Image Size and Quality

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

Resizing Images

調(diào)整圖像大小

Styling Images

設計圖像

Styling All Images

設計所有的圖像

Styling Some Images

設計一些圖像

Styling One or Two Images Inline

設計一個或者兩個圖像 Inline

Resources

資源