为博客添加载入中效果

感觉好久没有写关于wp的文章了,今天无事,给主题增加了一个载入中效果…

大部分载入效果都是Jquery的,但是添加到WordPress博客中后会不正常(亲测…)

经查找,WP程序中自带Jquery库,

如果想添加,解决方法有两个

1.禁用自带的Jquery库(不推荐,这里也不介绍这个)

2.调用WP自带的Jquery库实现

首先需要编辑主题的header.php文件,这个文件是WP的顶部页面

在文件最上方的第二行后面添加:

[cce_html]
<!--=======添加的Loading界面==========-->
<style type="text/css">
#loader_container {
text-align:center;
position:absolute;
top:40%;
width:100%;
left: 0;
z-index:9;
position:fixed !important; /* 这一条是后来增加进来的,用于跟随滚动条 */
}
#loader {
font-family:Tahoma, Helvetica, sans;
font-size:11.5px;
color:#000000;
background-color:#FFFFFF;
padding:10px 0 16px 0;
margin:0 auto;
display:block;
width:230px;
border:1px solid #5a667b;
text-align:left;
z-index:9;
}
</style>
<div id="loader_container">
<div id="loader">
<div align="center" id="center">
客官莫急,我正在很努力的为你加载^_^<br>
<div id="loading_gif">
<img src="https://www.myluoluo.com/wp-content/themes/loading.gif" alt="" border="0" />
</div>
</div>
<div id="loader_bg"><div id="progress"> </div></div>
</div>
</div>
<!--=======Loading界面结束==========-->
[/cce_html]
第二步,同样是这个文件,搜索<?php wp_head(); ?>这个语句上面一行是
<?php wp_enqueue_script('jquery'); ?>
不要搞错了,在<?php wp_head(); ?>后面添加,这段是当点击空白处时,隐藏提示的载入框

[warning]不同主题可能会有变化，如果找不到可以选择添加到最后[/warning]

[cce_html]
<!--=======Loading界面点击隐藏==========-->
<script type="text/javascript">
jQuery(document).click(function (event) { jQuery("#loader_container").hide(500); });
</script>
<!--=======Loading界面点击隐藏结束==========-->
[/cce_html]
第三步,编辑主题的底部文件footer.php在倒数第二行,</body>标签上面一行添加,
这段代码将会在页面打开到最后的时候隐藏载入框

[cce_html]
<script type="text/javascript">
jQuery("#loading_gif").hide();
jQuery("#center").text("载入完成√");
jQuery("#loader_container").hide(1000);
</script>
[/cce_html]
代码来自异次元,因为不兼容WP程序,所以修改就是我本人啦^_^

上图为第一步某div中的图片地址,可以根据自己需要更改,也可以将这个图片另存为后存到自己博客中,
当然如果你不改直接引用我也不会介意的,但是说不准哪天VPS抽风....图片访问不了,别找我

不同主题可能位置不同!如果感觉难以添加,可以留言问我^_^

文终 © 笨笨

[buy]修改前最好备份，有条件的最好在本地测试一下!添加完成后,请自己测试下是否与你安装的插件存在冲突![/buy]