フォント変換プラグインを作りました

2016年5月3日

なんとオリジナルプラグイン、作ってしまいました！
それも、クリックひとつでオリジナルのwebフォントに変更するプラグインです。

プラグイン画面に、「TSM_fontチェンジャー」が出現。

これを有効化すると、

ちょっと脅迫状みたいですが、それはまだ発展途上ということで・・・

とりあえず、クリックひとつで自分のフォントに変更できるようになりました！

作り方はとても簡単です。

Contents

1. フォント変換プラグインの作り方
2. おわりに

フォント変換プラグインの作り方

まずは、フォルダを作ります。

今回は「TSM_font-changer」という名前で作りました。

中身は、

「fontsフォルダ」「font-changer.css」「TSM_font-changer.php」の3つ。

fontsフォルダ内に、「TSM_font001.otf」「TSM_font001.woff」が入っています。

このTSM_font-changerフォルダを、

wp-contentの中の、pluginsの中にアップロードすればOK.

肝心のソースコードです。

font-changer.css:

[php]

/*
Theme Name: WordPressでフリーオリジナルフォント
*/

/* Ligature Symbols */

@font-face {
font-family: 'LigatureSymbols’;
src: url('./fonts/TSM_font001.woff’) format('woff’),
url('./fonts/TSM_font001.otf’) format('opentype’);
font-weight: normal;
font-style: normal;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
button,
input,
select,
textarea,
pre,
.comment-reply-title,
.comments-title {
font-family: 'LigatureSymbols’, 'Open Sans’, serif;
}

[/php]

TSM_font-changer.php:

[php]
<?php
/*
Plugin Name: TSM_fontチェンジャー
Plugin URI: http://i-doctor.sakura.ne.jp/f/
Description: サイトのフォントをTSM_fontに変更するプラグイン。
Author: TSM
Version: 1.0.0
Author URI: http://i-doctor.sakura.ne.jp/f/
*/

function add_wp_head (){
$css_uri = home_url('/’);
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"{$css_uri}wp-content/plugins/TSM_font-changer/font-changer.css\" />";
}
add_action ('wp_head’,’add_wp_head’,999);
[/php]