搭建步骤
1、购买服务器和域名
2、安装wordpress
3、安装网站主题
4、网站设计(Elementor免费版)
进入后台
- 在域名后面加上:/wp-admin
后台页面主要结构:
![](https://img.haomeiwen.com/i24850758/a964ff1f26157121.png)
文章(post)
● 看到的文章,如博客的博文,官网的首页等
● 可以用关键词和标签tag做SEO排名优化
● 通过社交平台转发分享,增加曝光度
![](https://img.haomeiwen.com/i24850758/1eeba66aee17b7b3.png)
媒体(media)
● 所有上传的图片、视频、pdf等文件都会在这里显示
![](https://img.haomeiwen.com/i24850758/dca8b00e535d1d9e.png)
页面(page)
● 不需要别人评论分享的内容(如:关于我们、联系我们、商务合作、隐私条款等)
● 通常置于网站底部
![](https://img.haomeiwen.com/i24850758/2fc18ab2acd044c9.png)
评论(comment)
● 用户观看文章后的评论
● 该模块可以实现评论的批量操作
![](https://img.haomeiwen.com/i24850758/d5bbbf906693100d.png)
使用配置
伪静态和固定链接
● 伪静态和固定链接,对SEO关键词优化更加友好
![](https://img.haomeiwen.com/i24850758/346770399a916d2e.png)
设置主页
● 进入外观——自定义
![](https://img.haomeiwen.com/i24850758/37e3843cc04d7f4d.png)
-
进入主页设置
image.png
创建菜单导航
- 创建菜单
![](https://img.haomeiwen.com/i24850758/907d81dc16cfc55c.png)
- 给菜单添加网页
![](https://img.haomeiwen.com/i24850758/b543e970d3954e54.png)
无需插件让WordPress网站调用高德地图的方法
具体设置使用方法如下:
1.登录高德地图开放平台
http://lbs.amap.com/console/show/tools
![](https://img.haomeiwen.com/i24850758/38c7b4ce8bac7dfc.png)
2.点击“添加标注”,然后从地图上找到要显示的地理位置.
![](https://img.haomeiwen.com/i24850758/1331440f7da8f17f.png)
3.找到后点击选择“添加码点”,然后在地图点击添加,为了精准,可以将地图放大然后再标注。
![](https://img.haomeiwen.com/i24850758/b4102e3d9d47497c.png)
4.标注好之后可以添加文字说明,第一行是标题,可以用来显示公司名称。第二行是文字描述,可以放上地址等其他信息,需要注意,第二行文字区域不能直接换行,否则网站调用的时候会无法正确显示。
![](https://img.haomeiwen.com/i24850758/f2d043561915dbfe.png)
5.都设置好之后,点击底部“获取代码”按钮,将所有代码复制,粘贴到网站对应的模块,如果网站用的是可视化编辑器,可以添加一个html模块,将代码粘贴进去。
![](https://img.haomeiwen.com/i24850758/dca0bc075bda581d.png)
6.最后可以调整一下地图的尺寸
![](https://img.haomeiwen.com/i24850758/f74565b810f1b7ea.png)
配置SMTP发送电子邮件
ps:配置完成以后还需要到wpform上面修改接受邮箱的地址
通过PHP自带的mail函数实现电子邮件的发送成功率极低,现有的各类邮箱,例如QQ邮箱、新浪邮箱、163邮箱等,基本不支持PHP语言的mail函数实现的邮件发送,因此,需要配置基于SMTP协议的邮件发送环境,实现Wordpress个人网页的功能增强。
邮箱: 以 QQ邮箱 为例,其余常用的邮箱亦可供参考
Wordpress插件: 以 WP Mail SMTP by WPForms 插件为例,也可使用其他支持SMTP的插件实现,例如 Contact Form 7 (个人感觉Contact Form 7没有WP Mail SMTP by WPForms好看)
QQ邮箱开启SMTP服务
通常情况下,QQ邮箱(包括其他常用邮箱)默认关闭SMTP功能,主要是防止垃圾邮件的泛滥,开启SMTP说实话在邮箱的使用中也没有多大影响
找到QQ邮箱的 设置 功能,一般在左上角邮箱标志附近,点开它
![](https://img.haomeiwen.com/i24850758/c3b99c8bb44fb0e7.png)
点开邮箱设置栏目中的 账户 服务,下拉找到SMTP服务的设置模块
![](https://img.haomeiwen.com/i24850758/596cc2c841ae2e3d.png)
点击 POP3/SMTP服务 对应的 开启 按钮,即图中红框位置,图中所示为该服务已开启的状态截图,若该服务未开启,红框将显示 开启
![](https://img.haomeiwen.com/i24850758/24376223571a28f7.png)
点击开启后会弹出如图所示的窗口,根据提示内容,发送相关短信到特定号码,一定要确保手机号正确,否则SMTP将无法开启
![](https://img.haomeiwen.com/i24850758/42e7e8e630b90f92.png)
发送短信成功后,点击 我已发送 ,而后会提供一个授权码,将这个授权码记录下来,插件配置时将会用到
SMTP服务成功开启后,显示将更新为如下内容(下文配置成功后再回来看)
![](https://img.haomeiwen.com/i24850758/644744d4febbdb86.png)
Wordpress插件安装
以管理员身份打开Wordpress后台界面,在左侧的导航栏中找到 插件 ,点击它,而后点击 安装插件 ,或者直接在插件悬浮的导航栏中点击 安装插件
![](https://img.haomeiwen.com/i24850758/b29797ba6e55f495.png)
我使用了 WPForms 插件制作联系表单,因此配适选择了 WP Mail SMTP by WPForms 插件,网上还提供了其他类似的插件,都可以使用,配置方法与本教程类似
在搜索栏中输入插件名称,找到需要安装的插件,点击 现在安装 ,安装完成后,该按钮会变为 启用,点击启用
![](https://img.haomeiwen.com/i24850758/827ced5f044ba32d.png)
插件启用后可刷新网页,将会在左侧导航栏中看到我们新安装的插件,点击它
![](https://img.haomeiwen.com/i24850758/467366fb64a957f8.png)
在插件页面中设置相关信息,图中 发件人 以及 发件人名称 可自行修改,其余默认不变
![](https://img.haomeiwen.com/i24850758/7463b113ac096413.png)
下拉界面,在 邮件程序 中选择 其他SMTP 选项,或是你所需的邮件选项
![](https://img.haomeiwen.com/i24850758/6ffdace3e1b53bf9.png)
选择完毕,界面继续下拉,可配置邮件的SMTP信息
图中所示为QQ邮箱的填写内容:
SMTP主机: 也称SMTP服务器地址,QQ邮箱设置为 smtp.qq.com ,其他邮箱的服务器地址可自行百度
加密: 使用QQ邮箱该选项必须为 SSL ,其他邮箱一般选择 无 ,若最终无法成功发送邮件,可以尝试修改该选项及相应配置
SMTP端口: 与加密选项的选择相关,SSL加密对应端口为465,无加密对应25号端口
自动TLS: 启用
认证: 启用
SMTP用户名: 就是QQ邮箱
SMTP密码: 为QQ邮箱提供的授权码
![](https://img.haomeiwen.com/i24850758/3b469244ca7d220d.png)
配置完成后,点击下方的保存按钮,保存配置,而后可通过该插件自带的邮件测试功能,测试邮件的发送
在插件栏目中选中 电子邮件测试 ,输入 收件人 邮箱,发送电子邮件
![](https://img.haomeiwen.com/i24850758/04835e1d4a36c1e8.png)
若配置成功,收件人将会收到如下内容的一封测试邮件
![](https://img.haomeiwen.com/i24850758/1d876eae29b8c3a6.png)
之后使用WPForms创建表单,涉及到电子邮件发送的功能,将会自动通过该插件实现
Elementor
安装
- 插件市场一键安装
- 拓展插件Essential Addons
image.png
-
Elementor设置
image.png
重要概念
使用elementor构建的页面包含如下三个要素:Section、Column、Element
![](https://img.haomeiwen.com/i24850758/034d1653368d8884.png)
● section是Elementor最基本的结构,一个页面通常包含多个段,段通常用来设置背景颜色或背景图片,以及控制整个段的高度和内部栏的宽度
● Element元素只能放在Column中
例如需要制作一个banner大图如下,首先就需要添加一个段,段中包含两个栏,左边的栏中有三个元素
![](https://img.haomeiwen.com/i24850758/e10e8ba994e6ee7c.png)
使用技巧
插件安装
● elementor + Essential Addons(绘制页面)
● Disable & Remove Google Fonts(解决没梯子无法加载谷歌字体)
● Starter Templates(Astra主题模板)
● 智能滑块3(用于生成轮播图)
● WPForms Lite(用于生成联系表单)
网友评论