编辑“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现有版本内置了图片对齐功能。WordPress利用CSS类将文本段落中的图片进行左对齐、右对齐或居中显示，使文字围绕在图片周围。

为了让新增的[[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"/>

==图片样式==
[[Image:leaf.gif|WordPress文字围绕图片]]

我们在日志中插入图片时，有时希望图片出现在页面中间，文字则位于图片上方和下方，但更多时候我们希望图片和文字能并排显示，让文字围绕在图片周围。图片可以以多种形式出现在段落中，我们也可以为图片添加各种设计元素。下面就从一个简单的实例说起。

下面是日志中一个常见图片标签的示例，图片周围没有文字围绕。注意：我们为图片标签添加了title和alt属性；alt保证图片的可访问性，title则是图片的文字说明。
 <img src="http://example.com/images/leaf.jpg" 
 alt="leaf graphic" 
 title="leaf graphic" />
开始设计被围绕的图片样式前，我们还需要稍微修改下控制WordPress网站样式的样式表单。[[CSS]]中介绍了很多新建、编辑级联样式表的资料。

在文本编辑器中打开WordPress主题目录下的style.css文件。编辑文件内容前请先保留备份，切记！之后在文件中查找img标签，所有图片选择符应该都聚集在一个组里，如果没有，逐一找出所有图片选择符并剪切到一个组中，减少之后可能出现的麻烦。

'''边框'''
需不需要给图片加个边框呢？如果需要，接下来要设想一下边框的大小、颜色和风格。不需要边框的话，可以用下面的语句：
 img {border:0}  
如果要为图片加上一个1像素的红色实线边框，可以用：
 img {border:solid red 1px}                                                 
我们在图片周围生成一个图片链接时，有些浏览器也会自动为图片加上边框，向访问者表明“这是一个有链接的图片”。如果不希望浏览器为图片添加边框，使用以下语句：
 a img {border:0}  
还可以为图片制作悬停效果，这样访问者的鼠标略过图片时，光标就会变成手掌形状，图片也会多出一个彩色的边框：
a:hover img { border:solid red 1px; }  

'''补白与图片宽度'''

为了让图片在文本中达到最好的展示效果，我们得删除一些元素。

首先要删除日志内图片周围的所有补白部分，确保图片能完整展示在页面上。如果样式表单中没有相关说明，我们要在样式表单中添加以下内容：
 p img { padding: 0; max-width: 100%; }  

'''图片在页面左边、右边、中间'''

图片在文本段落两侧时，图片和文字间应空出一定距离，以免两者相覆盖或导致页面过于紧凑。有些浏览器处理页边距和补白的方式与其它浏览器有所不同，而下面介绍的图片样式符合大多数浏览器的“空间要求”，图片不会遮盖文字，文字也不会贸然出现在图片中：
 img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
 img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; display:inline}
声明使图片和文字保持内联状态。

接下来需要为图片添加float声明。但是先等等，我们为什么只在图片上使用左漂浮和右漂浮呢？这不是一种浪费么？如果还有其它显示在页面左侧或右侧并且需要文本围绕的元素，完全可以为它们一起添加float声明。是的，的确可以这么做，不过具体过程就不在这里的讨论范围了。我们也不能浪费float声明，如果样式表单中没有类似声明，请加入以下内容：
 .right { float: right; }
 .left { float: left; }
'''注意：'''WordPress的自带主题Derfault（Kubrick）也利用了这一技巧，但所不同的是Kubrick将类命名为 alignleft 与alignright。用left和right方便记忆和使用，但两对名称达到的运行效果是一样的。

那么怎样居中显示图片呢？上面的方法也同样适用。center标签已经不再有效，所以可以为居中显示的元素新建一个样式：
 img.centered { display: block; margin-left: auto; margin-right: auto; }  
左侧图片、右侧图片、居中图片示例

这听起来有些复杂，不过一旦完成就不用再担心出错了。当然，只是希望如此。首先为图片生成一个链接，之后在链接中添加class=& amp;quot;right", class="left" 或class="centered"，这样图片就会相应地出现在文本右侧、左侧或是中间了。就是这么简单。
 <img src="/images/leaf.gif" class="right" alt="Red leaf" title="Red Leaf" />
 This is some text that will wrap around the image that sits on the 
 right side of the text that you are writing about the leaf that is there. 
 That is, if you are writing about leaves in the first place and you want to write about this specific leaf.

[[Image:201003230001.jpg|WordPress文字围绕图片]]

 < p>This is text that sits above the leaf image that you might be writing about in your post if you were to write about leaves.
 <img src="/images/leaf.gif" class="centered" alt="Red leaf" title="Red Leaf" />
 This is some text that will sit below the text image and you can continue to write about the leaf that is there.</p>

[[Image:201003230002.jpg|WordPress文字围绕图片]]

'''调整文本大小'''
一些浏览器允许用户调整ALT标签所生成的文本的字体大小。ALT标签生成的文本会在鼠标移过某幅图片或图片加载失败时出现。我们可以把字体调整成任何尺寸，但这里的字体最好能够大幅度小于正文字体。
 img {font-size:60%}

==命名图片==
这时图片已经显示在文本中了，效果不错。alt属性和title属性略微描述了图片的样式，但除非我们为图片加上一些说明文字，不然它只能孤单地站在那里。下面我们要给它加上一个标题样式。
 .caption { margin: 5px; padding: 5px; border: solid 1px #E5E5FF; background: #E5F2FF;
 font-size:90%; color: black }
这里我们为图片添加了一个边框，一点背景色。最好图片标题的字体大小和正文字体有所不同，同时还要为标题留出空白部分。
 < div class="caption right">
 <img src="http://example.com/images/leaf.jpg" alt="leaf graphic" title="leaf graphic"> 
 Red Leaf</div>

[[Image:201003230003.jpg|WordPress文字围绕图片]]

在上面这个例子中，我们为container添加了right类，将图片显示在文本右侧。left类将图片显示在文本左侧，而利用centred类，图片则会出现在文本中间，被文本完全围绕。

清除图片
如果图片尺寸大于围绕文本，图片就会变成一面飘着文字或者其它元素的小旗帜。这时我们就需要清除样式了。注意下面的div标签中是没有文字的。

<div style="clear:both;"></div>

==相关资料==
*[http://www.wordpress.la/codex-%E4%BD%BF%E7%94%A8%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主题]
*[http://www.wordpress.la/codex-CSS.html CSS]

==相关条目==
*[[Drupal]] 
*[[OBLOG]] 
*[[X-Space]] 
*[[SaBlog-X]] 
*[[Bo-Blog]]

[[category:WordPress中文文档|W]]
[[category:WordPress使用|W]]