如何在 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 进行编辑;

dashboard1.png

Write a post @ Dashboard

manage.png

manage existing post or page @ Manage

2. 上传和选择图片》

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

upload.png

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-all.png

Browse pic

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

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

edit-pic.png

edit uploaded pic

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

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

insert-pic.png
insert a pic by URL

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

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

使用 Flock 写作

相关文章

put some music on iPod Shuffle 2,从她出世我就盯上了,想尽办法想把她娶进门,可惜我一无所有,高攀不起。终于,在魔鬼的驱使下,两周前我一狠心斥巨资去中关村败了一只回来。当时找遍了村里村外,最便宜的是RMB ...
G 拼音 Google要出中文拼音输入法。不得了,从放出风声开始江湖上到处都在问都在找都在猜测,等到4月4日真的发布的时候,事情就更复杂了,对于输入法本身褒贬不一,不过除了一些人对界面不满之外大多数人似乎都很认...
humour from Google go to Googletype in "failure"read the first listinglaughtell everyone you can before the people at G...
update log 0.1 9 April 2007    主要更新内容: 暂时沿用了 iTheme (powered by Nick La, n.Design Studio)的模板,Mac的风格,比较特别,尤其是侧边栏可以...

如何在 WordPress 里插入图片?》上有6条评论

  1. 我的blog目前還不能插入圖片,除了在xp系統下用ie瀏覽器,別的瀏覽器或是目前的mac系統都是同樣的提示,圖片選擇完成,點插入文章就沒反應了,就在新標簽中顯示一個空白頁面,遠博文中還是沒有圖片,望幫忙解決。

  2. 非常感谢。终于知道为什么图片不能显示了,原来是文件名的原因。我还是个新手,以后要多想你请教了。

  3. Pingback引用通告: 终于知道blog中不能插入图片的原因:文件名是中文! « realyang@3322.org

发表评论

电子邮件地址不会被公开。 必填项已用*标注