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

上周帮sherry同学做了个主题,回头算算虽然简简单单的一个主题,从上周一接到psd图片到现在已经一周过去了,目前sherry同学需要的功能基本都有了,但是会不会有什么其他问题暂时还不知道,只能让小白鼠自己去发现了,嘎嘎。

这是第一次帮别人从无到有的做主题,和以前拿自己的主题改来改去的感觉完全不一样,也学到了一些东西,比如像下图的让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格式。上传到主题文件夹下。

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等页面内部的

&lt;?php the_title(); ?&gt;

替换成

&lt;script type="text/javascript"&gt;prettyFont("&lt;?php the_title(); ?&gt;");&lt;/script&gt;

就OK了!

效果见博客sherry同学的博客:http://blog.fairysherry.org/

以上代码原作者: http://fsun.cn/ 略有合并。

作者: LMS

天行贱,君子自强自息。

标签

《非插件wp标题个性化字体图片显示》有16个想法

    1. @Qgi 标题字体?你是说标题图片显示的字体还是单单标题的字体?如果是单单标题的字体可以通过css来定义,如果是图片化,完全可以用上面这个方法。

发表评论

电子邮件地址不会被公开。 必填项已用*标注