非插件 WordPress 标题个性化字体图片

发布于：电脑网络, 转来载去 2,161 次践踏

看到 WordPress 免插件实现的功能，我都是特别眼馋，最近有点文囧，所以转一篇 LMS 的技术文章，我觉得还是挺有意思的。

原文：非插件wp标题个性化字体图片显示

效果：让 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))
    );
}
?>

二、建立一个文件名为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+'&notice='+notice+'&bgcolor='+prettyFont.bgColor+'&txtcolor='+prettyFont.txtColor+'&notcolor='+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/ 略有合并。

  1. Pingback: WordPress | Life

  13. 哦，这样折腾还不如装插件了。。这种做法不如我blog里推荐的那个插件生成的是静态页面，这样还需要js代价太大了。。

  19. wp虽然强大,但插件也不能都装,多了确实耗资源,普通的装些常用的就可以了,视自己的情况决定,满足自己的需求是比较明智的