携帯サイト兼用のサイトを依頼され作ったんですがPCでスマイリーアイコンを使った場合の携帯での表示が味気なくスマイリーアイコンも使えるのが少なかったために両方変えて作成しましたのでその作成方法を参考になればと思い今回は投稿しました。

SmiliesアイコンはCustom Smiliesプラグインを使う事によりデフォルトでwp-includes/images/smiliesフォルダに入っているSmiliesアイコンを使うことが出来るようになりwp-includes/images/smiliesフォルダの中に好きなアイコンをアップロードすればアイコンが増え使えるようになります。

又WordPressはプラグインを使うことによって携帯電話でも見ることが出来るようになります。携帯対応にしてくれるプラグインにKtai Styleと言うとっても便利なプラグインが有ります。現在も新しいバージョンを更新中なのでこれからももっと便利になってくるプラグインだと思います。
このプラグインを使うことによってデフォルトで入っているSmiliesアイコンは各メーカーの絵文字に変換されるんですが、デフォルトで入っているSmiliesアイコン同様種類が少なく、使いたい絵文字も少ないです。そこでまずデフォルトで入っているSmiliesアイコンの名前は変えずに画像だけを変えました。画像数は増やさなくて使いそうな画像だけを変更しました。

Ktai Styleデフォルト時のスマイリー画像変換絵文字スタイル

Ktai Styleデフォルト時にスマイリー画像を変換される携帯絵文字は下記の通りになっています。iモード絵文字で説明しますがau,softbankなどの絵文字もそれに似た絵文字が表示されています。
下記の画像は分かりやすいように絵文字を付け加えてます。実際は絵文字は横に表示されません。

絵文字に変換されるコードはktai-style/operatorsフォルダの中に入っているemobile.php、ezweb.php、i-mode.php、softbank.php、willcom.phpファイルに書いてあります。それぞれ各メーカーのコードを使い変換されています。各メーカーの絵文字コードは各ファイルにアドレスが書いてありますのでそのページに行けばコードが分かります。ここではi-mode.phpファイルを例に取り上げ説明していきます。

画像と携帯絵文字コードの関係

i-mode.phpファイルの331行目あたりに’icon_smile.gif’ => self::$pictograms[‘d140’]と言うコードが20行ぐらい書いてあると思います。これはicon_smile.gif :smile: と言う画像を絵文字のコードd140に変えるコードです。今回私はスマイリー画像は入れ替えましたが名前はそのまま使いました。後はその画像に対する絵文字のコードを書き換え設定しました。

例’icon_smile.gif’の名前で太陽画像、それに対する絵文字[‘d001’]で太陽のマークで表示してます。コードの部分は’icon_smile.gif’ => self::$pictograms[‘d001’]のように画像と絵文字のコードは変えてますが画像の名前はそのまま使っています。

i-mode.phpコードを変えた例が下記になります。

public function replace_smiley($buffer) {
	$smiles = array(
		'icon_smile.gif'     => self::$pictograms['d001'],
		'icon_biggrin.gif'   => self::$pictograms['d002'],
		'icon_sad.gif'       => self::$pictograms['d003'],
		'icon_surprised.gif' => self::$pictograms['d004'],
		'icon_eek.gif'       => self::$pictograms['d005'],
		'icon_confused.gif'  => self::$pictograms['d088'],
		'icon_cool.gif'      => self::$pictograms['d137'],
		'icon_mad.gif'       => self::$pictograms['d140'],
		'icon_razz.gif'      => self::$pictograms['d145'],
		'icon_neutral.gif'   => self::$pictograms['d146'],
		'icon_wink.gif'      => self::$pictograms['d150'],
		'icon_lol.gif'       => self::$pictograms['d151'],
		'icon_redface.gif'   => self::$pictograms['d156'],
		'icon_cry.gif'       => self::$pictograms['d157'],
		'icon_evil.gif'      => self::$pictograms['d223'],
		'icon_twisted.gif'   => self::$pictograms['d225'],
		'icon_rolleyes.gif'  => self::$pictograms['d226'],
		'icon_exclaim.gif'   => self::$pictograms['d228'],
		'icon_question.gif'  => self::$pictograms['d230'],
		'icon_idea.gif'      => self::$pictograms['d235'],
		'icon_arrow.gif'     => self::$pictograms['d272'],
		'icon_mrgreen.gif'   => self::$pictograms['d276'],
	);
	$smiles = apply_filters('ktai_smiley_table', $smiles, __CLASS__);
	$smiles = apply_filters('smiley_table/ktai_style.php', $smiles);
	return parent::replace_smiley($buffer, $smiles);
}

絵文字のコードが書いてあるサイトはファイルの中にもアドレスが書いてありますがここでも紹介しておきます。iモード絵文字コード、ezweb au絵文字コード、softbank絵文字コードに表示されています。ちなみにemobile、willcomはiモードの絵文字コードと同じコードを使って書き換えました。以上が今回変えた方法です。 但しWordPressをアップデートする際には気をつけ下さい。Smiliesアイコンは元の画像に変わってしまいます。Smiliesアイコン画像を変えた方はWordPressをアップデートした際にはかならずSmiliesアイコン画像のアップロードもお忘れなく。

最終更新日: 2013年2月1日