# web_operation-qimo **Repository Path**: shuken7418/web_operation-qimo ## Basic Information - **Project Name**: web_operation-qimo - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-07-05 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # web_operation-qimo（网站运营期末项目）———[童年动漫推荐](https://lskalyy.top) ## 一、策划 ### 1.策划文档 #### 网站建设目标 本网站名为“童年动漫推荐”，顾名思义是为推荐我们这个年龄段童年时看过的动画，动漫，当然推荐这些动画不只是为满足我们偶尔想回顾童年，从现在的角度看来，以前的很多动画，动漫，从内容到拍摄手法都有很多是现在动画，动漫值得学习的；当然最主要的网站建设目标还是为了让已经长大的90后、00后在想回顾童年的时候能够如愿以偿，虽然是动画，但是和我们在听一首歌的时候总能想起曾经单曲循环听这首歌时所经历的事情是一样的，它也会让你想起人生中最快乐的时期,无忧无虑。 #### 目标用户画像 * 核心用户1：已经成年了但在看到一些特定事物时回想起来小时候看过的动画的人群； * 核心用户2：热爱经典动画，喜欢里面的艺术手法还有拍摄手法的人群； * 用户痛点：不论是偶尔想起还是本身就很喜欢想要看那些童年动画的人，苦于记忆的模糊无法准确找到那些动画； #### 网站规划 1. 搭建好网站，确定网站框架； 2. 丰富网站内容，无论从数量还是质量； 3. 通过发微博，发朋友圈等方式宣传完站，增加浏览量，提高网站排名、活跃度； 4. 增加友情链接，加强宣传力度，提高网站知名度； 5. 网站文章撰写完毕后通过各种方式进行SEO优化以提高用户体验； #### DVF模型定义需求 * Desirability用户需求：某些用户需要一个提供童年经典动画网站来辅助他们找到他们心心念念的那些很有意义，很有纪念感的动画； * Viability商业延续性：前期在规划好了后按照规划的方向进行加架设以及撰写内容，保证内容的高质量以吸引用户，在通过打广告，友情链接，其他平台发文宣传等方式提高浏览量，在有众多用户的基础上来进行商业活动，主要通过广告方式来实现商业价值，当然其他的商业合作也是可以实现商业价值的； * Feasibility可行性：1、SEO的优化是一个长期的步骤，并不是一蹴而就的，得长期进行下去才会有收获，；2、收益的多少也是不确定的，一切都要看你网站的运营程度； ### 2.网站地图 * 使用proceeon流程图制作网站地图，明确区分网站的“页面”与“文章”，表明页面、文章、分类目录的关系。 ![网站地图](https://images.gitee.com/uploads/images/2020/0709/011042_4f8132df_2228516.png "网站地图.png") * 根据用户反馈，将文章加入第二层级导航栏，于各自的分类目录下 ![用户反馈调整](https://images.gitee.com/uploads/images/2020/0709/011306_f39c6ff4_2228516.png "用户反馈.png") ### 3.平面设计插件运用 #### 使用Animate it! （展示两处） > [Animate it！插件使用](https://www.lskalyy.top/wordpress/) 在wordpress相关经验分享分类目录的wordpress架设经验这篇文章的最后一段使用Animate it！插件增加一个鼠标移动过去就会闪烁一段时间的动态，起一个强调作用。 ![Animate it！](https://images.gitee.com/uploads/images/2020/0707/010214_eef939f0_2228516.png "动态截图1.png") > [Animate it！插件使用](https://www.lskalyy.top/wordpress/) 在wordpress相关经验分享分类目录的wordpress架设经验这篇文章的第一段使用Animate it！插件增加一个鼠标移动过去就坏闪烁一段时间的动态，也是起一个强调作用 ![Animate it！](https://images.gitee.com/uploads/images/2020/0707/010808_2b115cac_2228516.png "动态截图2.png") #### SiteOrigin（正确使用3个页面/文章） > [SiteOrigin插件使用](https://www.lskalyy.top/haizeiwang/) 在外国分类目录下的航海王这篇文章的最后使用SiteOrigin插件加入了草帽一伙的图片，起到一个辅助读者阅读的作用。 ![site截图](https://images.gitee.com/uploads/images/2020/0707/011039_3927d7b9_2228516.png "site截图1.png") > [SiteOrigin插件使用](https://www.lskalyy.top/ssl/)在wordpress相关经验分享分类目录下的SSL证书添加踩坑这篇文章的最后使用SiteOrigin插件增加了一个画廊的工具，将文章中出现过的图片都加入其中，方便读者阅读到最后想通过图片了解具体方法实施。 ![site截图](https://images.gitee.com/uploads/images/2020/0707/011302_813ce32f_2228516.png "site4.png") > [SiteOrigin插件使用](https://www.lskalyy.top/yunfuwuqi/)在wordpress相关经验分享分类目录下的三种架设wordpress的云服务器对比的最后使用SiteOrigin插件增加一个近期文章的工具，为了让读者浏览完这篇文章之后方便通过下面的工具来跳跃到其他文章进行阅读。 ![site截图](https://images.gitee.com/uploads/images/2020/0707/011645_be8dc909_2228516.png "site截图3.png") ### 4.平面设计 #### 网站配色、对比度与可读性 * 网站的配送以黑色为主，蓝色为辅 * 网站背景色为黑色，字体颜色为白色，字体加粗颜色为蓝色，导航栏的合阴影也为蓝色，超链接也为蓝色； * 黑色的背景带给人一种深沉的感觉，一方面童年的记忆都是放在心里深处，深处二字总是与黑色挂钩；但是童年又是那么的纯粹，光明，所以采用了荧光蓝作为辅色； #### 图片的使用 * 非原创的每张图片都有版权交待，且有超链接（链接至原网站） ![图片链接](https://images.gitee.com/uploads/images/2020/0707/013642_52e9e8e5_2228516.png "图片链接.png") * 原创的图片描述为原创 ![图片原创](https://images.gitee.com/uploads/images/2020/0707/013729_8601b287_2228516.png "图片原创.png") * 在其他地方copy的文章与配图的图片风格主要以角色人物图为主，因为文章都为推荐动画类文章，所以图片自然与文章相契合，风格与内容相符； * 在原创文章上，图片都是采取截图的方式生成的，风格都以白色为主，简约，由于是经验分享类文章，图片的来源也是网站运营者，自然与文章内容相契合； ### 5.三篇原创云端架站图文文章 * [三种架设wordpress的云服务器对比](https://www.lskalyy.top/yunfuwuqi) ![三种架设wordpress的云服务器对比](https://images.gitee.com/uploads/images/2020/0707/014442_56c7643b_2228516.png "原创文章1.png") * [wordpress架设经验](https://www.lskalyy.top/wordpress) ![wordpress架设经验](https://images.gitee.com/uploads/images/2020/0707/014502_f6542e65_2228516.png "原创2.png") * [SSL证书添加踩坑](https://www.lskalyy.top/ssl/) ![SSL证书添加踩坑](https://images.gitee.com/uploads/images/2020/0707/014543_c970f5db_2228516.png "原创3.png") * 三篇原创云端架站图文文章的分类目录为：[wordpress相关经验分享](https://www.lskalyy.top/category/wordpressjingyan/) ## 二、管理 ### 1.云端架站 * 正常可用的云端网站，使用[域名](https://www.lskalyy.top) ### 2.网站安全 #### 使用了wordfence插件来检测自己网站的安全性； ![插件使用](https://images.gitee.com/uploads/images/2020/0714/005121_06c0e30a_2228516.png "截图0.png") * 由此可以看出我网站的安全性属于中等偏下的，防火墙防御威胁的能力只有48%，扫描的能力也只有60%，但好在目前为止并没有太大的影响到我网站安全的威胁； ![受攻击次数](https://images.gitee.com/uploads/images/2020/0714/005337_b50fe395_2228516.png "截图2.png") ![受攻击次数2](https://images.gitee.com/uploads/images/2020/0714/005350_4823f3d8_2228516.png "截图3.png") * 由此以上截图可以看出，我的网站受到的攻击次数是非常多的，24小时内就收到了5000000次左右的攻击，但好在wordfence对我网站的保护，这些攻击都被拦截了下来。 ![防火墙](https://images.gitee.com/uploads/images/2020/0714/005554_e8201842_2228516.png "截图4.png") * 图示可知我网站的防火墙对于复杂攻击的防御性偏弱，只要有人有意的攻击我的网站，我觉得我的网站的抵御能力还是不足的，后续还是需要对网站进行进一步的保护； * 开启了暴力保护的功能，在此模式下，Wordfence防火墙会主动阻止与已知攻击模式匹配的请求，并主动保护我的站点免受攻击者攻击，这也是对于网站安全的一种主动保护。 ### 3.网站性能 #### 使用site24x7监控，并且添加了8个以上地点； ![site24x7截图](https://images.gitee.com/uploads/images/2020/0714/021149_78ef00f9_2228516.png "截图2.png") * 添加了8个地点，分别为中国香港、新加坡、伦敦、上海、圣保罗、华盛顿、北京、重庆；从图可看出除了华盛顿，其他地区的可用性都为100%，这证明在大多数地方我的网站都是不难加载出来的； ![site24x7截图](https://images.gitee.com/uploads/images/2020/0714/021606_6895ec84_2228516.png "截图1.png") ![site24x7](https://images.gitee.com/uploads/images/2020/0714/021851_123ca467_2228516.png "截图3.png") * 网站的响应时间为的平均值为3.59，停机时间无，由此可以看出网站的响应时间还是较为慢的，但是还是比较稳定了，可以维持运营，在后续的运营中会尝试为其加速； ### 4.网站备份 #### 提供将wp-config.php备份本地的截图 ![备份截图1](https://images.gitee.com/uploads/images/2020/0713/232610_e982a2c6_2228516.png "winscp.png") #### 提供通过插件备份数据库（sql文件）截图 ![插件备份](https://images.gitee.com/uploads/images/2020/0713/234953_212a21d7_2228516.png "插件备份.png") #### 提供通过wordpress后台导出工具导到本地的文件截图 ![备份截图2](https://images.gitee.com/uploads/images/2020/0713/232630_ef140216_2228516.png "工具导出.png") * 备份截图如下： ![备份文件](https://images.gitee.com/uploads/images/2020/0713/235013_dd8217ba_2228516.png "备份文件.png") ## 三、运营 ### 1.站长工具 #### 站长工具A——百度站长工具 * 在6月28日完成百度站长工具认证，当天即可在百度搜索引擎上搜索到网站； * 并且在7月7号手动添加部分网站相关链接； * 后台的抓取频次、索引量、移动搜索的数量都不是特别高，猜测是由于网站内容质量不够高，并且SEO优化做的不足，接下来会坚持SEO的优化，争取提高网站的索引量以及抓取频次； ![百度](https://images.gitee.com/uploads/images/2020/0708/165622_80fa6e48_2228516.png "百度.png") ![百度手动提交](https://images.gitee.com/uploads/images/2020/0708/170319_b6001e37_2228516.png "百度手动.png") ![百度抓取1](https://images.gitee.com/uploads/images/2020/0708/170343_54e2617e_2228516.png "百度抓取.png") ![百度抓取2](https://images.gitee.com/uploads/images/2020/0708/170400_90f4bc5a_2228516.png "百度抓取2.png") #### 站长工具B——必应站长工具 * 在6月28日完成必应站长工具认证，并且于当天提交Sitemaps；但是截至7月8日仍然无法在必应上搜索到本网站（无论是国内版还是国际版）； * Bing 在自己的 Support 里有一篇教程是介绍为什么你的网站不被收录的：[《Why is My Site Not in the Index?》](https://www.bing.com/webmaster/help/why-is-my-site-not-in-the-index-2141dfab#) * 粗略估算本网站未被收录的原因是网站是新的，bing还没有发现和爬网它：有了新的网站，必应需要时间才能找到链接和爬网到网站。 * 也有可能是网站不符合必应要求的质量阈值：必应喜欢独特、高质量的内容。复制内容、快速重定向用户或提供很少深度的网站通常在我们的结果中表现不佳。长期表现不佳会导致我们将网站除名，为优质网站腾出空间。 * 针对以上问题，接下来我会为网站尽可能的增加高质量的内容，同时坚持SEO的优化，不仅要让bing收录，还要提高网站bing的索引量； ![bing1](https://images.gitee.com/uploads/images/2020/0708/172046_7945d478_2228516.png "bing.png") ![bing0](https://images.gitee.com/uploads/images/2020/0708/172012_99c3f602_2228516.png "bing0.png") ![bing01](https://images.gitee.com/uploads/images/2020/0708/172025_4dad69e3_2228516.png "bing01.png") ### 2.SEO优化 #### 方法一 #### 在百度站长工具添加链接； * 在百度站长工具那里手动的添加网站相关的链接，希望可以提高百度搜索的点击量还有呈现量，以此来提高网站的浏览量。 ![百度手动提交](https://images.gitee.com/uploads/images/2020/0712/172435_baf79a06_2228516.png "百度手动提交.png") * 成效：百度站长工具给出的点击量跟展现量都有了提高，较之前，虽然不是特别的显著，但是这已经是一个好的开头；同时网站的浏览量也慢慢有了提升； ![百度点击量](https://images.gitee.com/uploads/images/2020/0712/173131_29dcf552_2228516.png "百度抓取2.png") ![网站浏览量](https://images.gitee.com/uploads/images/2020/0712/152259_af0372a1_2228516.png "7.9.png") #### 方法二 #### 在百度站长工具提交sitemap； * 可以定期将网站链接放到Sitemap中，然后将Sitemap提交给百度。百度会周期性的抓取检查提交的Sitemap，对其中的链接进行处理，但收录速度慢于主动推送。 ![添加sitemap](https://images.gitee.com/uploads/images/2020/0712/172748_6e7378c0_2228516.png "百度手动提交1.png") * 成效：百度站长工具可以看到，提交了sitemap后点击量跟展示量是有了提高的，于此同时网站的浏览量也有了较明显的提升； ![百度点击量](https://images.gitee.com/uploads/images/2020/0712/151800_a6cdee3d_2228516.png "百度手动提交2.png") ![网站浏览量7.12](https://images.gitee.com/uploads/images/2020/0712/173728_f8065850_2228516.png "7.12（2）.png") #### 方法三 #### 利用Yoast SEO插件进行SEO优化； * 在每篇文章下面，针对YOST SEO插件所提示的SEO优化，来进行文章的优化，尽可能的将红点都变橙或者绿。 ![seo前](https://images.gitee.com/uploads/images/2020/0712/152345_ffc382bb_2228516.png "优化前.png") ![seo后](https://images.gitee.com/uploads/images/2020/0712/152401_67050d8e_2228516.png "优化后.png") ![seo前](https://images.gitee.com/uploads/images/2020/0712/152443_11f3b681_2228516.png "seo优化前.png") ![seo后](https://images.gitee.com/uploads/images/2020/0712/152514_7d397b2f_2228516.png "seo优化后.png") * 成效：网站的浏览量有明显提高，持续的对文章进行SEO优化，浏览量较之前的提升是非常明显的，我相信一直坚持着SEO优化，网站的浏览量是可以一直保持着高度的， ![7.11](https://images.gitee.com/uploads/images/2020/0712/153013_04b65df0_2228516.png "7.11.png") * （图为7月11浏览量） ![7.12](https://images.gitee.com/uploads/images/2020/0712/173822_1f9692e9_2228516.png "7.12（3）.png") * （图为7月12浏览量） #### 方法四 #### 添加友情链接 * 与[产品设计](https://www.ttgnb.top)网站站长合作，在他的网站中添加我的网站的友情链接，这样可以将我的网站的浏览者来源扩大达到增加浏览量的目的； ![友情链接](https://images.gitee.com/uploads/images/2020/0712/174737_dd44c979_2228516.png "友情链接.png") * 成效：对于双方是一个双赢的局面，jetpack网站数据统计可以看出我网站的浏览量提高了，证明添加友情链接是有利于增加网站的曝光率，提高网站浏览量的； ![流量监控](https://images.gitee.com/uploads/images/2020/0714/010608_7ffbdb4b_2228516.png "7.13.png") ### 3.用户研究 #### 3.1方法A： 用户访谈 * 本人在使用用户访谈方法时一共访谈了四位用户，分别对网站布局，网站内容，网站配色，侧边栏功能进行访谈，根据他们给出的回复，总结出网站的一些问题；分别为： 1. 网站的首页文章直接展示出来了，很不美观，会影响用户的体验； 2. 网站没有一个文章的直接跳转功能，也没有地方看到网站的更新内容； 3. 网站的配色有点单调，且重点不突出，没有办法看到哪些内容是重要的，关键的，用户浏览的时候就没有侧重性； * 针对以上问题，本人做出了三个修改，如下： ##### 修改一 * 将首页文章修改为只显示部分内容，这样便于用户粗略的浏览，以找到自己想要看到的文章； ![修改一（前）](https://images.gitee.com/uploads/images/2020/0713/003445_373c7d34_2228516.png "修改一.png") * 修改后 ![修改一（后）](https://images.gitee.com/uploads/images/2020/0713/003515_16b0d3f6_2228516.png "修改一（后）.png") ##### 修改二 * 在网站右边添加一个最近文章的侧边栏，这样用户可以直观的看到网站的更新内容，以及直接的跳转到想要看的文章； ![修改二（前）](https://images.gitee.com/uploads/images/2020/0713/003544_69fb3aec_2228516.png "修改二.png") * 修改后 ![修改二（后）](https://images.gitee.com/uploads/images/2020/0713/003609_7ceeafb5_2228516.png "修改二（后）.png") ##### 修改三 * 对网站进行一些内容上的编辑，比如对主要内容进行加粗，修改超链接的颜色，这样用户就可以清晰的看到哪些部分是重要的，哪些部分是超链接，提高用户浏览时的侧重性； ![修改三（前）](https://images.gitee.com/uploads/images/2020/0713/003744_1725fb9b_2228516.png "修改三.png") * 修改后 ![修改三（后）](https://images.gitee.com/uploads/images/2020/0713/003818_2ddc9066_2228516.png "修改三（后）.png") #### 3.2方法B： A/B testing： #### 首页布局方案测试 * **A方案总结：** 本人访问了4位用户，均认为A方案的页面较丰富，有banner图作为过渡，可以令眼睛有一点舒适感，但是A方案的小标题跟背景底色有点冲突，影响用户体验； ![a方案](https://images.gitee.com/uploads/images/2020/0713/133341_1811f00b_2228516.png "ab测试3.png") * **B方案总结：** 访问了4为用户，均认为B方案的页面过于单调，开头就是文章，且整个网页都是文字，不利于眼睛的浏览，会让用户产生疲劳感，从而不利于用户体验。 ![B方案](https://images.gitee.com/uploads/images/2020/0713/133608_a3bbae87_2228516.png "ab测试.png") **综合用户的意见反馈以及方案的可行性，我选择了A方案，banner不仅对于用户浏览网站起一个调和，过度作用，而且也是对网站主题的一个强调，同时一张好看的banner图也是能够加深用户对网站的印象，从而有利于用户的下次访问，在原先方案的基础下，我修改了小标题的颜色，使之能够在背景颜色下显示出来（效果如图所示）** ![A方案修改](https://images.gitee.com/uploads/images/2020/0713/134719_fc0e1199_2228516.png "ab测试后.png") ### 4.定制化 #### 4.1额外的CSS * 为了使网站更具美观、调和网站文字与文字之间衔接以及纠正用 **户对于网站过渡类设置不足，有点直来直往** 的批评，我在wordpress仪表盘的外观模块中的自定义里添加了额外的css，表示为：小标题的 **文字阴影，菜单栏的盒阴影** 以及字体加粗的效果。 ![额外css](https://images.gitee.com/uploads/images/2020/0714/001649_2f8f7f21_2228516.png "额外的css.png") * 效果如下图 ![阴影](https://images.gitee.com/uploads/images/2020/0714/001708_7a572942_2228516.png "阴影.png") #### 4.2 通过使用WP Content Copy Protection & No Right Click插件使得网站的文章不能被复制，满足防盗版需求 ![禁止右键设置](https://images.gitee.com/uploads/images/2020/0714/002826_594b7a5f_2228516.png "禁止右键.png") * 效果如下： ![禁止右键效果](https://images.gitee.com/uploads/images/2020/0714/002855_4a13bf00_2228516.png "禁止右键2.png") ## 四、加分项 * HTTPS：[童年动漫推荐](https://www.lskalyy.top) ![https](https://images.gitee.com/uploads/images/2020/0714/003117_252d4fda_2228516.png "https.png")