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

LMS
折腾
2.5K+ 16

上周帮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/ 略有合并。

THE END

评论 16

  2. 不能用啊，imagetext.php这个文件报错 500错误。

    1. 我在wordpress上确实做成功过，为啥会500错误我就不知道了。

  3. Qgi
    🏅

    请问网站的标题字体（不是日志标题）是通过什么实现的？

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

  4. 百奥博
    🏅

    很强大的功能，学习了

  5. that5
    🏆🏅🏅

    强悍，牛逼，以下省略................

    我也在弄主题，开了头没结尾，囧

    1. 会ps还是先作图的好，不然整来整去最后又大同小异了。

      1. that5@LMS
        🏆🏅🏅

        有兴趣再做一款wp主题不， :idea:

        1. 太折腾了，尤其帮别人做不像自己做，不敢有什么大错，要花很多时间。

          1. sherry@LMS
            🏅🏅🏅

            这话听着，怎么都觉得有些怨言的意思。。。。 :!:

          2. sherry@LMS
            🏅🏅🏅

            这话听着，怎么都觉得有些怨言的意思。。。。 我这罪过大了 :!:

            1. 被当事人逮到了。。。
              其实我的意思是想表达没有时间，会有压力而已 :oops:

  6. 万戈
    🏆🏅

    如此牛B的技术居然没人顶！！！

    1. 貌似有更牛b的插件可以实现，老万你试一下能不能让它显示五颜六色的文字。

发表评论

Submit