上周帮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等页面内部的
<?php the_title(); ?>
替换成
<script type="text/javascript">prettyFont("<?php the_title(); ?>");</script>
就OK了!
效果见博客sherry同学的博客:http://blog.fairysherry.org/
以上代码原作者: http://fsun.cn/ 略有合并。
THE END







收藏下
不能用啊,imagetext.php这个文件报错 500错误。
我在wordpress上确实做成功过,为啥会500错误我就不知道了。
请问网站的标题字体(不是日志标题)是通过什么实现的?
标题字体?你是说标题图片显示的字体还是单单标题的字体?如果是单单标题的字体可以通过css来定义,如果是图片化,完全可以用上面这个方法。
很强大的功能,学习了
强悍,牛逼,以下省略................
我也在弄主题,开了头没结尾,囧
会ps还是先作图的好,不然整来整去最后又大同小异了。
有兴趣再做一款wp主题不,
太折腾了,尤其帮别人做不像自己做,不敢有什么大错,要花很多时间。
这话听着,怎么都觉得有些怨言的意思。。。。
这话听着,怎么都觉得有些怨言的意思。。。。 我这罪过大了
被当事人逮到了。。。
其实我的意思是想表达没有时间,会有压力而已
如此牛B的技术居然没人顶!!!
貌似有更牛b的插件可以实现,老万你试一下能不能让它显示五颜六色的文字。