博优谷 » 代码 http://www.canfree.com 博优谷是知名的IT评论博客，探讨网站优化，网上赚钱，免费资源，站长工具，站长新闻等资讯 Sun, 05 Feb 2012 15:46:40 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 wordpress非插件实现中英文字符串截断http://www.canfree.com/wordpress-plug-in-implementation-of-non-english-strings-truncated.htm http://www.canfree.com/wordpress-plug-in-implementation-of-non-english-strings-truncated.htm#comments Wed, 20 Apr 2011 05:44:22 +0000 博优谷 http://www.canfree.com/?p=1276 有利于SEO的排版样式应该是标题+摘要，摘要可以在写文章时自己添加，也可以通过插件实现，但是插件对中文支持度不够友好。本人推荐用wordpress自带的函数实现，轻量级且中英文支持良好。关于非插件文章截断，在以前的文章中也有介绍，今天重新整理并升级一下。
一，用mb_strimwidth() 函数
如果你的主机支持utf-8的话，这个函数是最佳的，调用代码为

<span><?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 150,"..."); ?></span>

说明一下：0，表示从文章开头开始截图;150,截取到第150个字符；...，摘要末尾的样式。你还可以给span指定样式。
二，用mb_substr() 函数
当你发现第一种方法无效时，可以用这一种

function z_substr($sourcestr='',$i=0,$cutlength=150,$endstr='...')
{
	$str_length=strlen($sourcestr);//字符串的字节数
	while (($n<$cutlength) and ($i<=$str_length))
	{
		$temp_str=substr($sourcestr,$i,1);
		$ascnum=Ord($temp_str);//ascii码
		if ($ascnum>=224)
		{
			$returnstr=$returnstr.substr($sourcestr,$i,3);
			$i=$i+3;
			$n++;
		}elseif ($ascnum>=192)
		{
			$returnstr=$returnstr.substr($sourcestr,$i,2);
			$i=$i+2;
			$n++;
		}else
		{
			$returnstr=$returnstr.substr($sourcestr,$i,1);
			$i=$i+1;
			$n=$n+0.5;
		}
	}
	if($i<$str_length)$returnstr.=$endstr;
	return $returnstr;
}

将上面的代码放到functions.php 里，然后用下面的代码调用

<?php echo z_substr($sourcestr, $i, $cutlength, $endstr); ?>

最后将调用代码放到主题

<?php the_title(); ?>

的下面即可。

]]> http://www.canfree.com/wordpress-plug-in-implementation-of-non-english-strings-truncated.htm/feed 1 给wordpress最新文章标题添加new图标http://www.canfree.com/wordpress-title-of-the-article-to-add-a-new-icon-for-the-latest.htm http://www.canfree.com/wordpress-title-of-the-article-to-add-a-new-icon-for-the-latest.htm#comments Sun, 17 Apr 2011 14:31:40 +0000 博优谷 http://www.canfree.com/?p=1268 给wordpress最新文章标题添加一个醒目的图标，有助于访问者区分新旧文章，一般在CMS等大型新闻列表网站常见。当wordpress3.1.1出来后，WP已经成为一个可塑性极高的CMS系统。

博优谷首页高度优化，以纯列表样式展示文章，有利于SEO。若再增加一个靓丽的小图标，定能起到画龙点睛之笔。效果如图所示：

QQ截图20110417223246 给wordpress最新文章标题添加new图标

拷贝下面的代码：

<?php
    $t1=$post->post_date;
    $t2=date("Y-m-d H:i:s");
    $diff=(strtotime($t2)-strtotime($t1))/3600;
    if($diff<24){echo '<img src="'.get_bloginfo('template_directory').'/images/new.gif" />';}
?>

到相关主题文件

<?php the_title(); ?>

的下面即可。
你也可以尝试下文字形式的NEW样式代码

<em><?php $t1=$post->post_date; $t2=date("Y-m-d H:i:s"); $diff=(strtotime($t2)-strtotime($t1))/3600; if($diff<24){echo " New!";} ?></em>

给em指定一个CSS样式

.post em{font-size:14px; color:#FF0242;}

关于置顶的关键代码：

<?php if (is_sticky()) {echo "[置顶]";} ?>
]]> http://www.canfree.com/wordpress-title-of-the-article-to-add-a-new-icon-for-the-latest.htm/feed 0 不用插件让wordpress评论显示Avatar头像http://www.canfree.com/realize-wordpress-plugin-comments-avatar.htm http://www.canfree.com/realize-wordpress-plugin-comments-avatar.htm#comments Tue, 22 Mar 2011 06:28:17 +0000 博优谷 http://www.canfree.com/?p=1228 本人现正使用的这款主题，看似简单，但却有利于SEO。主题只保留了最主要的功能，默认情况下在评论区就不显示读者的Avatar头像，我认为这样是对读者的不尊重，于是决定动刀实现这一功能。
博优谷多数关于wordpress的文章都是以代码的形式实现，我建议尽量少用插件。
1，打开主题文件夹中的comments.php，找到

<div class="<?php echo $oddcomment; ?> bubble" id="comment-<?php comment_ID() ?>">与<?php comment_author_link() ?>

2，将下面的代码添加到两语句之间

<?php if (function_exists('get_avatar')) { ?>
<div class="avatar">
<?php echo get_avatar( $comment, 18 ); ?>
</div>
<?php } ?>

3,在style.css中定义avatar的样式，例如

.avatar img{margin:5px 9px;float:left}

表示头像距离上下5px，左右9px，位于文字的左侧。

注意，上面的18代表Avatar的头像大小，你可以自由调整。

]]> http://www.canfree.com/realize-wordpress-plugin-comments-avatar.htm/feed 0 教你如何解决重复的元说明http://www.canfree.com/teach-you-how-to-solve-the-duplicate-meta-descriptions.htm http://www.canfree.com/teach-you-how-to-solve-the-duplicate-meta-descriptions.htm#comments Sun, 20 Mar 2011 09:14:09 +0000 博优谷 http://www.canfree.com/?p=1215 在用GOOGLE的网站管理员工具分析站点时发现存在重复的元说明，关于这个问题，一个比较方便的解决方法就是指定规范网页，规范网页是一组内容高度相似的网页的首选版本。
如何指定规范网页？

要指定指向网页 http://www.example.com/product.php?item=swedish-fish 的规范链接，请按以下形式创建 <link> 元素：
 
<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>将上述链接复制到该网页所有非规范版本的 <head> 部分，如 http://www.example.com/product.php?item=swedish-fish&sort=price。
 
如果您在 http://www.example.com/product.php?item=swedish-fish 和 https://www.example.com/product.php?item=swedish-fish 上都发布了内容，则可以指定该网页的规范版本。创建 <link> 元素： 
 
<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>将上述链接添加到 https://www.example.comproduct.php?item=swedish-fish 的 <head> 部分。

对于wordpress用户来说，可以用下面的方法来消除重复元说明方法，header.php 中加以下代码：

将代码添加到<head>部分:
<?php if ( is_singular() ) echo '<link rel="canonical" href="' . get_permalink() . '" />';?>
]]> http://www.canfree.com/teach-you-how-to-solve-the-duplicate-meta-descriptions.htm/feed 0 自定义wordpress Tags输出样式http://www.canfree.com/custom-output-style-wordpress-tags.htm http://www.canfree.com/custom-output-style-wordpress-tags.htm#comments Wed, 02 Mar 2011 08:13:17 +0000 博优谷 http://www.canfree.com/custom-output-style-wordpress-tags.htm 只需要简单修改几个参数，我们就可以自由控制tags的样式了。从SEO角度来看，标签字体太大并不能讨好机器人，得看他的热门度。所以我建议字体最小10，最大12，默认40个，以count、asc排序为最佳。

打开\wp-includes\category-template.php 文件，搜索

function wp_tag_cloud( $args

你会看到

    $defaults = array(
        'smallest' =<span class="kwrd">&gt;</span> 8, 'largest' =<span class="kwrd">&gt;</span> 22, 'unit' =<span class="kwrd">&gt;</span> 'pt', 'number' =<span class="kwrd">&gt;</span> 45,
        'format' =<span class="kwrd">&gt;</span> 'flat', 'separator' =<span class="kwrd">&gt;</span> &quot;\n&quot;, 'orderby' =<span class="kwrd">&gt;</span> 'name', 'order' =<span class="kwrd">&gt;</span> 'ASC',
        'exclude' =<span class="kwrd">&gt;</span> '', 'include' =<span class="kwrd">&gt;</span> '', 'link' =<span class="kwrd">&gt;</span> 'view', 'taxonomy' =<span class="kwrd">&gt;</span> 'post_tag', 'echo' =<span class="kwrd">&gt;</span> true
    );

默认字体最小是8pt,最大是22pt,默认显示45个标签；

orderdy也可以"count”,排序，表示标签的使用次数；

order也可以"DESC”按照降序排序；

]]> http://www.canfree.com/custom-output-style-wordpress-tags.htm/feed 0 wordpress侧边栏两列显示通用代码http://www.canfree.com/wordpress-sidebar-two-columns-show-common-code.htm http://www.canfree.com/wordpress-sidebar-two-columns-show-common-code.htm#comments Wed, 02 Mar 2011 07:26:52 +0000 博优谷 http://www.canfree.com/wordpress-sidebar-two-columns-show-common-code.htm 很多朋友都希望wordpress的侧边栏内容，比如分类目录、存档页、页面、链接等能够成两列显示，这不是难事，一段CSS代码就能搞定。

默认情况下，WP已经给相关的功能块定义了css名称，但没有定义样式。

友情链接：widget_links

分类目录：widget_categories

独立页面：widget_pages

等等，通过查看主题源代码我可以了解到这些固定的class名，下面只要添加相应的样式即可。

/* 分类显示两列*/
.widget_categories ul{
display:block;
overflow:hidden;
}
.widget_categories ul li{
width:79px;
float:left;
}
/* 分类显示两列*/
.widget_pages ul{
display:block;
overflow:hidden;
}
.widget_pages ul li{
width:79px;
float:left;
}
/* 分类显示两列*/
/* 链接显示两列*/
.widget_links ul{
display:block;
overflow:hidden;
}
.widget_links ul li{
width:79px;
float:left;
}
/* 链接显示两列*/
]]> http://www.canfree.com/wordpress-sidebar-two-columns-show-common-code.htm/feed 0 一段代码实现wordpress分类目录两列显示http://www.canfree.com/section-of-code-shows-two-columns-wordpress-categories.htm http://www.canfree.com/section-of-code-shows-two-columns-wordpress-categories.htm#comments Sat, 26 Feb 2011 20:55:02 +0000 博优谷 http://www.canfree.com/?p=1207 强大的wordpress即使更新到了3.1，默认的目录还是显示一列，有时会与主题格格不入，其实只要在style.css中加入一段代码，即可轻松实现了。你也可以丰富一下代码的样式，比如在文字前加个小图标等等。

/* 分类显示两列*/
.widget_categories ul{
    display:block;
    overflow:auto;
}
.widget_categories ul li{
    width:79px;
    height:20px;
    float:left;
}
]]> http://www.canfree.com/section-of-code-shows-two-columns-wordpress-categories.htm/feed 0 强制点击广告后才能下载的代码http://www.canfree.com/click-ad-to-download-a-mandatory-code-for.htm http://www.canfree.com/click-ad-to-download-a-mandatory-code-for.htm#comments Thu, 21 Jan 2010 18:45:46 +0000 博优谷 http://www.canfree.com/click-ad-to-download-a-mandatory-code-for.htm 经常会在一些下载站遇到这样的情况，当点击某个广告文字或图片后，下载链接才会在页面上出现。依靠这种手段来提高CPT广告收入确实不错，不过不能用来做GOOGLE，不然100%被K，做做国内的广告联盟还凑乎。

下面公布下站长秘而不宣的强制点广告代码

 

一、强制点击文字后才能下载，当然也可以把文字改成图片：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>强制点击广告代码(一)</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<script language="javascript">
var num = 2;
var mypage = 'http://www.gzxnzj.cn';
var pissoff = '请先点击上面的链接！';
allow = Array();
allow[num] = 2;
function gotoit(link){
if (link != num){
allow[link] = 2;
} else {
for (i=1;i<=num;i++){
if (allow[i] != 2){
i = num + 1;
lemmeIn = 0;
} else {
lemmeIn = 1;
}
}
if (lemmeIn == 1){
window.location = mypage;
} else {
alert(pissoff);
}
}
}
//--->
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<a href=http://www.canfree.com target="_blank" onClick="gotoit(1)">广告链接</a><br>
<a href="javascript:gotoit(num)">请先点击上面的链接再点击这里下载</a>
</body>
</html>

二、强制点击图片后才能下载，当然也可以把图片改成文字：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>强制点击广告代码(二)</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<script language="javascript">
<!--
function MM_showHideLayers() {//v2.0
var i, visStr, args, theObj;
args = MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) {//with arg triples (objNS,objIE,visStr)
visStr = args[i+2];
if (navigator.appName == 'Netscape' && document.layers != null) {
theObj = eval(args[i]);
if (theObj) theObj.visibility = visStr;
} else if (document.all != null) {//IE
if (visStr == 'show') visStr = 'visible';//convert vals
if (visStr == 'hide') visStr = 'hidden';
theObj = eval(args[i+1]);
if (theObj) theObj.style.visibility = visStr;
} }
}
function MM_preloadImages() {//v2.0
if (document.images) {
var imgFiles = MM_preloadImages.arguments;
if (document.preloadArray==null) document.preloadArray = new Array();
var i = document.preloadArray.length;
with (document) for (var j=0; j<imgFiles.length; j++) if (imgFiles[j].charAt(0)!="#"){
preloadArray[i] = new Image;
preloadArray[i++].src = imgFiles[j];
} }
}
//-->
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="Layer1" style="position:absolute;top:75px;left:10px;width:306px;height:63px;z-index:1;visibility:hidden;"><a href="http://www.canfree.com">下载</a></div>
<div id="Layer2" style="position:absolute;top:10px;left:10px;width:147px;height:82px;z-index:2;visibility: visible;"><a href=http://www.canfree.com target="_blank"><img src="http://seo.canfree.com/Images/logo.gif" border="0" onMouseDown="MM_showHideLayers('document.layers[\'Layer1\']','document.all[\'Layer1\']','show')"></a></div>
</body>
</html>

复制代码另存网页看效果。

]]> http://www.canfree.com/click-ad-to-download-a-mandatory-code-for.htm/feed 4 用图片列表方式展示BLOGhttp://www.canfree.com/tabular-form-with-a-picture-showing-blog.htm http://www.canfree.com/tabular-form-with-a-picture-showing-blog.htm#comments Fri, 15 Jan 2010 16:24:42 +0000 博优谷 http://www.canfree.com/tabular-form-with-a-picture-showing-blog.htm 效果可以先看牛仔主义的www.jeansism.com/pic。或者去月光博客的首页看看。

思路: 调用9个文章post   采用css将其分割成三栏展示图下附文章标题作为链接。

<?php
$list_posts = get_posts('showposts=9&orderby=rand');   //随机获得9个post
$i=1; 标记一
foreach( $list_posts as $post ) :  //建立了一个循环
?>
//在这个循环里插入下面的内容
endforeach; ?>
<?php $screen = get_post_meta($post->ID, 'screen', $single = true); ?>
//调用自定义字符来显示图片
//下面就是具体的显示文字和图片的方法，  为了清楚一点，这里把css写在style里了 实际中可以写入css文件的
<div style="float:left;width:220px; padding-right:30px;text-align:center" >
<div style="height:220px;overflow:hidden;float:left; width:220px" >
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark">
<img src="<?php echo ($screen); ?>"  width="220 "alt=""  />  </a>
</a>
</div>
<h4>
<a href="<?php the_permalink() ?>" rel="bookmark"       title="Permanent Link to <?php the_title(); ?>"><?php     the_title     (); ?></a>
</h4>
</div>
<?php
if(fmod($i,3)==0)   //做判断 3个div以后 结束  重新开始一个3个一组的div
{
echo("</div> <div style='height:220px;padding-bottom:55px'>");
}
$i=$i+1;

这样基本就完了  可以保存为模板  以页面形式发布。

我们再把思路引申一下，单独做一个这样的页面，然后WP后台将这个页面设为首页，立马焕然一新的感觉。

]]> http://www.canfree.com/tabular-form-with-a-picture-showing-blog.htm/feed 6 不用插件实现日志缩略图功能http://www.canfree.com/thumbnail-plug-ins-do-not-achieve-the-function-of-the-log.htm http://www.canfree.com/thumbnail-plug-ins-do-not-achieve-the-function-of-the-log.htm#comments Mon, 11 Jan 2010 17:48:30 +0000 博优谷 http://www.canfree.com/thumbnail-plug-ins-do-not-achieve-the-function-of-the-log.htm 在1月10号的时候本站介绍过日志缩略图插件Get The Image，可以很方便的在首页或其它页面输出文章缩略图，返回首页即可看到实际效果。

但是今天在幸福的收藏夹那里看到了一段代码，可以实现这种效果，特做个记号，以备急需时使用。

<?php
$soContent = $post->post_content;
$soImages = '~<img [^\>]*\ />~';
preg_match_all( $soImages, $soContent, $thePics );
$allPics = count($thePics[0]);
switch ( $allPics > 0 ) {
case $allPics = 1:
echo $thePics[0][0]; // 显示文章中的第一张图片
break; // 当图片数量有1个时，不再执行
default:
echo "图片地址"; // 这里加入没图片时显示的默认图片
};
?>

将上面的代码放到index.php文件中合适位置，再配上CSS定义样式即可。本站并未测试此代码的有效性，有空时再说。

引申阅读：wordpress首页分类图片调用 为你的每一个分类目录指定一个图片，并按照文章所属的分类在首页以缩略图的形式展示出来。

]]> http://www.canfree.com/thumbnail-plug-ins-do-not-achieve-the-function-of-the-log.htm/feed 5