WordPressでPCから携帯対応の絵文字入力

せっかくなので手順をメモしときます。

携帯に絵文字も含めて対応できる「ktai_style」と、PC投稿時に顔アイコンを一覧から選べるようにする「WP Grings」の二つをムリヤリ組み合わせてみます。つまり、WP Gringsで使用するアイコンをktai_style互換にしちゃおうって作戦。

結構いろいろいじってるし、自分のためにやっつけで対応したためチャレンジする人は自己責任でどうぞ。

まず、なにはともあれ２つのプラグインを普通にインストール。

標準だとWP GringsはWordpress標準のスマイルマークが使えるようになってます。これはただアイコンタグの入力を補完しているだけっぽい。てことはまるまるktai_styleのアイコンを表示して、クリックしたとき入力されるタグもktai_styleのものに差し替えることができれば目的達成？

というわけでWP Gringsをいじります。

wp-grins.phpを4か所修正
行番号は未編集のVersion1.5のwp-grins.phpを対象にしています。

まずはktai_styleのタグ用にスペースを排除する処理をコメントアウト。

//$tag = str_replace(' ', '', $tag);

次に画像ファイルのパスをktai_styleのインストール場所に変更。

$grins .= '<img src="'.get_bloginfo('wpurl').'/wp-content/plugins/ktai_style/pics/SA/'.$grin.'" alt="'.$tag.'" onclick="grin(\''.$tag.'\');"/> ';

※パスはインストールした環境によって変わります。

my-hacks.phpに以下を追加。

<?php
	$wpsmiliestrans = array(
		'<img localsrc=&quot;d140&quot; />' => 'happy01.gif',
		'<img localsrc=&quot;d141&quot; />' => 'angry.gif',
		'<img localsrc=&quot;d142&quot; />' => 'despair.gif',
		'<img localsrc=&quot;d143&quot; />' => 'sad.gif',
		'<img localsrc=&quot;d221&quot; />' => 'think.gif',
		'<img localsrc=&quot;d222&quot; />' => 'confident.gif',
		'<img localsrc=&quot;d223&quot; />' => 'coldsweats01.gif',
		'<img localsrc=&quot;d224&quot; />' => 'coldsweats02.gif',
		'<img localsrc=&quot;d225&quot; />' => 'pout.gif',
		'<img localsrc=&quot;d226&quot; />' => 'gawk.gif',
		'<img localsrc=&quot;d227&quot; />' => 'lovely.gif',
		'<img localsrc=&quot;d229&quot; />' => 'bleah.gif',
		'<img localsrc=&quot;d230&quot; />' => 'wink.gif',
		'<img localsrc=&quot;d231&quot; />' => 'happy02.gif',
		'<img localsrc=&quot;d232&quot; />' => 'bearing.gif',
		'<img localsrc=&quot;d233&quot; />' => 'catface.gif',
		'<img localsrc=&quot;d234&quot; />' => 'crying.gif',
		'<img localsrc=&quot;d235&quot; />' => 'weep.gif',
		'<img localsrc=&quot;d271&quot; />' => 'delicious.gif',
		'<img localsrc=&quot;d272&quot; />' => 'smile.gif',
		'<img localsrc=&quot;d276&quot; />' => 'shock.gif',
		'<img localsrc=&quot;d137&quot; />' => 'heart02.gif',
		'<img localsrc=&quot;d144&quot; />' => 'wobbly.gif',
		'<img localsrc=&quot;d145&quot; />' => 'up.gif',
		'<img localsrc=&quot;d146&quot; />' => 'note.gif',
		'<img localsrc=&quot;d150&quot; />' => 'shine.gif',
		'<img localsrc=&quot;d151&quot; />' => 'flair.gif',
		'<img localsrc=&quot;d152&quot; />' => 'annoy.gif',
		'<img localsrc=&quot;d153&quot; />' => 'punch.gif',
		'<img localsrc=&quot;d154&quot; />' => 'bomb.gif',
		'<img localsrc=&quot;d156&quot; />' => 'down.gif',
		'<img localsrc=&quot;d157&quot; />' => 'sleepy.gif',
		'<img localsrc=&quot;d159&quot; />' => 'sign02.gif',
		'<img localsrc=&quot;d160&quot; />' => 'sign03.gif',
		'<img localsrc=&quot;d162&quot; />' => 'sweat01.gif',
		'<img localsrc=&quot;d163&quot; />' => 'sweat02.gif',
		'<img localsrc=&quot;d164&quot; />' => 'dash.gif',
		'<img localsrc=&quot;d166&quot; />' => 'sign05.gif',
		'<img localsrc=&quot;d240&quot; />' => 'run.gif',
		'<img localsrc=&quot;d084&quot; />' => 'eye.gif',
		'<img localsrc=&quot;d085&quot; />' => 'ear.gif',
		'<img localsrc=&quot;d086&quot; />' => 'rock.gif',
		'<img localsrc=&quot;d087&quot; />' => 'scissors.gif',
		'<img localsrc=&quot;d088&quot; />' => 'paper.gif',
		'<img localsrc=&quot;d091&quot; />' => 'foot.gif',
		'<img localsrc=&quot;d228&quot; />' => 'good.gif',
		'<img localsrc=&quot;d237&quot; />' => 'clip.gif',
		'<img localsrc=&quot;d241&quot; />' => 'secret.gif',
		'<img localsrc=&quot;d005&quot; />' => 'thunder.gif',
	);
?>

個人的に使いそうなやつだけピックアップしました。
ここで行を増やすなり減らすなりすれば反映されます。
あんま多いと重くなるので注意です。

と、ここまででとりあえず使えるようになるはず。

ただ、wp.vicunaとか使ってるとこのままではコメント投稿欄にIE以外のブラウザだと反映されません。

なのでさらにちょっと修正。

else if (document.getElementById('comment')) {
	var type = 'before';
	var node = $('comment');
}
else if (document.getElementById('comment-text')) {
	var type = 'before';
	var node = $('comment-text');
}
else {
	return;
}

else if ($('comment') && $('comment').type == 'textarea') {
	myField = $('comment');
}
else if ($('comment-text') && $('comment-text').type == 'textarea') {
	myField = $('comment-text');
}
else {
	return false;
}

こんな感じ。

それと注意事項としてはktai_styleのタグはビジュアルエディタと相性がよくないので使用しないようにしてください。
というか、そもそも今回のコレはタグの挿入を補完するものなので

…一応以上ですが、よく要素も確認せずにとりあえず使えるようにしたって感じでなんか不具合あるかもです。

時間あったらも少しちゃんとしてプラグインにでもしようかな。

関連記事:

1. WP-Cacheプラグイン導入
2. 絵文字テスト２
3. メール投稿の課題？
4. メール投稿ためし?
5. 暫定PC絵文字入力対応