cue. つくるんです

Word Pressに旅立ってから10年。こそこそ戻る準備中。

【plugin】TinyMCE Advancedの絵文字を自分好みに変える方法

WordPressのビジュアルエディタを拡張するTinyMCE Advanced。
このプラグインをインストールすることで、簡単に「絵文字」を挿入できるようになります。
もともとついている絵文字は可愛くないので、自分好みに絵文字を変更する方法をご紹介いたします。


Wordpress 3.3.1TinyMCE Advancedをお使いの場合の
調整方法を書いておきますので宜しかったらご参照くださいませ。

TinyMCE Advancedとは?

WordPressのビジュアルエディタを高度に拡張することができるプラグインです。
絵文字の挿入はもちろん、テーブルタグを簡単に挿入できるようになるボタンや、お気に入りのスタイルを選択できるようになるプルダウンを追加することができる優れものです。(スタイルのプルダウンは、一部の環境ではきちんと動作しないようで残念なのですが……)

プラグインについての詳細は下記のサイトをご参照ください。
TinyMCE Advanced*ビジュアルエディタを強化-日本語版配布
「TinyMCE Advanced」をカスタマイズする

WordPress TinyMCE Advancedの絵文字を変更する方法

絵文字の画像が、
/wp-includes/images/smiliesに入っていますので、
好きな画像で上書きしてしまうのが一番簡単な方法です。

でもこの絵文字だけじゃ物足りない、もっと増やしたい〜! という場合や、使わない絵文字があるから消しちゃいたいなーという場合もありますよね。

そういうときは、もうちょっと手を入れる必要があります。

1. /wp-content/plugins/tinymce-advanced/mce/emotions/の中にある、emotions.htmを開いてください。

emotions.htmは、 MCEのをクリックすると開くポップアップの内容です(左記画像参照 ※1コだけ画像変えちゃってます)。

ポップアップの中の絵文字をクリックすると、エディタに「hoge」というワードが入力されて、投稿するとそれが絵文字に置換される仕組みのようです(❍ʻ◡ʻ❍)

2. emotions.htmに追加したいアイコンの画像と挿入するワードを増やします。

わたしは要らないものを消してスッキリさせました。

3. /wp-includes/functions.phpを開きます。

3620行目付近に
function smilies_init() {
から始まるエリアがあり、
'hoge' => 'icon_mrgreen.gif',
というフォーマットで、ワードに対応する画像が指定されているので、
1.で追加した挿入するワードとアイコンの画像名を入力してください。

例えば、:heart:というワードを入力したら、icon_heart.gifを表示させる場合は、
':heart:' => 'icon_heart.gif',
になります❤

わたしはこんな風にしました。

4. 元々あったディレクトリにFTPでアップしなおせば完了です!


デザインに合わせて手書き調のアイコンにしました☆

最後に:wordpressプラグインがアップグレードした際に、上書きされてしまう可能性があるため、
編集したファイルに関しては、必ずバックアップを取っておいてくださいね。