所有分类
  • 所有分类
  • WP插件Pro
  • HTML模板
  • 微信小程序模板
  • 源码

网站搭建:WordPress 网站设计+网页制作(astra主题)

自架网站需要准备什么?

网站能正常运作,就需有个人域名 +服务器或者主机 ,这是基本配备。之前的文章介绍了如何选择主机和服务器,这里不在一一介绍。

WordPress 主题安装+使用形象模板

这章节,会教如何安装 WordPress 主题主题+套用模板,让网站看起来美观且功能性更强。

Astra 是一款热门多功能的轻量级主题,主题执行速度快速,可拿来建立多种类型的网站。

为了方便接下来教程,建议先跟我一起安装 Astra 主题,有免费版可安装。 更多可参考 Astra 主题入门、Astra Pro 进阶教程

WordPress 主题主题安装

首先,前往 WordPress 后台 > 外观 > 主题主题,点击 安装主题主题

前往 WordPress 主题安装
前往 WordPress 主题安装

在搜索字段输入 Astra,我们安装 Astra 提供的免费版本,安装完成后请记得 启用,才会真正套用主题。

创建Blog :wordpress 主题主题安装
创建Blog :wordpress 主题主题安装

主题启用完成,前往网站前台看一下成果,看起来还不错的 WordPress 主题,成功出现。

使用 Astra 形象模板

Astra 有提供多种现成模板,安装模板导入插件就能直接使用,可节省网页设计时间。

前往 外观 > Astra Options,点击 Install Importer Plugins 安装模板导入插件。 或是安装 Starter Templates 插件,这两种方法都是一样的。

安装 Astra 起始样板插件
安装 Astra 起始样板插件

安装并启用模板插件,会看到 Astra 支持多种页面编辑器模板,选择热门的 Elementor 类型。

选择页面编辑器相关的模板
选择页面编辑器相关的模板

进入后,有多种免费模板可供安装,但有些是进阶版才能使用,更多 Astra Pro 进阶版教程

搜索 Digital Agency 进行安装。 (站长可选择合适且喜欢的模板,也可以选择跟我一样的模板,继续学习,后续都能再做更换)。

安装 digital agency 样板
官网搭建:安装 digital agency 样板

这边可简单预览样式,点击下面的 Import Complete Site 完整导入。

点击完整内容安装
点击完整内容安装

这边用默认值即可,Astra 会自动帮你安装相关插件和页面内容,点击 Import 就开始安装。

备注: Delete Previously Imported Site 这是用来删除先前导入的样板内容(包含文章、页面),如果之后想更换样板,可把这个勾选再进行安装。

官网设计 :选择导入种类
选择导入种类

安装完成后,前往网站前台就会看到成果啰。 恭喜你,这样搭建网站速度快多了。

官网设计 :Astra 主题样板导入完成啰
Astra 主题样板导入完成

接下来呢,要做的就是把它改成我们想要的样子,继续学习吧。


更改网站页首 Header

有关于网站页首的设计,Astra 有开发很好用的 Header Builder 页首编辑器,可用它来处理大部分的页首设计+菜单功能。

这章节,会用到这个工具编辑页首,主要为更改网站 Logo、网站菜单,我会分步骤教程,帮助大家上手。

Step1:更换网站 Logo

在会员登入状态,点击 WordPress 网站上方的 自定义

点选上方的自定义按钮
点选上方的自定义按钮

接着,会进入 WordPress 的可视化编辑器,点选 Logo 旁边的笔图标就可修改页首,然后更换自己的 Logo。

也可针对不同装置调整宽度+浏览,完成后点 发布,这样网站 Logo 就更换完成。

小提醒: Astra 有分为 2 种页首类型,分别是原页首(Primary Header)& 透明页首(Transparent Header)。

如果发现修改某些页首选项但都无反应,那就切换到另一个类型调整看看,应该就能顺利修改成功了:)

然后,可以把菜单名称翻译为中文,方便访客阅读浏览。 前往 WordPress 后台的 页面 > 全部页面,在页面下方点 快速编辑

WordPress 点击快速编辑功能
WordPress 点击快速编辑功能

把标题翻译为英文,至于「代称」是页面 ID,会用这个名称当作网址,建议填写英文。

举例:如果网址路径想设定为 https://xxxxx/ about,这里只需输入about即可,完成点更新

更改 WordPress 页面标题
更改 WordPress 页面标题

其他页面也用一样方式修改,菜单名称会自动抓取这里的页面标题。 名称修改完成后,可以参考 WordPress 菜单,进行字段顺序调整。

如果标题还是英文的话,可前往 WordPress 后台的 外观 > 菜单,直接把菜单改成中文就行了。


9. 新增文章列表页面&侧边栏设定

这章节,我们来新增文章列表页面,这页面功用是将网站上的所有文章,都会在这里显示出现。

我主要拆成 4 步骤,完成后在网站主菜单上就会看到「 文章列表 」菜单,此页面也有侧边栏布局。

Step1:新增页面

前往 WordPress 后台的 页面 > 新增页面,任意输入页面标题,页面内容可以空白,因为之后会被取代成一系列的文章。

设定网址链接、封面等 ..,完成后点 发布。 更多的 WordPress 新增页面 学习。

官网设计 :新增文章列表页面
新增文章列表页面

Step2:阅读设定

前往 设置 > 阅读,把文章页面设定成刚刚添加的文章列表页面。

下面信息提供中的文章显示方式改为内容摘要避免页面过长,完成后保存。

WordPress 阅读设定
WordPress 阅读设定

Step3:放入菜单

设定完成的文章列表页面,我们需把它放入菜单中,WordPress 网站前台才看得到。

前往外观 > 菜单,菜单顺序可拖曳排序也可排父子关系,完成后储存。 更多 WordPress 菜单教程 参考。

WordPress 网站菜单调整
WordPress 网站菜单调整

Step4:设定网站侧边栏(Sidebar)

套用的这个 Astra 没有开启侧边栏,我们来调整一下。 前往外观> Astra Options,点选 Sidebar Options 设置。 可参考 Astra 主题入门

官网设计 :编辑网站侧边栏
官网搭建 :编辑网站侧边栏

把 Default Layout 默认布局改为 Right Sidebar 右侧边栏。

Pages(单一页面)调为 No Sidebar。 Blog Posts(单一文章)和 Archives(文章列表)调为 Default 默认,然后储存即可。

官网设计 :调整网站侧边栏布局
官网设计:调整网站侧边栏布局

备注:如果文章列表页面的 Logo 需更换,点选上图 Logo 旁的笔图标,上传更换即可。

这样一来,文章列表和单一文章都有侧边栏了,WordPress 页面也顺便调成无侧边栏模式(可全版设计),变得更好看了。

最后前往 WordPress 前台看一下成果。 Great! 文章列表页顺利出现在菜单上了,点击进去也看得到文章。

如果点击文章列表,但没内容没关系,可能是你的网站目前还没有文章,下一章节会教大家如何新增文章。


10. 新增第一篇文章

这章节实际写一篇文章,让网站多增加一些文章介绍,这有助于让访客更认识形象品牌,且能加强信任感。

首先,前往文章>新增文章。 在 WordPress 平台里,文章和页面是不同形式.

WordPress 默认是使用自定义的 Gutenberg 编辑器,进入后点左上角的加号,就可添加不同的区块功能。

像是新增图片影片、段落标题、清单列表、网站按钮等 ..,可自由的编写个人或公司文章。

形象网站建置:新增第一篇文章
新增第一篇文章

写 WordPress 文章的过程中,可随时点右上角的 储存草稿,保存目前的文章资料。

文章正式发布前,我们会设定网址路径、文章分类&标签、精选图片(网站封面)、是否开启留言等 ..,完成后点 发布 上线。

前往网站前台,就会看到文章顺利出现

备注:有关于「 文章 」不建议使用 Elementor 页面编辑器编辑,因为 WordPress 默认编辑器来写文章就很够用了。 至于页面再用 Elementor 编辑会比较适合。


网站分类&标签

WordPress 有完整的网站分类和标签功能,方便你统整文章和维护更新,且有助于访客搜寻(下面仅示范教程,实际依照自己需求新增即可)。

WordPress 文章分类

前往 WordPress 后台的文章 > 分类,这边可新增多个文章分类。 更多分类排序功能。

备注:代码是分类网址的设定(建议英文),文章分类可设定父子阶层。

新增 WordPress 文章分类
新增 WordPress 文章分类

可对现有的分类进行 编辑,或是点 快速编辑 可直接修改重点。

WordPress 分类编辑&删除
WordPress 分类编辑&删除

文章分类也可放入菜单中。

WordPress 文章标签

前往 WordPress 后台的文章 > 标签,这边也可新增多个文章标签。

WordPress 标签编辑&删除
WordPress 标签编辑&删除

以上是简单的 WordPress 分类和标签教程,这有助于文章归类和访客搜索。


12. 新增&编辑网站页面

建置品牌形象网站,可能会想自行新增、编辑网站页面,丰富整个网页设计,这章节教大家如何做。

使用 Elementor 页面编辑器(更多 Elementor 入门教程

一开始安装 Astra 模板时, Astra 有自动帮我们安装 Elementor 插件,也新增几个使用 Elementor 编辑器制作的页面。

在新增页面中,点击上方的按钮就可改用 Elementor 编辑页面。

使用 Elememtor 页面编辑器,编辑页面
使用 Elememtor 页面编辑器,编辑页面

然后会看到 Elementor 的可视化设计面板,免费版有提供许多功能可使用,用拖拉的方式就可以制作页面,真的非常方便。

以上就是新增&编辑页面的简单介绍,可自行新增网站页面,或从现有的页面做修改。

还有一种前往 Elementor 页面编辑器比较快的方法,就是前往你想修改的页面,点击上方的「 使用 Elementor 编辑 」,就能直接编辑指定页面。

如何管理全部的 WordPress 页面?

至于如何完整管理全部的 WordPress 页面。

前往页面 > 全部页面,这里就是目前所有的页面列表,你可以自由的编辑管理,而有 Elementor 标记的就代表是使用 Elementor 制作的页面。

WordPress 页面管理列表
WordPress 页面管理列表

小提醒:已经使用 Elementor 编辑器设计的页面,会建议就继续使用,不要再改回到 WordPress 默认编辑器了,不然排版可能会乱掉。

使用 WordPress 默认的块编辑器(Gutenberg)

Gutenberg 区块编辑器是 WordPress 系统默认的,如果没安装像 Elementor 之类的页面编辑器,也能使用它设计页面,只是功能比较少一点。

前往页面 > 新增页面,就可用 WordPress 区块编辑器制作页面,一样点击左上角加号,就有多个区块功能可使用。

详细可参考 WordPress 新增页面,有完整页面教程。

使用 WordPress 区块编辑器添加页面
使用 WordPress 区块编辑器添加页面

恭喜你,以上已经教会你大致上的 WordPress 页面设计概念了。

接下来,你可用现有的页面修改会比较快,然后新增或删除多余的页面,就能完整你的网站搭建)


13. 网页区块+小工具设定

通常一个网站设计,都会有侧边栏的存在,可以多提供访客一些功能使用。

WordPress 默认就有许多小工具可使用,如果搭配不同的网站主题或插件,可能会帮小工具增加额外功能。

前往 外观 > 小工具,就能看到目前有哪些小工具,下文以设定「主要信息栏」为范例。

小工具快速设定信息栏
小工具快速设定信息栏

展开页面以后,就能进入主要信息栏目前有哪些功能,可以自行新增功能,也能点选各项功能直接进阶设定,我们以「近期文章」做示范。

点击「近期文章」就会跳出更多设定的内容,可以调整标题、文章显示数量、是否显示文章发布日期,也可以拖拽这项工具的位置。

最后记得按更新保存以上设置,就完成了。

备注:由于我们刚有在 Astra 做设定,只有在文章列表和单一文章,才会看得到侧边栏。


有关于网站页尾的设计,可以使用 Astra 的页尾编辑器,也就是旧版的 Footer Builder 功能,能处理大部分的页尾布局+功能设定。

由于 Astra 主题默认页尾里面,会有不需要的广告标语,那要如何做更改呢?

首先,前往网站前台的任一页面,点选上方的自订

接着,会进入 WordPress 的可视化编辑器,往下滑到最底点击笔的图标,进行页尾编辑。 (按此类推,也可点击其它块进行编辑)

然后在 Footer Builder(页尾编辑器)中,找到相对应的字段修改,完成后 发布 即可。

也可以参考视频关于astra页脚修改的教程


15. WordPress 插件安装+管理

WordPress 是完全开源软件,任一个软件工程师皆可在上面开发功能,所以让 WordPress 生态圈非常丰富(有高达 5w 个可用插件),可以帮助你扩充网站功能。

前往 插件 > 安装插件,可选择喜欢的插件安装,有确定目标可善用搜寻安装。 如果不知道如何选择,我在 WordPress 最佳插件推荐,有整理可帮你节省时间。

WordPress 插件搜索&安装
WordPress 插件搜索&安装

对于新手来说,会先建议安装 WordPress 基础插件即可,然后同一种类型装一款即可,还有插件不是越装越多就好,需考虑到网站效能。

多种 WordPress 基础插件(仅列举部分)

  • Akismet:垃圾留言防护插件。 更多 Akismet 插件教程。
  • Jetpack:官方综合型插件,范围涵盖安全性、备份、速度优化、工具强化 ..。
  • Rank Math:优质 SEO 优化插件,可参考 Rank Math教程。
  • WPForms:优质表单设计插件。 更多 WordPress 表单制作插件推荐。

有关于 WordPress 插件的管理设定,可前往 插件 > 已安装插件,这边可启用或停用插件,或是删除不需要的插件。

WordPress 插件管理面板
WordPress 插件管理面板

通常网站主随着经营时间,网站插件都会越来越多(因为可能有更多网站需求)。

所以一开始安装必要插件就好,然后暂时用不到插件可以先停用,完全用不到的就直接删除。


16. Astra 主题+Elementor 插件组合

Astra 主题 & Elementor 插件,是很多 WordPress 玩家爱用的一种组合,它有很多优点像是:

  • 新手容易上手
  • 有现成模板,不用从零开始设计
  • 网站客制化程度非常的高
  • 都有免费版可以用
  • 因为都是 WordPress 热门软件,所以有很多外围插件可搭配
  • Astra 主题快速,Elementor 会有点吃主机效能,两者刚好呈现一个平衡

这也是为什么本文会用这个组合,做一个搭配教程。

但如果你对这个组合不感兴趣,最佳主题推荐、电商主题推荐、优质页面编辑器,这几篇文章里面,也有不同的选择可以慢慢选。

下面我们对 Astra+Elementor 更进一步认识,可让你更掌握自己的网站功能。

Astra 主题介绍

Astra 是个轻量快速的多功能主题,有许多可配置功能(欢迎参考 Astra 主题入门,或下面影片)。

前往外观 > Astra Options,依照你喜爱的风格调整即可,如下图。

Astra 全站功能设定
Astra 全站功能设定

如果都看完,相信你对 Astra 主题的整体掌握度,大概也就如鱼得水了)

Elementor 插件介绍

Elementor 是全球知名的页面编辑器,有超过 500w 次下载量,提供可视化的编辑模式,就算不懂程序也能网页设计。

如果需设计网站页面,这会是比较推荐的方法,因为功能比较多且完整,而且可以直接套模板下去用,就不需重新开始制作。


17. 开始网站营销(SEO 优化)

WordPress SEO 技巧指南:主动提交网站给 Google,加速收录速度
官网搭建完成后,需进行网络营销

完成网站搭建后,我们可以开始进行网络营销啰!

要进行网站营销,就需要先了解SEO是什么,让自己在搜索引擎结果页面(SERP)展露头角,就有机会提升网站能见度。

搜索引擎每日需处理庞大的网站资料,如果主动提交自己的网站地图(又称 Sitemap),可有效加速网站被搜索引擎收录的速度,有效提升 WordPress SEO 分数。

Google、Bing 是目前两大搜索引擎,Google 可把 Sitemap 提交到 Google Search Console,Bing 则是提交到 Bing Webmaster Tool。

当网站被收录到搜索结果,网站才可以被访客搜寻到,这时就会开始有网站流量进入。

有关于网站流量的分析统计,几乎都会使用 Google Analytics 软件,需要把 GA 追踪码嵌入到 WordPress 网站,Google 才会帮你统计分析。

通常网站刚开始,把这两个设定好就可以了。

最后,我们可以安装优质 WordPress SEO 插件,搭配 关键词营销工具,帮助站长们更有效的规划 SEO 营销策略。

 

原文链接:https://www.itaoda.cn/blog/12405.html,转载请注明出处。

0
使用和安装有任何问题
请加客服QQ:1442071397 或wechat:pufei889


免责声明

本站所发布的部分内容自网络,该部分内容限用于学习和研究目,有版权问题的,下载后的24个小时之内,从您的电脑中彻底删除。且不得将用于商业或者非法用途,否则,一切后果请用户自负,与本站无关。

评论0

请先
没有账号?注册  忘记密码?

社交账号快速登录

温性提示

演示站服务器在国外,网站打开速度有点慢,请耐心等待

多功能、多行业外贸商城 wordpress商城WOOCOMMERCE

23+
行业模板