operation.md · NFUNM075/网站运营与管理

### 策划文档与网站地图
#### 网站规划：  
- 内容以可用性测试和用户体验为主题，wordpress架站为副主题。
- 每日对网站流量数据和性能进行监测和统计。
- 网站的功能：提供让用户了解可用性测试和用户体验的相关内容的平台，并且激发用户学习wordpress架站的兴趣。
- 前期对自己的网站进行适当的宣传
-  **网站建设目标：**

&#160; &#160;1. 完成课程期末项目

&#160; &#160;2. 让更多人了解到中大南方网络与新媒体专业课程设置的趣味性和前景。

&#160; &#160;3. 网站或者网页或者文章能够在搜索引擎有较高的排名。

&#160; &#160;4. 网站设计能够具有较好的可操作性，并且能够满足大多数人的美感需求。

根据用户研究的目标调整：  
添加第5点：能够及时地帮助用户解决在网站上遇到的问题。

#### 目标用户画像：  
主要针对网络与新媒体的学者以及对wordpress架站感兴趣的学生群体。

#### DVF模型定义需求  
**D用户需求**
- 文章固定时间要更新
- 能够及时帮助用户解决网站内遇到的问题
- 网站页面尽量简洁、易执行。而非花哨、复杂，难以操作
- 文章排版、字体和字体大小要适宜、美观

**V可持续性**
- 通过持续地为网站更新优质内容和对网站进行合理优化，吸引更多用户，通过用户吸引用户，给网站带来长期稳定的流量。

**F可行性**  
- 为网站添加更多交互性功能，满足用户的交互需求
- 扩展网站其他内容储备

#### 网站地图：

![网站地图](https://images.gitee.com/uploads/images/2019/0628/011850_a43dba6b_1648197.png "网站地图.png")

<hr>

### 图片的使用

#### 1. 非原创的每张图片都有版权交待，并且附有超链接。
![图片版权交代](https://images.gitee.com/uploads/images/2019/0625/170241_3685d533_1648197.png "图片版权交代.png")

#### 因为文章的封面图无法添加来源链接和文本说明，所以在每篇文章的下方注明封面图的来源。

![封面图来源](https://images.gitee.com/uploads/images/2019/0628/012136_39c13d19_1648197.png "封面图来源.png")

#### 2. 图库风格及配色:   
- 图库风格主要以网站可用性、移动用户体验要素和wordpress架站流程为主题。比较具有学术风和严谨风。
- 网站可用性以及移动用户体验要素目录下的文章均来自课程提供的资料，因此图片也均来自资料，配色比较五彩缤纷。
- wordpress的相关文章图片配色主要以白蓝灰为主，因为在进行架站的过程中，大多数网站的页面颜色都以白色为主，大多数重要字眼以蓝字呈现，并且表格或者一些icon是灰色调。
- 每篇文章的特色图片，均来源于[Unsplash](http://https://unsplash.com/)。图片的选择上会选择与文章主题相关的，例如wordpress的相关
文章会选择wordpress的logo、移动用户体验要素的会选择以手机为主题的原型图或者设计图、网站可用性的会选择人们在测试/浏览网站或者写任务设计的图片。图片的尺寸大约都为“575x340px”，以便在“文章轮播”中能呈现一个好的视觉效果。
 
![文章轮播效果](https://images.gitee.com/uploads/images/2019/0625/180142_2c695da4_1648197.png "轮播效果.png")
<hr>

### 3篇云端架站踩坑图文文章  
- [WordPress的架站流程一](http://yiyingtan.me/52/wordpress%e7%9a%84%e6%9e%b6%e7%ab%99%e6%b5%81%e7%a8%8b%e4%b8%80/)
- [WordPress的架站流程二](http://yiyingtan.me/55/wordpress%e7%9a%84%e6%9e%b6%e7%ab%99%e6%b5%81%e7%a8%8b%e4%ba%8c/)
- [WordPress的架站流程三](http://yiyingtan.me/59/wordpress%e7%9a%84%e6%9e%b6%e7%ab%99%e6%b5%81%e7%a8%8b%e4%b8%89/)  
<hr>

### 平面设计  
#### 1.基本内容
- 背景：首页的背景是一张森林河流图，透明度较低，以暗黑色为主调。其余页面最底层背景与首页一样，在最底层背景之上还有一层白色背景。
- 网站配色、对比度与可读性：网站配色主要以黑白蓝灰为主，无论是暗黑底还是白底，其余颜色在这两种任一颜色基调上都能表现明显，具有很强的对比度和可读性。

![网站配色](https://images.gitee.com/uploads/images/2019/0628/005017_33073b39_1648197.png "两种不同颜色基调.png")

- 字体使用及对比度与可读性：  
1.主体的字体风格为'Fira Sans'和‘sans-serif’  
2.网站的标题字体大小为45px，为白色加粗，因为背景是暗黑色调，所以采用白色加粗的字体突显出网站的大标题。副标题的字体大小为16px，为灰白色。因为副标题的长度会稍微比较长，所以字体设置就会相对较小，由白色到灰白色会给人一种层次感，让人明确知道这是副标题，虽然灰白色没有白色在背景上呈现得那么亮眼，但是可见度还是很高的。  
3.文章一级标题字体大小为28px，为黑色加粗；二级标题字体大小为25px，为黑色；文章内容字体大小为18px，为趋近于黑色的颜色，这样可以与标题间具有颜色的明显区分。链接字体为蓝色。文章背景都是白色，因为除了白色和荧光色，任何颜色字体在白色背景下都会表现明显。同时黑白是两种颜色对比度最高的，而且网站的整体色调是黑白蓝灰为主，所以文字颜色就采用了黑色、黑灰色和蓝色。并且黑灰色的字体在白色的基调上，比黑色字体看起来会更柔美、舒服一些。
- 页面标题字体大小为28px，文章轮播部分的字体大小为16px，页面内容字体大小为18px。字体颜色均为黑色。因为黑白对比度最高，并且网站主要以黑白蓝灰、简约风为主，。

#### 2. 平面设计插件运用

Animate it部分：  
- 使用了Animate it中“pop”的功能，当鼠标悬停时，字体呈现放大收缩的功能。  
使用了“pop”功能的页面：[wordpress架站流程](http://http://yiyingtan.me/%e6%9e%b6%e7%ab%99%e6%b5%81%e7%a8%8b/)；[移动用户体验要素](http://http://yiyingtan.me/%e7%a7%bb%e5%8a%a8%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c%e8%a6%81%e7%b4%a0/)；[网站可用性](http://yiyingtan.me/%e7%bd%91%e7%ab%99%e5%8f%af%e7%94%a8%e6%80%a7/)  
- 使用了Animate it中的“wobbleHorizontal”的功能，实现快速地左右摆动。  
使用了“wobbleHorizontal”的位置：[slider浮块](http://yiyingtan.me/)

![wobbleHorizontal](https://images.gitee.com/uploads/images/2019/0625/221142_4378d62a_1648197.png "动画部分.png")

SiteOrigin部分：  
- [siteorigin1](http://yiyingtan.me/架站流程)

![siteorigin1](https://images.gitee.com/uploads/images/2019/0625/221848_35aab89a_1648197.png "siteorigin1.png")

- [siteorigin2](http://yiyingtan.me/移动用户体验要素)

![siteorigin3](https://images.gitee.com/uploads/images/2019/0625/222049_f234fa48_1648197.png "siteorigin2.png")

- [siteorigin3](http://yiyingtan.me/网站可用性)

![siteorigin3](https://images.gitee.com/uploads/images/2019/0625/222230_2a5016ba_1648197.png "siteorigin3.png")

<hr>

### 云端网站管理  
#### 1. 云端架站：

> 正常可用的云端网站：http://yiyingtan.me

#### 2. 网站安全：
> 使用Wordfence对网站进行监控，发现网站近一个月来，都在遭受大量外部的攻击。但通过对网站的扫描scan后，显示网站没有被恶意侵入或更改成功。至此，网站仍处于一个良好的安全状态。

![网站被攻击的数据](https://images.gitee.com/uploads/images/2019/0626/010550_88aef6b0_1648197.png "网站被攻击数据.png")

![扫描网站](https://images.gitee.com/uploads/images/2019/0626/010615_3a74ad77_1648197.png "scan.png")

#### 3. 网站性能：  
> 使用site24x7，添加8个监控点，分别是“网站的可用性和性能”、“网页速度”、“DNS服务器”、“端口”、“网站损毁”、“Ping监控”、“Reat API”、“实时黑名单检查”。整体上看网站一切运行良好，处于一个良好的性能状态。但网页速度花费的时间较长，需要接近3秒的时间才能完全呈现出来。

![8个监控点](https://images.gitee.com/uploads/images/2019/0626/165407_f857f6f1_1648197.png "8个监控点.png")

> 由于网站的服务器架设在美国，因此在site24x7中选择中国的监控点位置时，常常会出现连接超时的情况，导致监控器停机。而选择香港及外国地区时未出现这类状况。

![中国地区监控点](https://images.gitee.com/uploads/images/2019/0626/170002_0bf22cd9_1648197.png "site24x7 中国.png")

![site24x7其他地区](https://images.gitee.com/uploads/images/2019/0626/170200_8749d428_1648197.png "site24x7 外区.png")

#### 4. 网站备份：

> 登录WinSap，使用WinScp连接网站。

![winscp登录](https://images.gitee.com/uploads/images/2019/0624/162521_9afcb23f_1648197.png "wincp登录.png")

> 找到wp-config.php文件进行备份

![wp-config](https://images.gitee.com/uploads/images/2019/0624/162705_62a85f83_1648197.png "wp-config截图.png")

> 使用WordPress Backup Plugin插件备份“数据库文件”

![backup插件备份数据库文件](https://images.gitee.com/uploads/images/2019/0624/162839_13b59a38_1648197.png "backup插件.png")  
> 通过wordpress后台导出工具将选择的内容导到本地

![wp后台导出文件](https://images.gitee.com/uploads/images/2019/0624/163007_7d38e625_1648197.png "wp后台导出备份文件.png")

> wp-config.php文件、数据库文件和wp后台导出的文件均备份到本地

![三个备份文件](https://images.gitee.com/uploads/images/2019/0624/163744_9ef97462_1648197.png "三个备份文件.png")
<hr>

### 站长工具  
#### 百度站长工具
> 向百度站长提交了网站，百度成功收录了我的网站和其他文章页面。

![百度收录](https://images.gitee.com/uploads/images/2019/0630/220345_e67eb06b_1648197.png "在这里输入图片标题")

> 百度在6月27日对我的网站抓取频度最高。  
因为在当天我添加了三个site origin的页面，和1个animate,因为wordpress自带Google字体，而Google字体又被国内禁，Google字体会影响网页的加载，所以我添加了Disable Google Fonts的插件，提高了网页速度。[参考文章](http://www.sohu.com/a/291178769_120021541)

![百度抓取频次](https://images.gitee.com/uploads/images/2019/0630/221238_4cbea3cc_1648197.png "抓取频次.png")
<hr>

#### Bing站长工具
> 根据bing的“搜索关键字”数据，将wordpress的“meta description”进行修改，添加“wordpress架站流程”的文字。  
结果：在必应搜索wordpress架站流程，网站位于搜索结果页面第1面的第1位。

![外观seo](https://images.gitee.com/uploads/images/2019/0625/233157_78b293b3_1648197.png "外观seo.png")
<hr>

![bing排名](https://images.gitee.com/uploads/images/2019/0626/172132_e6b3c398_1648197.png "bing排名.png")
<hr>

### SEO优化：
#### Yoast SEO
> 根据Yoast SEO的建议，对文章的排版、meta description、slug等进行改进。  
结果：在百度搜索wordpress架站流程，网站的第三篇wordpress文章位于搜索结果页面第1面的第2位；  
搜索可用性测试的权衡之道，网站的“可用性权衡之道二” 文章在结果页面第5页。  
但流量上暂时没有什么变化。  
原因：使用比较少人使用的关键词。

![文章seo优化](https://images.gitee.com/uploads/images/2019/0625/233131_340c0deb_1648197.png "文章seo.png")  
<hr>

![架站排名](https://images.gitee.com/uploads/images/2019/0630/004211_555e8b6c_1648197.png "架站.png")
<hr>

![可用性测试排名](https://images.gitee.com/uploads/images/2019/0630/005058_73ccb140_1648197.png "可用性.png")
<hr>

**几天后，流量并没有什么变化**
  
![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/012513_e5c2dc09_1648197.png "yoast流量.png")  
<hr>

#### 变更固定网址结构：
> 将原始固定网址后缀变更为“/%post_id%/%postname%/”的网址结构。从搜索引擎最佳化和效能来看，变更后的网址结构更有利于SEO，搜索引擎更容易理解。[参考文章](https://blog.wpjam.com/article/wordpress-6-permalink-comparison/)  
结果：暂时未发现有什么变化。

![原始固定网址](https://images.gitee.com/uploads/images/2019/0626/001442_9d1e969a_1648197.png "原始的固定链接.png")

![变更后的固定链接](https://images.gitee.com/uploads/images/2019/0626/003928_1ca0cc20_1648197.png "变更后的固定链接.png")  
<hr>

**流量没有什么变化**

![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/012810_ed3938fb_1648197.png "yoast流量.png")
<hr>

#### 外链
> 分别在6月24、25、26号在微信、微博、QQ和本仓库中添加了网站的链接  
结果：网站浏览量增多，相比以前上升有350的浏览量。24、25、26三天浏览量大约多达三四百，最高浏览量在25号，有433的浏览量。可能是由于自己平时在微博比较活跃并且微博面对的人群更广，所以当天的浏览量是最大。

![微信](https://images.gitee.com/uploads/images/2019/0630/011500_196636fa_1648197.jpeg "微信.jpg")

![微博](https://images.gitee.com/uploads/images/2019/0630/011521_da479fc3_1648197.png "微博.png")

![QQ](https://images.gitee.com/uploads/images/2019/0630/011538_84bc73ba_1648197.png "qq.png")

<hr>

**浏览量数据变化**

![浏览量数据变化](https://images.gitee.com/uploads/images/2019/0630/011616_c87b53d0_1648197.png "浏览量.png")  
<hr>

#### 留言系统设置及管理  
> 安装并启用Akismet插件，他们的垃圾留言数据库会挡住大部分垃圾留言。因为垃圾留言多了，网站质量评分会明显下降，排名会下滑。[参考文章](https://www.seozac.com/seo-tips/wordpress-seo-guide/)

![Akismet插件](https://images.gitee.com/uploads/images/2019/0630/014435_fe60af8d_1648197.png "处理垃圾信息插件.png")

### 用户研究

#### 用户体验地图  
![用户体验地图](https://images.gitee.com/uploads/images/2019/0630/164939_5f25fd49_1648197.jpeg "用户体验地图.jpg")

> 根据用户体验地图中用户可能面对的问题，无法通过个人判断、解决的。我添加了“WP实时聊天支持”插件，让用户拥有与网站管理员聊天的通道，帮助用户能够及时地从网站管理员这获得帮助。

![实时聊天插件](https://images.gitee.com/uploads/images/2019/0630/224615_3f5ec2c2_1648197.png "实时聊天插件.png")

![实时聊天工具](https://images.gitee.com/uploads/images/2019/0630/224641_9a4e9f5a_1648197.png "实时聊天.png")

#### 用户访谈

![用户访谈](https://images.gitee.com/uploads/images/2019/0630/234813_d40b1256_1648197.png "用户访谈.png")

> 网站的首页即是“人的脸”，网站首页的丑与美，决定了用户是否继续选择浏览你的网站。结合用户访谈和用户体验地图，我对首页信息栏的颜色进行了更改。将色调统一为浅色调。并且将紫色更改为蓝色；蓝色与红色的位置进行调换，使移动端用户第一眼能够看起来舒服点。

**更改前的信息栏的颜色**  
![更改前的信息栏的颜色](https://images.gitee.com/uploads/images/2019/0630/182327_376a8ce9_1648197.jpeg "原始颜色.jpg")

**更改后的信息栏的颜色**

![更改后的信息栏的颜色](https://images.gitee.com/uploads/images/2019/0630/182536_5e983cbd_1648197.jpeg "更改后颜色.jpg")
<hr>

**未更改前移动端一开始呈现效果**  
![未更改前移动端一开始呈现效果](https://images.gitee.com/uploads/images/2019/0630/223032_05bfb29d_1648197.jpeg "移动端更改前.jpg")

**更改后移动端一开始呈现效果**  
![更改后移动端一开始呈现效果](https://images.gitee.com/uploads/images/2019/0630/223113_fc9b666f_1648197.jpeg "移动端更改后.jpg")
<hr>

> 字体的大小会对用户心理产生影响，合理的字体和适当的字体大小会让用户愿意多浏览你的网站，而不合理的字体或者字体大小，则会让用户瞬间选择离开你的网站。结合用户访谈和用户体验地图，将文章的内容字体调大为18px（原本为16px），并将字体颜色调深，由灰色调成接近于黑色（#6e757c ——> #474747），这样不仅有利于用户阅读，还能与标题间具有颜色的明显区分。

**原始字体效果**

![原始字体效果](https://images.gitee.com/uploads/images/2019/0630/183926_b0ac2711_1648197.png "原始字体.png")

**更改后的字体效果**

![更改后的字体效果](https://images.gitee.com/uploads/images/2019/0630/184929_4f06cce3_1648197.png "在这里输入图片标题")

> 在未进行用户研究前，并未考虑到网站漏了“分享”按钮，没有分享按钮存在，用户很难通过一种友好的方式分享网站中号的文章。结合用户访谈和用户体验地图，为此我发现了需要添加分享按钮。于是添加了“Social Warfare”插件。

![分享按钮](https://images.gitee.com/uploads/images/2019/0630/235435_bb7d6d57_1648197.png "分享.png")
<hr>

### 定制化  
- 添加了“WP实时聊天支持”，帮助用户能够快速地从网站管理员这获得帮助。满足了网站“能够尽快帮助用户解决问题”的目标，同时也满足了用户对“帮助”的需求。  
- 添加了分享按钮，满足了用户对分享的需求，也满足了网站具有良好操作性的目标
- 添加防复制的“CopyRightPro”插件。防止有不良用户复制网站的原创文章，来充当为自己的原创文章。  
![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/232831_230b2427_1648197.png "防复制.png")

NFUNM075/网站运营与管理

简介

发行版

贡献者

近期动态

NFUNM075/网站运营与管理 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

NFUNM075/网站运营与管理