看到 Wordpress 免插件实现的功能，我都是特别眼馋，最近有点文囧，所以转一篇 LMS 的技术文章，我觉得还是挺有意思的。
效果：让 Wordpress 的日志标题显示个性化字体图片，见图：
方法如下：
一、建立一个文件名为imagetext的php文件，将以下代码复制到文件里去，保存utf-8格式。上传到主题文件夹下。
<?php
$allow_site = ''; // for security
/*========================================================
DO NOT EDIT BELOW THIS LINE
=========================================================*/
error_reporting(0);
if (!preg_match('@^http://(www\.)?'.preg_quote($allow_site).'@', $_SERVER['HTTP_REFERER'])) exit;
putenv('GDFONTPATH='.realpath('./'));
$fname = $_GET['font']; // font name
$fsize = $_GET['size']; // font size
$bgcolor = $_GET['bgcolor'] or 'FFFFFF'; // background color
$txtcolor = $_GET['txtcolor'] or '000000'; // text color
$notcolor = $_GET['notcolor'] or '000000'; // notice color
$text = $_GET['text'];
$bound = imagettfbbox($fsize, 0, $fname, $text);
$width = max($bound[2],$bound[4])+10;
$height = $fsize * 1.5;
// create an image
$im = imagecreatetruecolor($width, $height);
// anti-aliasing
if (function_exists('imageantialias')) imageantialias($im, true);
list($r,$g,$b) = txt2rgb($bgcolor);
$bgcol = imagecolorallocate($im, $r, $g, $b);
list($r,$g,$b) = txt2rgb($_GET['notice']==='true'?$notcolor:$txtcolor);
$txtcol = imagecolorallocate($im, $r, $g, $b);
imagefill($im, 0, 0, $bgcol);
imagettftext($im, $fsize, 0, 5, $height*0.8, $txtcol, $fname, $text);
imagetruecolortopalette($im, true, 256);
// set transparent color
$bgcol = imagecolorat($im, 1, 1); // color of (1,1) is background!
imagecolortransparent($im, $bgcol);
// print out
header("Content-type: " . image_type_to_mime_type(IMAGETYPE_GIF));
imagegif($im);
imagedestroy($im);
function txt2rgb($txt) {
return array(
hexdec(substr($txt,0,2)),
hexdec(substr($txt,2,2)),
hexdec(substr($txt,4,2))
);
}
?>
$allow_site = ''; // for security
/*========================================================
DO NOT EDIT BELOW THIS LINE
=========================================================*/
error_reporting(0);
if (!preg_match('@^http://(www\.)?'.preg_quote($allow_site).'@', $_SERVER['HTTP_REFERER'])) exit;
putenv('GDFONTPATH='.realpath('./'));
$fname = $_GET['font']; // font name
$fsize = $_GET['size']; // font size
$bgcolor = $_GET['bgcolor'] or 'FFFFFF'; // background color
$txtcolor = $_GET['txtcolor'] or '000000'; // text color
$notcolor = $_GET['notcolor'] or '000000'; // notice color
$text = $_GET['text'];
$bound = imagettfbbox($fsize, 0, $fname, $text);
$width = max($bound[2],$bound[4])+10;
$height = $fsize * 1.5;
// create an image
$im = imagecreatetruecolor($width, $height);
// anti-aliasing
if (function_exists('imageantialias')) imageantialias($im, true);
list($r,$g,$b) = txt2rgb($bgcolor);
$bgcol = imagecolorallocate($im, $r, $g, $b);
list($r,$g,$b) = txt2rgb($_GET['notice']==='true'?$notcolor:$txtcolor);
$txtcol = imagecolorallocate($im, $r, $g, $b);
imagefill($im, 0, 0, $bgcol);
imagettftext($im, $fsize, 0, 5, $height*0.8, $txtcol, $fname, $text);
imagetruecolortopalette($im, true, 256);
// set transparent color
$bgcol = imagecolorat($im, 1, 1); // color of (1,1) is background!
imagecolortransparent($im, $bgcol);
// print out
header("Content-type: " . image_type_to_mime_type(IMAGETYPE_GIF));
imagegif($im);
imagedestroy($im);
function txt2rgb($txt) {
return array(
hexdec(substr($txt,0,2)),
hexdec(substr($txt,2,2)),
hexdec(substr($txt,4,2))
);
}
?>
二、建立一个文件名为imagetext_js的php文件，将以下代码复制到文件里去，保存utf-8格式。上传到主题文件夹下。
<?php
function prettyFont(txt,notice) {
var str = '';
if (typeof notice == "undefined") notice = "false";
str += '<img src="<?php echo dirname($_SERVER['SCRIPT_NAME'])?>/imagetext.php?text='+encodeURIComponent(txt)+'&font='+prettyFont.font+'&size='+prettyFont.size+'¬ice='+notice+'&bgcolor='+prettyFont.bgColor+'&txtcolor='+prettyFont.txtColor+'¬color='+prettyFont.notColor+'" alt="'+txt+'" border="0" />';
document.write(str);
}
prettyFont.font = "prince.ttf"; // 字体文件的文件名
prettyFont.size = 18; // 显示字体的大小
prettyFont.bgColor = "FFFFFF"; // 背景颜色，一般和主题背景颜色统一
prettyFont.txtColor = "135009"; // 字体颜色
prettyFont.notColor = "669900"; // notice color
?>
function prettyFont(txt,notice) {
var str = '';
if (typeof notice == "undefined") notice = "false";
str += '<img src="<?php echo dirname($_SERVER['SCRIPT_NAME'])?>/imagetext.php?text='+encodeURIComponent(txt)+'&font='+prettyFont.font+'&size='+prettyFont.size+'¬ice='+notice+'&bgcolor='+prettyFont.bgColor+'&txtcolor='+prettyFont.txtColor+'¬color='+prettyFont.notColor+'" alt="'+txt+'" border="0" />';
document.write(str);
}
prettyFont.font = "prince.ttf"; // 字体文件的文件名
prettyFont.size = 18; // 显示字体的大小
prettyFont.bgColor = "FFFFFF"; // 背景颜色，一般和主题背景颜色统一
prettyFont.txtColor = "135009"; // 字体颜色
prettyFont.notColor = "669900"; // notice color
?>
三、将自己需要显示的字体文件上传到主题文件夹，文件名必须同步骤二中prettyFont.font = "prince.ttf";引号内填写的字体文件名一致。
四、在主题文件夹下的header.php文件中引用js代码
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/imagetext_js.php"></script>
代码放在< head > < / head>内部。
五、将原主题index.php、single.php等页面内部的
<?php the_title(); ?>
替换成
<script type="text/javascript">prettyFont("<?php the_title(); ?>");</script>
就OK了！
效果见博客sherry同学的博客：http://blog.fairysherry.org/
以上代码原作者： http://fsun.cn/ 略有合并。
，感情是不是直接用G
这种方法如何解决SEO是个难题。不过想法真的很强大
imagetext_js的php文件:第一行“”也要去掉。都不知道你有没验证过，囧
。。。我还真没验证过，只是看这个效果不错的说
太依赖JS了，不过想法很不错喔 ~
这样 那个标题就成了图片了吗》？
恩，是的，只是会对SEO不太好
不折腾啊啊啊啊~~
这样如果浏览器禁用了JavaScript的话就看不到标题了，不如用CSS
很Cool！
效果是蛮不错的，不过这对程序升级而言不是件好事啊，后期维护很麻烦
哦，这样折腾还不如装插件了。。这种做法不如我blog里推荐的那个插件生成的是静态页面，这样还需要js代价太大了。。
oh ho~原来你也写过，马上过去看看
拖慢速度吧
我也没用过，只是觉得好看
原来见过一个HK的朋友介绍这种功能，是将标题图片化，这个差不多吧？
恩，就是这个，呵呵
生命在于折腾
看了下效果，果然 不错啊。
PS：二、建立一个文件名为imagetext_js的php文件 。。。。。这里最外层的php标签应该去除吧
是的，应该去除，但是不加php标签，代码不高亮
wp虽然强大,但插件也不能都装,多了确实耗资源,普通的装些常用的就可以了,视自己的情况决定,满足自己的需求是比较明智的
不喜欢拖累速度的..
字体文件大的确是速度很慢，大到十几兆的时候网速慢甚至就显示不了了。。。
小的字体可以玩玩。
这种功能即使写成代码也不比用插件快多少,所以还是直接用插件算了.
我是用的插件… 手机上不方便，等下电脑上了去折腾看看，哈哈～
最近都是美化WP的技巧啊
而且都是从别处搬来的
WP的世界真强大。。。
中文字体包太大，严重降低速度
而且不利于SEO～
CP 党看不懂啊
最近文囧的人真多……
我就是有看到这样的字体，还不知道是怎么回事呢。
很不错的日志，收藏了，很有用啊，字体嗯嗯！
沙发貌似久远 原创才是王道 哈哈 支持万戈
呵呵，一看图就知道是sherry的。话说这个方法还真实不错，不过为了速度，还是不折腾的好
字体效果不错，不过最近忙，懒得折腾
字体很美啊，待空了搞去玩玩。
第十名了都
唉
每次都来迟
呵呵 还有第十就不错了。。、
有一行代码怎么出轨了？？
谢谢提醒，已经搞定了
Safari和火狐下还是不正常
在Safari和火狐下是底部显示滑动条，换行也有点问题。。。是臭虫吧
晕。。一下子2个回应。。第一次如此前排 哈哈
温柔的插入。
真的是沙发哎
又见技术文。沙发
你沙发的频率很高啊
我就很少了