如何在 WordPress 里插入图片？

本文的主要目的是帮助 JJ 解决在 WordPress（WP, hereafter） 环境下在 post 里面显示图片的问题。如果顺便能够帮助更多的人我会很开心。

目标：了解在 WP 环境下，在 post 或者 page 里面添加和编辑图片的方法。

步骤：

1. 准备》

1.1 进入 WP 管理界面，在 Welcome 面板中选择 Write a post 或者在工具栏中选择 Write 》Write Post 写新文章（如果是想在 page 中插入图片，此处 选择 Write 》Write Page）；如果是对已经存在的 post 或 page 进行编辑，在工具栏中选择 Manage 》Posts / Pages，然后在你将编辑的对象的右侧单击 Edit 进行编辑；

Write a post @ Dashboard

manage existing post or page @ Manage

2. 上传和选择图片》

2.1 现在我们来到了编辑状态下。在内容输入框的下面找到 Upload 工具栏，单击 “浏览…”，然后在弹出窗口中选择你将上传的图片（图片格式为 gif/jpg/png，其他文件如 mp3 或者 pdf 同理）并单击“打开”（Mac）或“确定”（Windows）；

Upload toolbar

2.2 此时弹出窗口会关闭，在 Upload 工具栏的 File 项目下会出现将上传的图片文件的路径，在其下方有 Title 和 Description 两项可以输入。

• 输入 Title 则可以在图片不能显示的时候出现文字标题，同时方便搜索引擎检索；
• 输入 Description 的效果是在浏览器中当鼠标置于图片上方时会自动出现一个文本框对图片进行介绍。

Title 和 Description 不是必须填的项目。（如果不填 Title 默认为图片文件名，Description 默认为空）。然后，在 Upload 工具栏中单击 Upload 开始上传，很快你将在 Upload 工具栏内看到你上传的图片的缩略图，表示上传完成；

• 》Note：上传的图片（或者其他文件）的文件名不能包含中文字符，否则图片不能正常显示。

2.3 如果你上传了多张图片或者想把已经上传的图片安插进正文中，在 Upload 工具栏中选择 Browse All，然后单击你将安插的图片；

3. 在正文中插入图片并编辑》

3.1 接下来就要在正文中安插图片。首先你要确定将图片放在正文的何处，并在此处单击鼠标左键。然后回到 Upload 工具栏。如果你想在正文中显示小图片（缩略图），保持默认选项 Show: Thumbnail 不变，如果你想显示大图片则选 Full size，如果你只想显示图片的标题则选 Title；然后，如果你想访问者在浏览器中点击该图片时能够链接到你上传的原始图片，则保持默认选项 Link to: File 不变，至于 Page 选项我发现实际上没什么用，而 None 则使图片不带任何链接；设定妥当之后单击 Send to editor》，图片则会显示在正文编辑框中；

 

Browse pic

3.2 无论是使用缩略图还是全图，此时你会发现图片边缘有一个蓝色的边框。下面我们需要对图片进行一下深加工。在正文编辑框的工具栏中选择那个看起来像一棵树的图标，然后在弹出的对话框中进行设置。

• Alignment 是对齐方式，如果你通常是把图片和文字放在一起，可以选择 Left 或者 Right，图片会置于正文的左侧或右侧，像插图，其他的对其方式可以根据需要选择。
• Dimensions 管理图片的大小，你可以输入数字在控制图片的大小，但除非你眼睛带计算功能，否则不要改这一项，因为如果比例不对图片会变形，如果需要保持比例地改变图片大小可以直接单击图片，然后图片任意一角拖动鼠标即可。
• Border 是图片的边框，通常设置为 0即可消除刚才提到的蓝色边框，当然你也可以保留，数字越大，边框越粗；
• Vertical / Horizontal space 管理图片垂直和水平方向留白的大小，如果图片是以插图形式和文字放在一起，为避免文字和图片靠得过近，通常可以把这两项都设置成 5 即可。

edit uploaded pic

3.3 如果你想让图片独立于文字并居中（或左对齐或右对齐）放置，可以在预计放置图片的位置之前的文本末尾输入回车另起一行，把图片插入此处，其他操作同上，然后按照编辑文本同样方法在编辑框工具栏中选择对其方式即可；

3.4 如果你是从网络资源中引用一张图片，比如从 flickr、别人的blog，则首先复制完整的图片地址（或者叫图片链接），然后在编辑框的工具栏中单击图片的图标，在弹出的对话框中 Image URL 一项内粘贴完整的图片地址，其他设置同上；

insert a pic by URL

3.5 如果你想浏览者在浏览器中单击图片时链接到其他的网址而不是图片的原图，则在编辑框工具栏中点击那个铁链形状的图标来更改链接。默认链接是你上传的时选择的，通常是原始图片，你可以把目标网址粘贴到 Link URL 中来更改，在 Target 中选择 Open link in a new window 则可以使浏览者在单击图片链接后另外打开一个窗口或标签来浏览目标网址。

到这里，在 post 或 page 中安插图片并编辑的工作就完成了，看起来挺吓人，Uh？别被吓到了，其实很容易，谁用谁知道。 🙂

使用 Flock 写作