HOME  /WordPress(応用)
 /WordPressのアイコンフォントを使える様にする。
2017年12月12日

WordPressのアイコンフォントを使える様にする。

このサイトではBootstrapを導入する事によりBootstrapが持っているアイコンフォントが使える様になっています。

使い方は下記になります。

1.Bootstrapアイコン文字の使い方

Bootstrapにどのようなアイコンがあるか?は下記URLを参照してください。

Bootstrapアイコン一覧

使い方は該当のアイコンをHTMLで記述するだけです。

<p><span class="glyphicon glyphicon-search" aria-hidden="true"></span></p>

上記は下図の虫眼鏡アイコンを表示した例で赤字の所がアイコン一覧から持ってきたものです。

aria-hidden=”true”は、文字読み上げでこれを読むな!を指定しているだけなので削除しても問題ありません。

2.WordPressのアイコン文字の使い方

WordPressのアイコンフォントはダッシュアイコンと呼ばれています。どのようなアイコンがあるか?は下記URLを参照してください。

ダッシュアイコン一覧

Bootstrapのアイコン文字は、何も定義しなくても使えましたが、ダッシュアイコンは利用宣言が必要になります。

2-1.ダッシュアイコンの利用宣言とCSS設定

①functions.phpに下記を追加してください。

//WordPressのdashiconsの利用宣言
function load_dashicons()
 {wp_enqueue_style('dashicons');}
add_action('wp_enqueue_scripts', 'load_dashicons');

②style.cssに下記を追加してください。

/* dashicon フォントの設定 *******/
.dashicons{
	font-size:18px;font-size:1.125rem;
	line-height:22x;line-height:1.375rem;}

※1.アイコンのサイズと行間を指定しています。尚、rem指定はアイコン文字をレスポンシブ対応にする設定です。この辺は、レスポンシブ設定の所を参照してください。

以上でWordPressが持っているアイコンフォントが使える様になります。

2-2.ダッシュアイコンの使い方

①HTMLで利用する場合

利用方法はBootstrapアイコンと同様です。

<p><span class="dashicons dashicons-edit"></span>メモ</p>

上記は下図の鉛筆アイコンを表示した例で赤字の所がアイコン一覧の「Copy HTML」から持ってきたものです。

②CSSで利用する場合

ダッシュアイコンはCSSでも利用できます。

blockquote:before{
	font-family:"dashicons";
	content:"\f122";
	font-size:20px;font-size:1.25rem;
	line-height:1em;
	color:#999;
	position:absolute;left:0;top:0;}

上記は参照にダッシュアイコンを使った例です。
font-familydashiconsを宣言し、content利用するダッシュアイコンのコードを入れます。
コードはアイコン一覧から探したアイコンの「Copy CSS」からコピーします。

3.ダッシュアイコンをビジュアルエディタで使う方法

旧サイトでは「WordPress Visual Icon Fonts」プラグインを利用していましたが、決して使い易い物ではありませんでした。詳細は下記URLを参照してください。

WordPress Visual Icon Fontsのインストール方法と使い方

ビジュアルエディタで使いたいアイコンはそんなに多くないので、新サイトではこのプラグインを使わずにダッシュアイコンをダイレクトにビジュアルエディタで使える様にしています。

但し、「TinyMCE Advanced」プラグインは既に設定済みを前提としています。

プログラムには下記の2種類のプログラムがあります。

①phpプログラム:サーバ側で動くプログラムです。

②jqueryプログラム:アクセスデバイス(ブラウザ)上で動くプログラムです。

ビジュアルエディタでダッシュアイコンを使える様にするという事は、PCのブラウザ上で動くプログラムを作る事を意味しています。

すなわち②のjquryプログラムを記述する事によりダッシュアイコンを読み出します。

 

具体的には下記手順でプログラムを作成していきます。

1)functions.phpに下記の記述をします。(2番目のタブを見てください)

①Tinymceに追加するボタンの名前を登録します。

②次にボタンの動作を記述するjqueryプログラムの場所を登録します。

2)Jqueryプログラムの登録場所に下記を登録します。(3番目のタブを見てください)

①追加するボタンのイメージ画像を登録します。

②各追加ボタンの動作をjqueryプログラムで記述します。

以上でボタンを挿入するとダッシュアイコンがドキュメントの中に追加されます。

ビジュアルエディタで使える様にしたダッシュアイコン一覧は下表になります。

アイコン コード
 ­ <span class=”dashicons dashicons-media-default“></span>
­ ­ <span class=”dashicons dashicons-welcome-write-blog“></span>
­ ­ <span class=”dashicons dashicons-edit“></span>
­ ­ <span class=”dashicons dashicons-clock“></span>

functions.phpには下記の内容を記述します。

①Tinymceに追加するボタンの名前を登録します。

②次にボタンの動作を記述するjqueryプログラムの場所を登録します。

//dashiconsのボタン定義
function add_icon_buttons($buttons) {
	$buttons[] = 'media-default';      // ­media-defaultアイコン
	$buttons[] = 'welcome-write-blog'; //­ ­ welcome-write-blogアイコン
	$buttons[] = 'edit';               //­ ­editアイコン
	$buttons[] = 'clock';              //­­ ­­book-altアイコン
return $buttons;}
add_filter( 'mce_buttons', 'add_icon_buttons' );
//上記ボタンプラグインの場所の設定 
function plugins_directory($plugin_array) {
	$plugin_array['custom_button_script'] = get_stylesheet_directory_uri()."/icon/tinymce.js";
	return $plugin_array;}
add_filter( 'mce_external_plugins', 'plugins_directory' );

※1.$buttons[]で指定した名前はあくまでもボタンの名前です。

※2.get_stylesheet_directory_uri().”/icon/tinymce.js”は、子テーマの中にiconフォルダを作成し、その中にtinymce.jsというjqueryプログラムがある事を意味しています。

iconフォルダの中には下記を登録します。

①追加するボタンのイメージ画像を登録します。

②各追加ボタンの動作をjqueryで記述したプログラムを登録します。

※1.××.pngファイルはボタン画像です。
GIMP等で200×300px位の画像で作成してください。

※2.tinymce.jsは、jqueryプログラムです。
tinymce.jsには、下記の内容を記述しています。

/****************************/
/* Dashiconのプラグイン設定 */
/****************************/	
(function() {
	tinymce.create('tinymce.plugins.MyButtons', {
		init : function(ed, url) { // ed には現在開いてるエディタの情報、urlにはこのJsファイルまでのパスが入る
// アイコン「media-default」のボタン設定 *********************************************
			ed.addButton( 'media-default', {
				title : 'dashicon',							  // ボタンのタイトル(マウスオーバー時に表示される)
				image : url + '/media-default.png',	// ボタン画像のパス
				cmd: 'media-default_cmd'				  // ボタンの処理プログラムの名前
			});
			// 「media-default_cmd」ボタン動作
			ed.addCommand( 'media-default_cmd', function() {
				var selected_text = ed.selection.getContent();
				var return_text = '';
				return_text = '&shy;<span class="dashicons dashicons-media-default">&nbsp;</span>&shy;' + selected_text;
				ed.execCommand('mceInsertContent', 0, return_text);
			});
			// アイコン「welcome-write-blog」のボタン設定 *****************************************
			ed.addButton( 'welcome-write-blog', {
				title : 'dashicon',
				image : url + '/welcome-write-blog.png',
				cmd: 'welcome-write-blog_cmd'
			});
			// 「welcome-write-blog_cmd」ボタン動作
			ed.addCommand( 'welcome-write-blog_cmd', function() {
				var selected_text = ed.selection.getContent();
				var return_text = '';
				return_text =  '&shy;<span class="dashicons dashicons-welcome-write-blog">&nbsp;</span>&shy;' + selected_text;
				ed.execCommand('mceInsertContent', 0, return_text);
			});
			//アイコン「edit」のボタン設定 ********************************************************
			ed.addButton( 'edit', {
				title : 'dashicon',	
				image : url + '/edit.png',	
				cmd: 'edit_cmd'				
			});
			// 「eedit_cmd」ボタン動作
			ed.addCommand( 'edit_cmd', function() {
				var selected_text = ed.selection.getContent();
				var return_text = '';
				return_text = '&shy;<span class="dashicons dashicons-edit">&nbsp;</span>&shy;' + selected_text;
				ed.execCommand('mceInsertContent', 0, return_text);
			});
			//アイコン「clock」のボタン設定 *****************************************************
			ed.addButton( 'clock', {
				title : 'dashicon',						
				image : url + '/clock.png',
				cmd: 'clock_cmd'			
			});
			// 「book-alt_cmd」ボタン動作
			ed.addCommand( 'clock_cmd', function() {
				var selected_text = ed.selection.getContent();
				var return_text = '';
				return_text = '&shy;<span class="dashicons dashicons-clock">&nbsp;</span>&shy;' + selected_text;
				ed.execCommand('mceInsertContent', 0, return_text);
			});
			// アイコン設定終了 ********************************************************************
		},
		createControl : function(n, cm) {
			return null;
		},
	});
	/* Start the buttons */
	tinymce.PluginManager.add( 'custom_button_script', tinymce.plugins.MyButtons );
})();

※1.init : function(ed, url)のed には現在開いてるエディタの情報、urlにはこのJsファイルまでのパスが返されます。

※2.ed.addButton( ‘media-default‘がfunctionsで指定した追加ボタンの名前で下記で、このボタンの設定をしています。

title : ‘dashicon’,は、カーソルがきた時にポップアップされる文字です。

image : url + ‘/media-default.png’は、表示する画像です。

cmd: ‘media-default_cmd‘は、このボタンがクリックされた時に実行するコマンド名です。

※3.ed.addCommand( ‘media-default_cmd‘, function()は、このコマンドがきた時に実行する内容を記述しています。

 '&shy;<span class="dashicons dashicons-welcome-write-blog">&nbsp;</span>&shy;'

①ダッシュアイコンの前後にある&shy;は、soft hyphenと呼ばれている物でアイコン文字の前後にカーソル設置ができる様にこれを入れています。

②</span>の前&nbsp;(空白)は、これを入れないとtinymceの自動補正でこのコマンド自体が削除されてしまう対策の為に入れています。

他の追加ボタンの処理は上記の「media-default」の処理と同様なので説明は省略します。