泛宝汇
一个分享图文教程的博客

以NANA主题为例优化404页面

泛宝汇博客使用懿古今的NANA主题有一段时间了,最近留意到它的404页面只是简单的“亲,该网页可能搬家了!”,略显单调。于是根据自己的思路折腾一翻,在404页面中增加一个flash小游戏,这次折腾相对顺利,在此也感谢友站分钱榜提供的初始引用代码,下面说说具体折腾方法:

31v58piczdw_1024_%e7%9c%8b%e5%9b%be%e7%8e%8b

首先找度娘要一个flash小游戏(泛宝汇博客选择的是“黄金矿工.swf”),然后将flash小游戏上传到主题的images文件夹。特别提醒:flash小游戏的格式必须为swf后缀。

然后从主题NANA文件夹中找到并打开404.php,在<p style=”text-align:center;”>亲,该网页可能搬家了!</p>代码下加入如下代码:

<br />

<div class=”linkstandard” style=”text-align: center;”>

<p style=”text-align:center;”>玩个小游戏放松一下</p>

<embed src=”<?php bloginfo(‘home’); ?>/wp-content/themes/Nana/images/hjkg.swf” type=”application/x-shockwave-flash” width=”540″ height=”360″></embed><!–小游戏引用代码–>

</div>

<br />

特别提醒:如果flash小游戏是放在其它文件夹,要记得修改“小游戏引用代码”中的路径。

保存后,将404文件上传覆盖,打开一个不存在的页面就可以看到效果了(效果演示:https://www.fanbaohui.com/thisis404/)。

到这里本可以结束,但手机打开后发现页面错位,而且在手机上玩这个游戏也不好操作,于是通过修改CSS代码,让小游戏在手机端不显示,方法如下:

从主题NANA文件夹中找到并打开style.css,找到代码:

.cat-dt .line-one-thumbnail,.dengji,.entry-meta .edit-link,.item-st .thimg,.p-content,.plxiaoshi,.slider-caption{display:none}

替换为(其实就是在上述代码中加入了.linkstandard):

.cat-dt .line-one-thumbnail,.dengji,.entry-meta .edit-link,.item-st .thimg,.p-content,.plxiaoshi,.linkstandard,.slider-caption{display:none}

至此,NANA主题的404页面优化即已完成。其它主题也可以通过此思路进行折腾,想在手机端也显示小游戏并让它不错位的话,那可以折腾CSS,让小游戏尺寸自适应即可。

赞(0) 打赏
转载请注明出处:泛宝汇博客 » 以NANA主题为例优化404页面

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫

微信扫一扫