这是一篇详细的WordPress建站教程,教你怎么使用WordPress制作网站。无论你是一个0基础的新手,还是说想自己动手做自己的网站,这个教程会告诉你如何来操作。下面,我们就给大家演示如何一步一步搭建自己的WP网站。

WordPress建站教程,怎么用WordPress制作网站

本文目录(快捷导航)

一、建站前的准备工作

一个网站分三个主要部分:第一个就是Domain(域名),你的域名网址是什么;第二部分就是Hosting(主机),也是最重要的一个,也就是存放你的图片、音乐、文字的地方,越稳定越好;第三部分,需要有一个程序来管理你的Hosting,它叫做CMS(内容管理系统),我们选择使用WordPress。

网站的组成部分

我们在建站之前,必须准备好域名、主机,然后安装WordPress程序,我们就能得到一个网站框架,然后再具体地设计、建设网站。域名和主机的供应商,全球有很多,如果你不清楚该如何进行挑选,可以参考一下这两篇文章域名选择攻略主机选择攻略。想要省点事,直接购买我方的推荐即可,都是我方长期考察过,觉得不错的:

域名推荐Namesilo注册购买域名教程

主机推荐Siteground主机购买教程

域名和主机准备好了后,就可以安装WordPress程序了。具体的安装步骤,我在以前的文章里有写过,这里就不在赘述,请直接查看这篇文章:外贸自建站教程,其中第二步操作就是。

二、配置WordPress网站后台

WordPress的网站内容管理和发布都要在后台完成,我们需要进入WordPress的后台。在浏览器中输入你的域名网址/wp-admin,比如:www.example.com/wp-admin,然后在跳转的登录界面填入之前保存的账号和密码,即可登录后台。

登录wordpress后台

现在我们已经来到了WordPress的后台,给大家先简单介绍一下如何初始设置网站后台。首先,我们把这个界面不要的东西先关掉:

关闭提示

如果大家看到有些常规的东西,如果想把它删除,在右上角的Screen Options里面,把不要的项目打勾取消掉就好了:

右上角的Screen Options

如果你觉得后台是英文的,看着不方便,想改成中文,这也是可以的。鼠标放到左边的Settings,然后点击General选项:

找到Settings里的General选项

大家会看到有个Site Language,在这个位置我们可以自由调整网站语言。其中就包含了简体中文,选好了,别忘了点击Save Changes保存,才会生效。保存按钮,就在界面的左下角:

修改Site Language

点击Save之后大家会看到整个界面都换成了中文界面,这样大家使用起来会更加方便。但要注意,这里设置的语言要和你网站里使用的语言保持一致。否则,你后台设置了中文,网站实际上是个英文网站,那样的话,页面的代码里会出现中文,Language标签也不对,这对网站搜索引擎排名是比较不利的。

保存设置

我们现在的网站长什么样呢?大家可以在界面左上角,用鼠标划过我们站的名字,右键点击“查看站点”在新窗口打开:

查看站点

可以看到我们目前的WordPress网站的样子:

初始WordPress网站外观

三、安装WordPress主题

什么叫主题?也就是说我们网站的外观有一个可以自定义的装潢包,这就叫做主题。在以前的文章中,我们提到过The7、Enfold、Avada这些热门主题。本篇教程将使用一个新秀主题Astra,自定义功能更加丰富,对新手也更加友好;而且,有免费版本,足够一般情况使用了。

接下来就是安装这个主题。怎么安装?首先,鼠标移到左侧栏的“外观”。然后,点击“主题”选项:

wordpress “主题”选项

继续,点击左上角的“添加”按钮:

添加主题

接着在右侧搜索栏中输入“Astra”即可找到这款主题,第一个就是它:

搜索Astra主题

把鼠标移到这个主题上,点击“安装”:

安装主题

安装完成后,点击“启用”:

启用主题

到了这步,主题就安装完成了。大家可以再看下网站,会发现样子已经产生了变化:

主题应用后的网站外观

四、安装页面编辑器

在具体制作网站之前,我们还需要安装一个非常重要的工具Page Builder,也就是网页制作工具(页面编辑器)。怎么来安装呢?点击“插件”中的“安装插件”:

安装插件

搜索Elementor,大家会看到第一个叫Elementor Page Builder,它有500万+个活跃的安装,是非常流行的一款页面编辑器:

搜索 Elementor

点击“现在安装”:

安装插件

点击“启用”:

启用插件

安装成功后,跳转到欢迎界面,关掉即可:

安装成功,关闭欢迎界面

五、导入模板

对于绝大部分新手而言,自己完全设计制作一个网站是非常不现实的,导入一个现有的漂亮模板会是一个不错的选择。经过之前的步骤,我们已经安装了需要的工具。接下来我们需要在Astra提供的丰富的模板中,挑选一个自己满意的模板,然后导入网站中。

怎么做呢?我们点击“外观”中的“Astra选项”:

Astra选项

进到Astra这个主题的后台,在这个界面的右边有一个叫做Import Starter Template,这个模板功能是Astra主题最著名的功能之一。我们首先点击安装导入插件:

安装导入插件

接着,Astra会问你,用哪一个页面编辑器,选择Elementor:

选择Elementor编辑器

到这,大家就可以看到Astra提供的众多模板了。有各种类型的,宠物的、化妆品的、饮食的、儿童的等等,每个模板都是比较漂亮的。按照之前的假设,我们做的是家具,那么等会就选择一个家具方面的模板。大家会看到有一些主题上面写着Agency,这个标志代表Astra的PRO版本才能用,也就是说付费版本才能使用。

Astra提供的众多模板

我们给大家演示的是免费的版本,在最上边的栏目中,选择Free,我们就能发现所有能够免费使用的模板了:

寻找免费模板

看中一个模板后,你可以点击进去,查看它的各类页面样式:

查看模板详情

选定模板后,我们点右下角的“Import Complete Site”,也就是说把整个模板都导入网站中:

导入整个模板

当然了,在这里你也可以只导入某一个页面,假设你的网站你喜欢不同的风格,然后每一个风格里面挑出一个页面来进行组合,你就把不同的风格的页面单独挑出来,组合在一起,形成你自己的网站。在这样的情况下,你就可以选中单独的页面进行导入。

点击整站导入后,会有几个选项:第一个是删除以前的导入站,我们没有导入过,当然不用选这个了;其他的几个选项,一般都勾选即可,导入必要的设置、图片、内容、小工具等。点击“Import”按钮,进行导入:

导入选项

导入会有个过程,等待完成即可:

导入进程

导入完毕后,点击“View Site”,就会到我们整个网站的全新样子:

导入成功,查看网站

六、自定义网站内容

接下来,我们就给大家介绍一下,如何把现有的模板网站改成自己想要的样子。现在,我们看一下新网站,它导入的主题在新的页面上是怎么展示的。

导入模板后的网站外观

首先,这个网站包括了一个大的头图,这是一个家具的头图,然后在投图上有一个大的文字内容,底下还有个按钮直接连接到Our Projects页面。左上角有一个家具商店的logo,这是我们待会要换掉的。

然后,网站上方有几个栏目,有Home(首页)、Portfolio(案例)、About(关于我们)、Testimonials(客户评价)、Contact(联系页面)。比如说,我们点击案例,我们会看到一个可以滚动的图片展示墙。还有,关于我们的页面,主要是介绍团队的成员。

Logo和Icon

Logo通常是我们需要第一个就修改的网站元素。除了网站里的logo,浏览器标签页上的网站标志也要修改,这个标志叫做icon,也叫favicon:

网站Logo和Icon

我们怎么来更换这两个变成自己的呢?首先,我们点击左上角的“自定义”:

自定义

进来以后,我们会看到左边的选项,我们点击“页头”,当然了我们还可以有另外一种方法是在网站logo的左边有一个铅笔的标志,点击这里也可以:

页头

然后,点击“网站标识”:

网站标识

这里就是我们要更改的网站logo,它也叫图标;我们先把已有的logo移除,然后添加自己的图标即可。

更换Logo

如果你事先已经把新的logo上传到了网站媒体库中(Media),直接选择使用即可;没有做的话,就通过“上传文件”进行添加。

上传文件

现在,这个logo已经换成我们自己的logo了,我们可以进行logo的大小的一些调整,我觉得大概在220左右比较合适的:

调整Logo宽度

在这边还有一些选项,让你选择是不是用不同的logo应对不同的分辨率,比如说苹果的高清分辨率是不是不一样,或者是移动设备是不是不一样,如果是的话,你点击相应的就会有选择框出来,一般情况下使用一个logo即可。

设置不同分辨率下的Logo

还有一个叫站点图标,也就是上面我们说过的,在浏览器标签页上面的图标。同样是在这里设置的:

站点图标

Logo和Icon设置好了以后,点击“发布”就会应用到网站中去了。

页面内容

回到首页上来。有的人会关心,除了logo和icon以外,最重要的我们的页面内容是怎么来更换呢?其实,内容无外乎是文字、按钮、图片,还有一些图标等等,这些是通过什么来控制的?在这个主题里边,这些实际上都是通过Elementor来设置的。

现在,我们就点击“使用Elementor编辑”,进入页面编辑状态:

使用Elementor编辑

这时,我们会发现网站频道的名称都不见了,logo也不见了,直接进入了这个页面的部分:

页面的编辑状态

在页面的编辑状态中,我们可以清晰地看出这个页面的骨架,这个骨架是什么?就是说我们的背景图,也就是现在的沙发图,实际上是我们的一个主图,在主图的里面镶嵌了一些文字的结构,我们可以进行一些相应的调整,对这里的文字和图片进行修改。

修改很简单,假设现在我们不对它的设计进行修改,我们只对文字进行修改,我们就双击文字的区域,编辑修改文字即可:

编辑修改文字

这样一来,我们的文字就修改了。有的人会问大图怎么修改呢?大家仔细看,在图片区域实际上分了几个小块,而整个大图会被一个大的蓝方框包围,这就是Elementor的一个架构。这个架构,就叫一个大Section,里面一个个小块就叫小Section。鼠标点击下图中6个点的地方,就是控制整个大Section的一些设置的地方。

Section设置按钮

我们点击它,然后点击“样式”,大家会发现我们的头图就是在这里设置的。假设我们想换一个大图,点击“选择图像”,就可以自由更换图片了:

选择图像

再给大家演示一下怎么修改按钮,当你修改任何一个元素的时候,把鼠标放在这个元素上,就会看到相应的栏框和修改的标志出现,点击修改即可。

修改的标志

按钮的设置选项,会出现在页面的左边。你可以自由设置这个按钮的文本、样式、链接等等。

编辑按钮

同时,我们会看到在按钮的文字右边有一个白色的箭头,在哪修改?也是在这里。Elementor内置了丰富的图标库,使用起来非常方便,还可以控制图标跟句子间的距离。

Elementor图标库

最后,别忘了点击下方的“更新”按钮;这样,之前的设置才能生效:

“更新”按钮

其实,整个网站的内容都是如此类推的设置。此外,如果你找不到铅笔形状的编辑按钮,可以尝试点击栏目按钮,说不定你想要设置的项目就在其中:

栏目按钮

七、页面的设计与布局

如果你不满足于仅仅修改模板上的已有内容,想要自己设计页面的布局,那么你就需要使用到模块这个功能。

Elementor的模块如何使用?我们换个页面进行操作,比如About页面,同样点击使用Elementor编辑,然后打开左下角的“导航员”:

导航员

它是什么意思?它实际上是把整个页面的每一段都展示出来了,每一段有什么架构它也展示出来了:

段和栏结构

比如说,我点击打开一个段,再点击其中的栏,这个栏就会被标注出来:

标注

段和栏之间其实就是一种嵌套的关系,这就是这个网站的架构。通过这种方式,我们可以很容易地定位整个网站。当你点击网站的栏目图标的时候,你也会在右边发现这个栏目到底是哪一部分。

假设,我们对这个网站的模块布局有点不满意,我们想增加一些其他的模块,可不可以呢?这当然是可以的,在页面的空白区域,可以发现如下几个按钮:

添加模块按钮

点击“+”,点击后大家会看到,我们需要选择一个结构:

选择结构

什么意思?也就是说你现在正在这个位置增加一个模块,这个模块的结构是一整块的结构,还是左右的两块结构,还是三等分结构,4等分,左小右大,左大右小,等等。

这里,我们选择一整块为例,点击后可以看到空白区域多了一个段,这个段里也只有一整块栏目。因为,我们选择的就是一整块结构。以此类推,你可以建立N个不同的段和栏目结构:

添加的栏目

如上图所示,我们再点击空的模块中间的“+”号,界面左侧会出现,可以加入的元素功能。这些功能包括了最常用的文字、图片、标题等:

加入元素

你想添加哪个元素,就用鼠标把它拖拽到模块中即可:

拖拽元素到模块中

可以看到,之前的位置出现了标题内容;如果说我们还打算在这个模块中添加别的元素,比如图片;需要到左边点右上角的九宫格标志:

九宫格标志

再把一个图像元素拖拽到刚才的标题下面即可:

拖拽图像元素

元素内容的修改和设置,我们上文中就讲过,根据自身需要进行设置即可。另外,页面中任何不需要的段和栏目,可以点击“X”删除:

删除模块

刚才我们是通过“+”号添加的模块,如果不想自己一点点设计进行设置,可以点击“文件夹”标志,加载Elementor的模板:

“文件夹”标志

在这个模板库里面,它分两个主要的功能:一个叫网页,也就是说整个的页面都是已经设计好的,当我们点击插入的时候,整个的页面的模板都会被导入到刚才咱们编辑的页面;还有一个左上角的地方叫模块,这里的模块就是说它把页面分成了很多的版块,像刚才我们做了一个标题加图片,这也是一个模块,这里边会有很多的模块,而且可以根据分类进行挑选,插入到页面中:

Elementor模板库

如果你想使用这些模板,Elementor会要求你先创建一个免费的账户,然后就可以使用了。

创建账户提示

除了以上两种方法,我们还可以通过Astra自带的模板来操作,点击Astra标志:

Astra标志

大家可以看到,又回到了当初我们导入主题模板时的那个界面。这里,在右上角我们也可以选择Blocks,挑选自己喜欢的,然后Import。导入之后,我们可以去更改文字,更改图片,去进行自定义的设置。也就是说通过刚才我们选择的block和配置的页面,我们可以无限的扩展自己的设置。

Astra Blocks

对于网页设计来说,这些设计都是非常经典的结构,我们可以通过它来提高自己的整体的设计水平,然后去更换图片、文字,达到自己个性化的设置,这也是最简单、最便捷的处理方法。

八、设置导航栏

一个网站的导航栏是很重要的地方,这里接着介绍一下导航条的设置方法。

把鼠标移到页面左上角网站名称上,找到“菜单”选项:

“菜单”选项

点击进入到菜单编辑页面,下拉框选择主菜单,然后点击“选择”按钮确定:

选择主菜单

即可发现网站目前正在使用的导航栏菜单:

导航栏菜单

菜单里的栏目,可以把鼠标放上去进行拖拽调整;点击向下的箭头标志,可以修改每个菜单栏的内容;同时,可以选择左侧更多页面或者自定义链接,加入到菜单中:

编辑菜单

设置完成后,点击右上方的“保存菜单”即可生效。

九、设置页尾

页尾就是页面最下方的那个部分,也叫footer。一般会放置版权说明、公司名称等信息。怎么修改它呢?当鼠标放置在“使用Elementor编辑”时,会有个Footer的选项:

Footer选项

点击“Footer”,我们就可以用Elementor来修改这个位置。可以看到这里已经变成了一个模块的形式,我们点击编辑,就能够去进行修改:

编辑页尾

十、如何获取图片素材

大家可能会有一个问题,网站设计素材我们到底哪里才能找得到呢?比如说,用的最多的就是图片,我们给大家介绍一下图片的一些寻找方法。

几乎所有人都知道可以去谷歌搜索,但谷歌搜索上的图片基本上都是有版权的,很多时候不方便使用。这里推荐两个无版权图片网站:

第一个网站叫做Unsplash,这个网站它是一个免费无版权费用的一个网站,它上面的图片都是免费可以使用的,任何人都可以使用,甚至可以商用。

我们可以在这边搜Furniture,找到自己喜欢的图片之后,就可以Download Free了。

Download Free

你还可以通过点击图片,右下角的“Info”按钮查看这个图片被下载过多少次:

图片Info

如果是1万次以内,那还可以,重合的几率较低,如果超过了10万次甚至百万次,最好就不要用了。

图片详情

还有一个网站也是无免版权费用的一个网站。他的名字是Pixabay。这个跟Unsplash很像,同样有很多高质量的图片,大家可以上去搜索。

十一、设置链接格式和Https

网站全都设置完毕了之后,一定要注意你的网站的链接格式是什么。我们需要在我们的后台设置里,把固定链接形式选择为“文章名”,这种形式的链接对搜索引擎比较友好。

设置链接格式

还有一个非常重要的问题,我想分享给大家,也就是关于https的问题。什么叫做https呢?没有https的网站,浏览器中会显示不安全的标志,用户访问起来会不放心:

网站不安全标志

如何解决呢?首先,我们要到Siteground主机的管理台,找到网站,点击“Website Tools”;在跳转的界面,点击Security,然后点击SSL Manager。一般情况下,Siteground会自动给网站分配一个Let’s Encrypt这样的一个SSL证书,这也是Siteground的一个优势,它会免费给一个证书,不需要年度来续费。

SSL Manager

已经有SSL证书后,点击左侧的“HTTPS Enforce”,开启这个功能,强制整个网站使用Https,再去打开网站,你会发现网站已经显示了安全的标志了。

HTTPS Enforce

总结

通过学习上述的WordPress教程,相信你可以自己建立一个不错的网站出来。而且,日后你有能力随时更改它的外观,随时更改它的内容。祝你在日后的建站旅途中玩的愉快。

有什么想说的?欢迎评论留言

0 回复

发表评论

Want to join the discussion?
Feel free to contribute!

发表评论

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