WordPress添加返回顶部小火箭

偶看介绍的Wordpress添加返回顶部小火箭是通过JQuery配合CSS来实现,可以适用于任何Wordpress模板,而不单单只适合萧涵主题。

一、下载返回顶部小火箭压缩包:rocket小火箭素材,里面有两个文件btop.js和rocket_up.png,均放置到主题文件夹下的 images 目录,例如:/wp-content/themes/xiaohan3/images/

二、打开萧涵主题文件夹下的/wp-content/themes/xiaohan3/footer.php,在文件结尾处添加

<div id="scrollTop" >
    <div class="level-2"></div>
    <div class="level-3"></div>
</div>
<script language="javascript" type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.6.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="/wp-content/themes/xiaohan3/images/btop.js"></script>

三、打开萧涵主题文件夹下的/wp-content/themes/xiaohan3/style.css,在文件结尾处添加

/*top*/
#scrollTop{cursor:pointer;display:block;height:180px;overflow:hidden;position:fixed;right:-42px;top:80%;width:149px;z-index:11;margin:-124px 0 0;padding:0}
#scrollTop,#scrollTop .level-2{background:url(images/rocket_up.png) no-repeat 0 0;}
#scrollTop div{left:0;overflow:hidden;position:absolute;top:0;width:149px;margin:0;padding:0}
#scrollTop:hover{background-position:-149px 0;}
#scrollTop .level-2{background-position:-149px 0;display:none;height:180px;opacity:0;z-index:1}
#scrollTop .level-3{background:none;cursor:pointer;display:block;height:180px;z-index:2}

这样就完成了Wordpress添加返回顶部小火箭,具体效果看下图,也可以查看偶看博客的右侧。

返回顶部小火箭

偶看网络营销博客再次网站改版

生命不止、折腾不停。偶看是越来越喜欢折腾,刚好最近网站被百度降权,排名全无,那么就随意折腾了,也不用看百度脸色。上次网站改版是在2012年10月19日–《偶看博客重大改版,静观效果》,本次改版的主要内容有:

一、网站标题修改,将原标题:“东莞网络营销_东莞SEO_SEO培训_偶看网络营销博客”修改为:“修改为:网络营销_wordpress网站建设_SEO培训_偶看网络营销博客”。博客有关wordpress的内容越来越多,所以在关键词上加了一个wordpress。

二.网站首页描述修改,原描述:“偶看,本名林伟强,专注于东莞网络营销和社会化媒体营销,擅长搜索引擎整合营销(SEM),网站优化(SEO)!为企业和公司提供网站诊断和网站优化培训服务.”修改为:“偶看,本名林伟强,专注于网络营销和社会化媒体营销,擅长wordpress网站建设.偶看网络营销博客提供网站诊断和网站优化SEO培训服务.”

三、删除全站标题的H1标签,将文章页面的H2标签修改为H1标题。

四、修改logo为直接调用图片,并添加ALT信息,以前使用的是隐藏文本的形式

五、侧边栏修改:将热门文章增加到15篇,删除热评文章

六、删除网站底部的“返回顶部”按钮,在网站侧边添加JS返回顶部的滚动火箭

七、删除所有关键词keywords标签、除首页和目录外,删除所有描述description标签

八、删除无觅相关文章插件,启用WordPress Related Posts相关文章插件。主要是因为无觅使用的是JS调用,不过修改了相关文章插件,缩略图需要重新调整,这是一个大工程。

九、栏目调整

偶看这回如此大的改动,对百度收录会有什么影响吗?需要继续观察。

萧涵博客修改默认分享为百度分享

萧涵博客模板在文章页中默认使用的是bShare的分享工具,由于百度分享的崛起,很多网友想将分享工具更换为百度分享,可是萧涵博客模板默认的分享工具是通过代码植入在single.php,如果要将其修改为百度分享,那么就必须删除bShare分享代码。

找到萧涵博客模板下的single.php,删除代码

<div style="margin-bottom:10px">
                      <a class="bshareDiv">分享按钮</a><script language="javascript" type="text/javascript" src="http://www.bshare.cn/buttonLite.js#style=2&amp;textcolor=#000000&amp;bgcolor=none&amp;bp=renren,sinaminiblog,qzone,qqmb,qqxiaoyou&amp;ssc=false&amp;text=分享到:"></script></div>

百度分享

百度分享按钮一共有四种类型:图标式、按钮式、文字式、浮窗式。一般说来,图标式、按钮式和文字式放置在文章内容的上方和下方都可以,而浮窗式则是将代码放在网页结尾处。

使用百度分享插件

偶看在wordpress后台搜索:百度分享插件,最近一次更新是2011年9月21日,版本是0.1.0.0,经过偶看测试,这个插件在wordpress3.4.2下可以正常使用的。

安装好百度分享插件后,在http://share.baidu.com/code,获取自己想要的百度分享按钮。

百度分享插件

在wordpress后台设置–百度分享按钮的文本框中放置想要实现的百度分享按钮效果,还可以自定义嵌入位置在文章上方或是文章下方;分享内容是文章标题还是文章内容。

使用代码添加百度分享

百度分享代码放置文章前后处,那么就找到萧涵博客模板下的single.php

<div class="con" id="a<?php the_ID(); ?>">
                    <?php the_content(); ?>

分享代码放置[cc lang=”php”][/php]前后即为文章内容的前后。

百度分享放置网页结尾处,打开萧涵博客模板footer.php 在

</body>
 </html>

前插入浮窗式百度分享按钮即可。

偶看建立了关于萧涵主题修改交流的QQ群:已经解散,大家有问题可以在“问答板块”提问。有更多关于萧涵主题需要修改的部分,请查看萧涵主题修改

萧涵主题模版将comments修改成评论

萧涵主题模版在标题右边默认显示评论是使用英文“comment”而不是使用,中文字“评论”。其实默认的也是可以的,如果要修改成“评论”的话,只需要进行如下修改:

需要修改的文件均在萧涵主题模版目录下,包括:archvie.php、author.php、category.php、index.php、search.php、single.php、tag.php找到代码

<span class="comments"><?php comments_popup_link('<em>0</em> Comments', '<em>1</em> Comment', '<em>%</em> Comments', 'Comments off'); ?></span>

修改成

<span class="comments"><?php comments_popup_link('<em>0</em> 评论', '<em>1</em> 评论', '<em>%</em> 评论', '评论关闭'); ?></span>

将“comments”修改成“评论”修改完成达到的效果对比

萧涵主题模版评论修改

偶看建立了关于萧涵主题修改交流的QQ群:已经解散,大家有问题可以在“问答板块”提问。,欢迎大家加入。

有更多关于萧涵主题需要修改的部分,请查看萧涵主题修改