泛宝汇博客

以NANA主题为例优化404页面

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

首先找度娘要一个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,让小游戏尺寸自适应即可。

退出移动版