怎么用WordPress搭建网站？教你从零开始搭建网站

WordPress是目前使用比较多的建站程序，用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站，WordPress有很多第三方开发的免费模板，并且安装方式很简单实用。

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

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

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

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

主机推荐：Siteground主机购买教程

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

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

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

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

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

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

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

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

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

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

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

继续，点击左上角的“添加”按钮：

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

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

安装完成后，点击“启用”：

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

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

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

点击“现在安装”：

点击“启用”：

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

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

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

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

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

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

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

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

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

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

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

导入会有个过程，等待完成即可：

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

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

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

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

Logo和Icon

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

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

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

然后，点击“网站标识”：

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

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

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

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

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

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

页面内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

总结

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