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

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

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

これを有効化すると、

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

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

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

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

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

今回は「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:


/*
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;
}

TSM_font-changer.php:

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

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);

おわりに

そのうちもっと完成度を上げる予定ですが、現在のプラグインもよろしければダウンロードして使ってみてください。

ダウンロードはこちら↓

フォントプラグイン
TSM_fontチェンジャー サイト上のフォントを手書き風フォント「TSM_font001」に変換するプラグイン。アルファベット、平仮名、...
関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする