编辑“WordPress使用图片”

<span style="border:1px solid #000; text-align:center; float:right; padding:6px;"><strong>导航:</strong> [[使用WordPress|上一页]] | {{Template:WordPress导航}}</span>
<div style="clear:both;"></div>
'''一图抵千言'''

在WordPress中添加图片是很简单的，你可以使用内置的文件上传功能直接进行上传。你还可以使用[http://www.wordpress.la/codex-%E7%9B%B8%E7%89%87%E5%8D%9A%E5%AE%A2%E5%92%8C%E7%BD%91%E7%BB%9C%E7%9B%B8%E5%86%8C.html FTP客户端]软件向自己的WordPress站点上传大量的图片。

Quicktag按钮组中就有这么一个图片（image）[[链接]]，因此在你撰写日志是就可以插入图片了。如果你使用联机上传的话，图片就会位于/wp-content/uploads文件夹下，直到你 在管理面板的杂项菜单中重新定义其他的文件夹位置。

WordPress目前可以（在日志页面内）重设图片尺寸并创建缩略图了。它还具有的相册功能可以显示大量的图片，而无需逐一向页面进行添加。

如果你想把图片作为表达思想的主要方式的话，可以考虑建一个[http://www.wordpress.la/codex-%E7%9B%B8%E7%89%87%E5%8D%9A%E5%AE%A2%E5%92%8C%E7%BD%91%E7%BB%9C%E7%9B%B8%E5%86%8C.html 图片博客和网络相册]。

==定制WordPress中的图片样式==
WordPress当前版本内置了图片对齐机制。WordPress添加了[[CSS]]类别将图片对其到某段落的左侧，右侧或者是居中，这样一来文本就会包围在图片周围了。

要利用这些优势的话，WordPress外观主题目录下的style.css文件必须须包括如下内容。
 img.alignright {float:right; margin:0 0 1em 1em}
 img.alignleft {float:left; margin:0 1em 1em 0}
 img.aligncenter {display: block; margin-left: auto; margin-right: auto}
 a img.alignright {float:right; margin:0 0 1em 1em}
 a img.alignleft {float:left; margin:0 1em 1em 0}
 a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

在WordPress博客中添加图片时，请在图片/媒体面板中选择图片对齐方式，居左，居右或居中。

图片会按所选的对齐方式被嵌入到博客日志中，如：
 <img src="http://example.com/images/leaf.jpg" 
 alt="leaf graphic" title="leaf graphic" 
 class="alignright size-medium wp-image-3109" 
 height="25" width="30"/>

有关WordPress图片风格定制的更多信息请见[http://www.wordpress.la/codex-%E6%96%87%E5%AD%97%E5%9B%B4%E7%BB%95%E5%9B%BE%E7%89%87.html 在日志中使用图片]。

==WordPress图片资源== 
WordPress有各类的插件可用于向网站添加图片功能及相册，其中的一些依赖WordPress才能运行，而其他的则是独立运作的。
Y你还可以通过使用[http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E6%A0%87%E7%AD%BE.html 模板标签]，插件或是[http://www.wordpress.la/codex-%E4%BD%BF%E7%94%A8WordPress%E4%B8%BB%E9%A2%98.html 主题]的风格页来向WordPress网站添加图片。比如，你可以将图片添加到：
*分类
*[http://www.wordpress.la/codex-%E4%BD%BF%E7%94%A8Gravatar%E5%A4%B4%E5%83%8F.html 带有Gravatar头像的评论]
*图形标识
*[http://www.wordpress.la/codex-%E8%AE%BE%E8%AE%A1WordPress%E6%A0%87%E9%A2%98.html 标题]
*[http://www.wordpress.la/codex-%E8%AE%BE%E8%AE%A1WordPress%E6%A0%87%E9%A2%98%E6%A0%8F.html 标题栏]
*[http://wordpress.la/codex-%E4%BD%BF%E7%94%A8Smilies%E8%A1%A8%E6%83%85.html Smiley表情]
[[Image:Gravatar2cwe.gif|WordPress使用图片]]
*[http://www.wordpress.la/codex-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BE%A7%E8%BE%B9%E6%A0%8F.html 边栏]
*页脚   
*列[http://www.wordpress.la/codex-%E7%94%A8CSS%E5%AE%9A%E5%88%B6%E5%88%97%E8%A1%A8%E6%A0%B7%E5%BC%8F.html 表]
*菜[http://www.wordpress.la/codex-%E5%88%9B%E5%BB%BA%E6%B0%B4%E5%B9%B3%E8%8F%9C%E5%8D%95.html 单]
*日志之间   
*列表之间   
*[http://www.wordpress.la/codex-%E5%AE%9A%E5%88%B6Feeds.html Feeds中的图形] [[Image:Rssfeed.gif|WordPress使用图片]]
*[http://www.wordpress.la/codex-%E7%AE%A1%E7%90%86WordPress%E9%93%BE%E6%8E%A5.html 链接和Blogroll]
*[http://www.wordpress.la/codex-%E2%80%9C%E4%B8%8A%E4%B8%80%E7%AF%87%E2%80%9D%E5%92%8C%E2%80%9C%E4%B8%8B%E4%B8%80%E7%AF%87%E2%80%9D%E5%AF%BC%E8%88%AA%E9%93%BE%E6%8E%A5.html “上一页”和“下一页”导航链接]
*[http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E6%A0%87%E7%AD%BE.html 模板标签]

==在日志中使用图片==
图片在WordPress日志和页面中的用法多种多样。它们可以自成主题，也可以用来增进信息或故事的详实度。

你所需考虑的首要问题就是图片在页面中的表现样式。这里指的不是图片的内容如何，而是它们与页面上其他内容的互动性。[http://www.wordpress.la/codex-%E6%96%87%E5%AD%97%E5%9B%B4%E7%BB%95%E5%9B%BE%E7%89%87.html 在日志中使用图片]可以让你初步了解图片是如何与其周围文本相作用的，也就是修改图片的边距，间隙以及边框。它还能帮助你学会在图片之下添加字幕。

接着要考虑的问题就是图片的尺寸了。调整图片尺寸的方法有两种。即实际的尺寸或是缩略图，后者能将用户引导至新的页面，而新页面上则会显示缩略图放大后的图片。

===在日志中插入图片===
在日志中插入图片看起来还是会让很多用户感到迷惑。

在日志中插入图片的步骤有二。首先要将图片文件上传到web服务器。然后第二步才是将图片插入到日志中适当的位置。

完成这些步骤的最简单方法就是使用"添加媒体"功能。按钮的选择完全取决于你是添加相片，视频，音频还是其他媒体（如PDF格式的文件）了。此方法将同时完成上述两个步骤。

你需要通过"自本机"来上传需要的图片文件。注：在点击"从本地计算机上传"之前最好选择"浏览器上传工具"而不是使用默认的Flash上传器。在选择"浏览器上传工具"后，点击"浏览..."按钮，接着选择所需的本机图片文件。最后点击"上传"按钮，那么你的图片文件就上传到web服务器了。

确保为图片起了一个适当的标题，以及相关[[描述]]（如有需要）。选择合适的对齐方式及尺寸并点击"插入至日志"按钮。现在你的图片就会插入至日志中光标当前所在位置了。

每次你上传图片到web[[服务器]]后，该图片就会被添加到博客的图片"Gallery"中。如果你要在另一篇日志中插入相同的图片，就打开"Gallery"，点击"显示"[[链接]]，并按照相同的步骤将该图片插入到其他的位置或日志中。

你还可以使用[[ftp]]程序手动将图片上传到[[web]]服务器上。此方法的详细步骤并不会在此赘述。

===图片尺寸及质量===
网页中使用的图片尺寸及质量是由多方面因素决定的。

*物理尺寸  :图片的物理尺寸基于两个方面：图片的屏幕尺寸及文件尺寸。一般将文件尺寸当作另一个问题来考虑。 
*文件尺寸 :此为服务器或硬盘上的文件尺寸。 
*分辨率  :分辨率指的是图片的像素数。分辨率通常通过图片的宽和高来分别，当然还包括图片所含的总像素数。 
*文件类型  :目前互联网上常用的图片格式类型有：jpeg，gif，png和ico。 

我们需要知道图片的物理尺寸以决定图片在网页中所占的面积。如果你的[http://www.wordpress.la/theme.html WordPress外观主题]的内容部分具有600像素的固定宽度，而你要是有的图片宽度是800像素的话，该图片将会将边栏和页面布局弄得一团糟。用于限定的600像素宽度内的图片需要限制在这一最大宽度之中，这样才能保证页面布局不受损害。旨在符合网页布局及风格的这些图片的尺寸完全由你来决定。

文件尺寸决定了页面载入速度，文件尺寸越大速度就越慢，因为图片质量越高，所花费的读取时间就越长。人们通常没有耐心花费太长时间来等你的网页读取出来，因此使用较小尺寸的图片文件会加快网页访问速度。一般说来，高质量图片尺寸应控制在60k到100k之间。较小图片的尺寸则应控制在30k之下。

图片的分辨率决定了图片的清晰度。分辨率越高，文件的尺寸就会越大，因此你需要权衡好质量和文件大小这两个砝码。

走运的是，目前[[互联网]]上使用的文件类型都具有可压缩性。当你保存这类文件时，她们就会将数据聚集压缩在图片文件中。网页浏览器可以解压这些信息，然后将图片显示在屏幕上。某些图形软件程序允许你在保存时设定图片的压缩度从而控制其质量（还有文件大小）。你可以做个实验来找到图片质量和图片文件大小之间的黄金分割点，不过这取决于网站中图片的应用程度了。

网站图片常用的文件格式类型有四种。文件名的尾部（也就是我们所说的扩展名）决定该文件的类型，也就是格式，其中一个类型是ico，用于[http://s.wordpress.org/favicon.ico favicon]文件 -- 但通常用在网站初次建立时。而其他三类格式则用于一般的图片文件：

*jpg (JPEG)格式适用于相片。将相片另存为jpg格式将移除相片内的某些细部。较好的相片编辑程序允许你控制这种移除量（即"压缩率"）。不同相片所需的压缩率不同；因此在决定压缩率时请谨慎，请保证操作结果能满足使用要求，同时保证达到较小的文件尺寸。 
*gif可能就不适合相片了。它比较适合线条和颜色分明的内容，比如logo，即固定区域的大块色彩。 
*png则适用于以上二者。它能压缩相片而不会丢失任何细节部分，但其文件尺寸通常比用JPEG格式保存的文件尺寸要大。某些过时的浏览器可能不完全支持png格式。 
如果你不确定某张图片到底该用哪种文件格式的话，可以尝试使用不同的格式进行保存，然后比较一下所得的文件尺寸。选择正确的文件格式能起到画龙点睛的作用！详情可参考此文：[http://articles.sitepoint.com/article/gif-jpg-png-whats-difference Sitepoint's GIF-JPG-PNG What's the Difference]。

===重设尺寸图片===
尽管大部分的图形软件程序都允许你重设图片的尺寸，但并非所有的此类软件都如你所愿。查看你所使用的图形软件目录是否含有重设尺寸，尺寸，转换，缩小或放大这类的字眼或近义词。如果没有找到类似的字眼的话，那你最好另找其他具有该特点的软件了。

重设图片尺寸的过程相对来说还是很简单的。通常有两种方法：

#你可以使用某些允许你调整图片边界的工具来重新设定图片的尺寸。重设尺寸最好是抓住图片的拐角来进行缩放操作，而不要抓住图片的边。抓住拐角进行缩放通常能够保持图片的高宽比例。详细指导信息还请参见手册。
#另一种方法就是直接定义图片的最终尺寸。较高级的图形程序允许你设定精确的尺寸或进行裁剪缩放。

图片尺寸重设完成之后，可能会变小，也有可能会稍稍钝化。你可以使用软件的锐化功能来锐化较小尺寸的图片。

在你调整好较小尺寸的图片或缩略图之后，将其导出为jpg，gif或png格式的图片文件。

===定制图片样式===
图片可以具有边界，边框，[http://www.wordpress.la/codex-%E6%96%87%E5%AD%97%E5%9B%B4%E7%BB%95%E5%9B%BE%E7%89%87.html 字幕]，其样式定制方式多种多样，通常说来有两种手段。你可以在风格页中定义它，也可以以联机方式来进行定制。

'''定制所有图片的样式'''

在[http://www.wordpress.la/codex-%E4%BD%BF%E7%94%A8WordPress%E4%B8%BB%E9%A2%98.html WordPress主题]的style.css文件中定制图片样式可针对网站中所有的图片或是某些特定的图片。

要使得网站中所有的图片样式一致的话，请查找image标签。接着将你的风格加入到该标签中。比如说你希望在所有图片的周围加上黑色边界，并希望边界与图片之间保持一定的空隙，而图片与文本之间也要保持合适的间距。
[[Image:Leaf1.png|right|WordPress使用图片]]
 img {
     margin: 5px;
     padding: 10px;
     border: solid black 1px
 }

或许你想要更具情趣的样式。你可以修改边界的粗度并将其设为双线样式。或许你还希望将图片与文本分离开来，也就是增加图片周围的间隙。

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

'''定制某些图片的样式'''

你可以为某些图片的样式表添加指定样式。如果已经定制了所有图片的风格，你需要确保在image标签样式中指定了所有样式声明或属性，以便覆盖该属性。如果没有更改边距大小，那么新样式中的边距大小不变。这被叫做CSS父/子关系。

假设你的Nature（自然）分类存档页面有一个漂亮的绿色背景图，而你希望该分类下所有文章都配备这样一个图片，那么你只需要为你的样式表和Nature分类下每张图片都加上一个class属性。[[Image:Leaf2.png‎|right|WordPress使用图片]]

为方便起见，我们假设class属性的名称为“nature”。我们希望有一个深绿色的厚边框和中绿色的背景围绕着图片，以便高亮显示图片。

 img.nature {
     margin: 20px;
     padding: 20px;
     border:solid #003300 4px;
     background: #006600;
 }
为Nature分类下的每个图片添加class="nature"
 <img src="leaf.gif" alt="Red leaf" class="nature" />
如果你希望为其它图片定制样式，就可以继续下去。

'''内嵌显示一到两幅图片'''

有时候你可能只需要修改网站上的一到两幅图片，让他们与其它图片看起来不同。这种方法叫做内联样式，直接将CSS样式应用在图片上。[[Image:Leaf3.png‎|right|WordPress使用图片]]

例如，假设你希望为某幅图片使用黑色背景，以引起人们的注意：
 <img src="leaf.gif" alt="Red leaf" style="padding:20px; background: black; border: none" />
内联样式并不能用在所有图片上，它只适用于一些需要“小改动”的图片。

==Resources==
*[http://www.wordpress.la/codex-%E6%96%87%E5%AD%97%E5%9B%B4%E7%BB%95%E5%9B%BE%E7%89%87.html 文字围绕图片]
*[http://codex.wordpress.org/Blog_Design_and_Layout WordPress Design and Layout]
*[http://www.wordpress.la/codex-%E7%9B%B8%E7%89%87%E5%8D%9A%E5%AE%A2%E5%92%8C%E7%BD%91%E7%BB%9C%E7%9B%B8%E5%86%8C.html 图片博客和网络相册]
*[http://www.yourhtmlsource.com/images/fileformats.html Image File Formats on the Web]

==相关条目==
*[[Drupal]] 
*[[OBLOG]] 
*[[X-Space]] 
*[[SaBlog-X]] 
*[[Bo-Blog]]
*[[WordPressMU & WordPress.com]]
[[category:WordPress中文文档|S]]
[[category:WordPress使用|S]]