wordpress数据库冗余内容清理

随着WordPress系统使用时间的增长,数据库中的冗余数据就会非常多,比如很多插件的数据,插件的日志,文章自动保存,文章历史版本记录等等,会让你的数据库非常臃肿,导致速度下降,定期优化和清理Wordpress的数据库,保证Wordpress快速工作是非常有必要的。

WP Clean Up 插件是一款非常实用的 WordPress 数据库清理优化插件,该插件有两个主要功能:清理数据和优化数据库。

1.清理数据:在这里可以很方便地删除“修订版本”“草稿”“自动草稿”“待审评论”“垃圾评论”“回收站评论”“孤立的文章元信息”“孤立的评论元信息”“孤立的关系信息”“控制板订阅缓存”这些无用的数据,可以逐项删除也可以点击“删除所有”按钮一键删除所有无用数据。

2.优化数据库:这个功能与 phpMyAdmin中的“优化表”效果是一样的,帮助用户在网站后台可视化优化数据库中的所有表。

PS:如果您的网站运行时间较久,并始终在使用 Akismet 插件的话,WordPress 数据库中的 wp_commentmeta 表会变的很大,那么你可以从数据库管理,进入 phpMyAdmin 后,将wp_commentmeta清空即可(为以防万一,请将数据库备份)

图标字体iconfont

今天说的是阿里UX矢量图标库,Iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站,也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新中,Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能

iconfont.cn为解决设计师制作字体图标困难的问题,为用户提供了在线矢量格式转换的功能。设计师只要将设计好的图标上传至平台,平台将会将图标存储在平台上,并转换成多种格式文件。

iconfont对于前端应用来说有很多便捷:
1、自由变化大小
2、自由修改颜色
3、可以添加一些视觉效果如:阴影、旋转、透明度。
4、兼容IE6

本文只说如何在网页中应用图标字体iconfont,具体食用方法如下:
在http://www.iconfont.cn/选择适合的图标然后添加到那个“购物车”选择下载到本地

第一步:使用font-face声明字体

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
}

第二步:定义使用iconfont的样式

.iconfont{font-family:"iconfont";font-size:16px;font-style:normal;}

第三步:挑选相应图标并获取字体编码,应用于页面

<i class="iconfont">&#33</i>

PS:将需要文件上传到空间,字体文件引用路径要注意;如需演示,请看文章页title下图标字体

为WordPress主题添加“自动更新”功能

为什么会想到这个话题呢,本人有严重的强迫症,每次看到应用商店上那些数字提示都会更新,对于wordpress而言,也总是想消灭那些更新的提示,插件倒还好,主题一般都涉及到大量的修改,更新后有要重新修改。

大发这个主题的更新速度很快,都快赶不上了,只好把主题更新提示的功能删掉了,免的看见烦心啊。但是对于主题作者添加“自动更新”功能还是不错的。

为WordPress主题添加“自动更新”功能,具体实现方法:

第一步,下载所需文件
点此下载

第二步、为主题添加远程检测版本功能
将下载的文件解压后,将里面的theme-updates文件夹放到主题根目录中,打开主题functions.php文件添加:

//Initialize the update checker.
    require 'theme-updates/theme-update-checker.php';
    $example_update_checker = new ThemeUpdateChecker(
        'example-theme',   //Theme folder name, AKA "slug".
        'http://w-shadow.com/files/example-theme-updates/info.json' //URL of the metadata file.
    );  

example-theme 主题的名称,不一定非得与主题名称一致,可任意。
http://w-shadow.com/files/example-theme-updates/info.json 下载的 info.json 文件的存放位置。
可以在空间新建一个文件夹,并修改相应的链接地址。

第三步、修改远程更新数据
编辑 info.json 文件

{
    "version" : "2.0",
    "details_url" : "http://w-shadow.com/files/example-theme-updates/details.html",
    "download_url" : "http://w-shadow.com/files/example-theme-updates/example-theme.zip"
}

其中:
第2行 主题的版本号
第3行 升级说明文件链接
第4行 主题下载链接
修改相应链接,指向自己存放的文件位置。

当所使用主题的版本号低于info.json文件中版本号时,后台会提示更新,并可以实现与官网主题相同的一键升级功能。提示功能仅限于正在使用中的主题,未启用的无效。
关于为WordPress主题添加“自动更新”功能来源于http://zmingcx.com/wordpress-theme-automatic-update-feature.html

带缩略图的相关文章代码

带缩略图的相关文章代码网上应该很多啊,本主题其实是自带相关文章的,只不过是没有缩略图显示啊;至于文章显示缩略图的代码,可以参考本站,这里就不在说明了啊.
实现的效果请看下面的图片

一、主要代码如下,可以新建一个relatedpost.php

<div class="Related_Posts">
	<ul>
		<?php
$post_num = 5;
$exclude_id = $post->ID;
$posttags = get_the_tags(); $i = 0;
if ( $posttags ) {
	$tags = ''; foreach ( $posttags as $tag ) $tags .= $tag->term_id . ',';
	$args = array(
		'post_status' => 'publish',
		'tag__in' => explode(',', $tags),
		'post__not_in' => explode(',', $exclude_id),
		'ignore_sticky_posts' => 1,
		'orderby' => 'comment_date',
		'posts_per_page' => $post_num
	);
	query_posts($args);
	while( have_posts() ) { the_post(); ?>
		<li>
			<a href="<?php the_permalink(); ?> " rel="nofollow"><?php post_thumbnail( 90,90 ); ?></a>
			<div class="Related_Posts_tittle"><a class="Related_Posts_tittle" href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></div>
		</li>
	<?php
		$exclude_id .= ',' . $post->ID; $i ++;
	} wp_reset_query();
}
if ( $i < $post_num ) {
	$cats = ''; foreach ( get_the_category() as $cat ) $cats .= $cat->cat_ID . ',';
	$args = array(
		'category__in' => explode(',', $cats),
		'post__not_in' => explode(',', $exclude_id),
		'ignore_sticky_posts' => 1,
		'orderby' => 'comment_date',
		'posts_per_page' => $post_num - $i
	);
	query_posts($args);
	while( have_posts() ) { the_post(); ?>
		<li>
			<a href="<?php the_permalink(); ?> " rel="nofollow"><?php post_thumbnail( 90,90 ); ?></a>
			<div class="Related_Posts_tittle"><a class="Related_Posts_tittle" href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></div>
		</li>
 
	<?php $i++;
	} wp_reset_query();
}
if ( $i  == 0 )  echo '<li>没有相关文章!</li>';
?>
	</ul>
</div>

附:relatedpost.php下载地址:点此进入
注明:有可能你使用其他方式获取缩略图,请替换

<?php post_thumbnail( 90,90 ); ?>

为你使用的函数…

二、在文章页面的地方引入relatedpost.php即可

<div class="relatedposts">
<div class="xg_title"><h3>相关文章</h3></div>
<?php include('relatedpost.php'); ?>
</div>

三、加入适当的css,以下仅演示,请自行修改

.Related_Posts {
	margin-top: 9px;
	margin-left: 5px;
	width: 610px
}
.Related_Posts_tittle {
	margin-top: -3px;
	line-height: 17px;
	color: #515151 !important;
	font-size: 12px !important;
	width: 96px;
	height: 32px;
	overflow: hidden
}
.Related_Posts li {
	float: left;
	margin: 0 32px 0 0
}
.Related_Posts ul li img {
	width: 90px;
	height: 90px;
	background: #F4F4F4;
	border: 1px solid #D8D8D8;
	padding: 2px
}
.xg_title{background:none repeat scroll 0 0 #EEEEEE;color:#333333;height:34px;line-height:30px;padding:0 0 0 15px;font-size:14px}
.xg_title h3{color:#333333;font-size:14px;font-weight:700;line-height:34px;margin:0;padding:0}

jQuery带微博按钮返回顶部

好吧,写这篇文章主要是为了刷一下存在感的,有是小半月没更新了,发生了很多事,让人无力吐槽;俗话说,好像不是俗话,人艰不拆……
为博客添加带微博按钮返回顶部效果,具体效果如下
gotop
html代码部分

<div id="share">
<a id="totop" title="">返回顶部</a>
<a href="http://weibo.com/shenghao2011" target="_blank" class="sina">新浪微博</a>
<a href="http://t.qq.com/shenghao_liu"  target="_blank" class="tencent">腾讯微博</a>
</div>

Js代码部分

//scrolltotop
$(function(){
        //首先将#back-to-top隐藏
        $("#totop").hide();
        //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>100){
                    $("#totop").fadeIn();
                }
                else
                {
                    $("#totop").fadeOut();
                }
            });
            //当点击跳转链接后,回到页面顶部位置
            $("#totop").click(function(){
                $('body,html').animate({scrollTop:0},500);
                return false;
            });
        });
    }); 

css代码部分

/*share_start*/
#share {position:fixed;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight)-34+"px");bottom:34px;left:95%;width:30px;zoom:1;}
#share a{background-image:url(images/share.png); background-repeat:no-repeat; display:block; width:30px; height:30px; margin-bottom:2px; overflow:hidden; text-indent:-999px;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
#share a{}
#share .sina {background-position:0 0; position:absolute; bottom:32px;}
#share a.sina:hover { background-position:-30px 0;}
#share .tencent { background-position:0 -30px; position:absolute; bottom:0;}
#share a.tencent:hover { background-position:-30px -30px;}
#share a#totop{background-position:0 -120px;position:absolute;bottom:64px;cursor:pointer;}
#share a#totop:hover {background-position:-30px -120px;}
/*share_end*/

其他具体CSS细节请自行调节,当然页面引入jquery.js时必须的,搞定收工。
最后放一个演示地址:Demo