这是一篇完整的 WordPress 文章教程,教你如何添加和编辑。
新手刚完成 WordPress 安装,正在学习 WordPress 后台操作,可能想新增文章丰富网站内容,却不知道从哪里着手?
还是想新增 WordPress 文章,却发现是新增成网站页面,跟你想的不一样?
这篇文章我会教你如何新增+设计自订的 WordPress 文章 ,这是丰富网站的要点,如下。
- 1. WordPress 页面和 WordPress 文章,哪里不同?
- 2. 新增标题和区块功能
- 3. 添加图片 / 影片
- 4. 设定文章锚点
- 5. 文章设定
- 6. 设定 WordPress Seo
- 7. 存储草稿 / 预览 / 发布页面
- 8. 设定网站菜单
- 9. 设定网站首页
- 10. 文章管理面板
- WordPress 学习资源
1. WordPress 页面和 WordPress 文章,哪里不同?
![what-is-different-page-post-2 WordPress 文章和 WordPress 页面,有什么不同?](https://img.itaoda.cn/wp-content/uploads/2023/05/what-is-different-page-post-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
WordPress 文字和图片的呈现,主要由文章和页面,这两者所组合而成。 也可参考 文章和页面差别。
「WordPress文章」,指的是一系列的网站文章,因为数量通常比较多,所以可将这些文章分类排序,例如运动用品店会分享运动相关的文章内容。
「WordPress页面」,通常指的是品牌官网首页、关于我们、服务内容、联络我们等 .. ,有特定功能的页面。
简单来说,文章和页面是不同的种类,所以在新增或编辑之前,记得要选对唷:)
2. 新增标题和区块功能
前往 WordPress 后台 > 文章 > 添加文章,会看到 WordPress 默认的 Gutenberg 古腾堡 文章编辑器,可以用它编写内容。
首先,填入想命名的文章主题。
新增区块功能
然后点击左上角新增区块,里面有多种功能可选取,这里先选择段落功能。
![tap-add-post-3 WordPress文章 :新增段落](https://img.itaoda.cn/wp-content/uploads/2023/05/tap-add-post-3.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
接着,点击刚新增的区块,就可以自由编辑文字。
在侧边栏的区块 标签也可调整字体大小、颜色等功能,如下图。
![tap-add-post2-1 WordPress文章 :编辑段落区块](https://img.itaoda.cn/wp-content/uploads/2023/05/tap-add-post2-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
- 新增任一个功能区块后,在侧边栏选取区块 分页,这里会显示可调整的细节项目,可以善加使用唷。
每个区块都有额外功能,像是在前后方插入区块、编辑 html 程序码、新增至可重复使用块、删除区块等 .. ,如下图。
![tap-add-post3-1 WordPress 文章 :区块额外功能](https://img.itaoda.cn/wp-content/uploads/2023/05/tap-add-post3-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
WordPress 编辑器支持常规常用快捷键,像是 Ctrl+C(复制)、Ctrl+V(粘贴)等 ..,然后按下 Delete 即可删除区块。
新增版面配置
WordPress 编辑器也有版面配置功能,内建有几种样式设计,可依照自己需求选取使用。
![tap-add-post4-1 WordPress文章 :新增版面区块](https://img.itaoda.cn/wp-content/uploads/2023/05/tap-add-post4-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
这就是简单的区块编辑器操作教程,可以试着玩玩看,很方便的:)
3. 添加图片 / 影片
网页图片和视频也是常见的文章内容,这边简单示范教程。
新增图片
首先,点击左上角新增区块,可利用搜索字段或是往下滚动寻找,找到图片功能。
![awp-add-page9-2 WordPress页面 :新增图片](https://img.itaoda.cn/wp-content/uploads/2023/05/awp-add-page9-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
有不同的插入图片方法,像是上传、媒体库、从网址插入媒体,这几种显示方法。
![awp-add-page11-2 WordPress页面 :新增图片](https://img.itaoda.cn/wp-content/uploads/2023/05/awp-add-page11-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
这边用媒体库 当教程示范,可以用它来上传文档,直接选取图片或把图片直接拖放到区块中,皆可以完成上传。
![awp-add-page13-2 WordPress页面 :使用媒体库功能,上传图片](https://img.itaoda.cn/wp-content/uploads/2023/05/awp-add-page13-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
当图片上传完成,可填写相关信息,这会有助于图片的 SEO 优化,填写完成后就选取送出。
![awp-add-page14-2 WordPress页面 :编辑媒体库图片信息](https://img.itaoda.cn/wp-content/uploads/2023/05/awp-add-page14-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
接着,可以变更图片对齐方式、新增图片链接、图片尺寸等多种设定。
![awp-add-page15-2 WordPress页面 :编辑网站图片样式+信息](https://img.itaoda.cn/wp-content/uploads/2023/05/awp-add-page15-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
这样就完成图片新增啰。
新增影片
WordPress 区块编辑器,同样支持多种影片格式,像是 Youtube、Vimeo .. 。
复制想要新增 Youtube 的网址贴至下图字段,确认后嵌入,就可以新增 Youtube 视频啰!
![awp-add-page18-2 WordPress 页面 :新增 Youtube 视频](https://img.itaoda.cn/wp-content/uploads/2023/05/awp-add-page18-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
也可以使用视频功能上传影片文档,或是用链接方式嵌入影片。
![awp-add-page19-2 WordPress页面 :新增视频](https://img.itaoda.cn/wp-content/uploads/2023/05/awp-add-page19-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
- 视频文档通常比较大,建议把文档放置在 Youtube 等视频流平台,然后用链接方式嵌入至网站上,会比较省空间唷:)
- 复制影片链接,直接贴至 WordPress 编辑器上,系统会自动添加视频功能。
4. 设定文章锚点
如果文章篇幅比较长,可能会需要使用文章锚点,就是点击文章的某个文字,会自动位移到指定位置,方便读者阅读。
WordPress 是有类似的插件,但其实使用预设编辑器就做的出来,这边来示范教程。
首先,新增一个 清单区块,输入几个章节段落文字,如下图。
![tap-add-post5-1 WordPress文章 :新增列表功能](https://img.itaoda.cn/wp-content/uploads/2023/05/tap-add-post5-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
接着用全选文字(反白),然后点设定锚点链接,使用#号加上英文,输入完成后确认,或是按下Enter也可。
重复此动作,将其余文字都设定独特的网址链接。
![tap-add-post6-1 WordPress文章 :新增锚点链接](https://img.itaoda.cn/wp-content/uploads/2023/05/tap-add-post6-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
设定完成应该会发现,清单上的文字都被加上连结了,如下图。
![tap-add-post7-1 WordPress 文章 :列表链接设定完毕](https://img.itaoda.cn/wp-content/uploads/2023/05/tap-add-post7-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
接下来,新增几个标题区块和段落区块,点击其中一个标题。
在侧边栏区块 标签的 Html 锚点功能,输入刚设定的链接(不加 # 号),让彼此对应起来。
![tap-add-post8-1 WordPress 文章 :设定标题链接](https://img.itaoda.cn/wp-content/uploads/2023/05/tap-add-post8-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
如此一来,就完成文章锚点设定啰,让文章的阅读力又上升了。
5. 文章设定
当编辑好了网站页面,我们需要做一些页面设定,这样可更进入状况。
点击右手边的侧边栏 内容 标签,这里可设定整个页面的相关信息,这个和区块 标签不同,区块分页是编辑单一区块。
![tap-add-post9-1 WordPress 文章 :切换成内容分页](https://img.itaoda.cn/wp-content/uploads/2023/05/tap-add-post9-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
状态和可见度
「可见度」有公开、私密、受密码保护这几种,「 发布 」可自由指定文章发布日期,可当排程使用。
![tap-add-post10-1 WordPress 文章 :设定状态和可见度](https://img.itaoda.cn/wp-content/uploads/2023/05/tap-add-post10-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
永久链接
设定文章的永久链接,有点像是帮文章取名字一样(建议用英文命名,有助于网站 SEO ),如果没看到网址设定字段,可先点击 储存草稿 就可设定网址了。
如果你的网址型式跟我不同,可能是你没有更改 WordPress 默认值。
请前往 WordPress 设置 > 永久链接,更改为用「 文章名称 」型式命名网址,这样有助于 SEO 排名。 可参考永久链接设定 有详细比较差异。
![tap-add-post11-1 WordPress 文章 :设定文章链接](https://img.itaoda.cn/wp-content/uploads/2023/05/tap-add-post11-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
设定分类和标签
将文章放置在指定分类下,可在这新增+设定分类,或是前往 WordPress 文章 > 分类,也能新增分类。
还有文章标签功能,看自己需不需要使用。
![tap-add-post13-1 WordPress文章 :新增文章分类和标签](https://img.itaoda.cn/wp-content/uploads/2023/05/tap-add-post13-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
设定精选图片、内容摘要
设定精选图片,这是页面的封面图片,有些 WordPress 主题主题 会显示,而有些不会显示,这依照你的主题主题规划而定。
内容摘要,这是在文章列表用来简略显示文章内容的,需搭配文章显示方式是内容摘要(WordPress 设置 > 阅读,进行设定)。
或是用区块编辑器的阅读更多功能,都可以解决文章列表的文字过长问题。
![tap-add-post15-1 设定封面图片、内容摘要](https://img.itaoda.cn/wp-content/uploads/2023/05/tap-add-post15-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
文章讨论
可调整是否开放留言,网站文章会建议开启,可以增加与读者的互动。
![tap-add-post16-1 设定文章讨论](https://img.itaoda.cn/wp-content/uploads/2023/05/tap-add-post16-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
以上就是简单的文章设定,帮助你打好基础。
6. 设定 WordPress Seo
![wordpress-seo-block-10 wordpress seo 网站优化](https://img.itaoda.cn/wp-content/uploads/2023/05/wordpress-seo-block-10.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
辛苦设计的网站页面,我们希望能被Google、Bing等浏览器搜寻,然后进行网站排名。
此时可以安装 WordPress Seo 插件,像是 Yoast、Rank Math 都是知名的 WordPress Seo 插件,请参考 WordPress 插件安装 可协助你安装。
这边用Yoast当简单范例,当插件安装完成后,在页面编辑的下方,会出现Yoast相关功能。
你可以设定焦点关键词,然后对此进行页面优化,只要让 Yoast 尽量都保持在绿灯的情况下,就是一个好的 SEO 页面唷:)
7. 存储草稿 / 预览 / 发布页面
编写页面过程中,可善用 储存草稿,能帮助你保存辛苦作业的成果。
预览功能,可让你针对不同设备设备,进行调整和观看。
最右边的点点符号,可调整工作区块内容,也可调整成自己喜欢的版型。
![awp-add-page29-2 WordPress页面 :存储草稿、预览、发布、额外功能](https://img.itaoda.cn/wp-content/uploads/2023/05/awp-add-page29-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
如果都确认没问题,点击 发布 按钮,就可顺利发出 WordPress 文章 啰。
由于我们刚把文章放置在指定分类下,所以需要把该分类放置在网站主菜单上,这样前台才能看得到。
接下来,我们继续教程:)
8. 设定网站菜单
刚刚我们已经将文章放置在某个分类中,现在需做的就是把该分类,放置在网站主菜单中,如此一来才能在前台网站上看到。
首先,前往 WordPress 外观 > 菜单,新增一个菜单名称,然后放置在 Primary Menu 主菜单中,然后点击建立菜单。
![awp-add-page30-4 新增菜单](https://img.itaoda.cn/wp-content/uploads/2023/05/awp-add-page30-4.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
- 不同的主题主题可能有多个菜单位置,所以需指定你的菜单要出现的地方,通常 Primary Menu 指的是网站主菜单位置。
然后,选取刚新增的分类 > 新增至菜单中,最后储存菜单。
![tap-add-post17-3 WordPress文章 :将分类新增至菜单中](https://img.itaoda.cn/wp-content/uploads/2023/05/tap-add-post17-3.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
- 菜单内容可用拖放排序位置,也可排父子层级。
回到前台网站,会发现主选单出现了刚新增的分类,点选前往也确实出现了刚新增的文章。
恭喜,到这步骤你已经顺利新增了第一个 WordPress 文章,请参考 WordPress 后台教程,能掌握更多功能。
9. 设定网站首页
![tap-add-post22-5 WordPress 文章 :设定网站首页](https://img.itaoda.cn/wp-content/uploads/2023/05/tap-add-post22-5.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
WordPress 是个强大的网站管理系统,许多 WordPress 主题主题预设的网站首页,是采用博客形式。
如果你刚照着上面教程,可能会发现目前的网站首页和菜单分类,重复出现了文章列表,我们需要做一些调整。
首先,我们需要设计一个网站首页,请参考 WordPress 页面教程 有示范如何制作页面。
网站首页制作完成后,只需进行一个设定,就能让访客搜寻主域,直接看到首页页面。
设定网站首页
前往 WordPress 设置 > 阅读,切换成静态页面,然后选取你想设定的首页页面,完成后储存设定。
![tap-add-post20-1 设定网站首页](https://img.itaoda.cn/wp-content/uploads/2023/05/tap-add-post20-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
如此一来,网站首页就切换成你设计的首页页面啰,恭喜你。
10. 文章管理面板
当新增了多个网站文章,你需要一个地方能让一次性管理。
前往, WordPress 文章 > 全部文章,可批次管理全部文章,也可个别管理文章。
![tap-add-post21-1 WordPress 文章 :管理全部网站文章](https://img.itaoda.cn/wp-content/uploads/2023/05/tap-add-post21-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
这可以让你一目了然整个网站文章状况,帮助网站主掌握自己的网站。
原文链接:https://www.itaoda.cn/blog/10421.html,转载请注明出处。
评论0