Illustration, Graphic design & TinyMCE Advancedのビジュアルエディタでのツールバーに、「ツイートボタン」の挿入ボタンを追加します。前置きは「TinyMCE AdvancedにTwitterへつぶやく「ツイートボタン」を追加してみる・1」をお読み下さいませ。
以下、手順です。（TinyMCE Advancedインストール済みを前提にしています。Wordpressは3.0.2です。）
- 元になるソースの用意します。
- ボタンをポチっとした際に挿入されるHTMLソースを準備します。今回は「ツイートボタン」の挿入をしたいので、まず本家サイトへ行って、自分好みにカスタムしたソースをいただいてきます。
- ボタンをポチっとした際に挿入されるHTMLソースを準備します。今回は「ツイートボタン」の挿入をしたいので、まず本家サイトへ行って、自分好みにカスタムしたソースをいただいてきます。
- TinyMCEに追加する用のボタン画像を用意します。ボタンサイズは２０*２０ピクセルで、GIFでもPNG（8or24)でもOK.ボタン枠はTinyMCEがつけてくれるので、中身だけで大丈夫です。私はこんなのを用意しました。→
- WebTecNoteさまの“[WP]TinyMCEのビジュアルリッチエディタにカスタムボタンを追加する”を参考に、まずeditor_plugin.jsというJavascriptファイルを作成します。ファイル名は任意でいいと思います。私の場合は↓こんな感じになりました。
(function() { tinymce.create('tinymce.plugins.TweetButton', {//プラグイン関数名 getInfo : function() {//プラグイン情報 return { longname : 'Himpotan Tweet button', author : 'himpotan', authorurl : 'http://himpotan.sblog.jp/', infourl : 'http://himpotan.sblog.jp/', version : "1.0" }; }, init : function(ed, url) { var t = this; t.editor = ed; ed.addCommand('addTweet',//コマンドID function() { var str = t._SampleTable(); ed.execCommand('mceInsertContent', false, str); }); ed.addButton('TweetButton', {//ボタンの名前 title : 'Tweetボタンを挿入', //tileのテキスト cmd : 'addTweet', //コマンドID image : url + '/images/mce_btn_tweet.png'}); //ボタン画像 }, _SampleTable : function(d, fmt) {//挿入するテキスト str = '<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="himpotan">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>'; return str; } }); tinymce.PluginManager.add('TweetButton', tinymce.plugins.TweetButton);//プラグインID,プラグイン関数名 })(); - つぎにPHPファイルを用意します。プラグインにしてしまうやり方と、テーマのfunctions.ｐｈｐにするやり方の両方が紹介されていますので、上記サイトさまの記事をご参照ください。ちなみにわたしはfunctions.phpに書き込みました。Twentytenの場合、なのかわかりませんが（はづ）サンプルコードのｐｈｐの閉じタグ『?>』が不要になりますので、消して追記しました。
- functions.phpを更新して、先に作った「editor_plugin.js」を使用テーマ直下、ボタン用の画像をテーマ内のimagesフォルダにアップします。これで準備は整いました！投稿の編集画面を開いてみると・・・・じゃじゃーん！
か・ん・げ・き・・・・
早速、一番うえで「ぽち」っとしてみました！結果はこの記事をご覧の通りです。う・れ・し・い。
しかしこの純正のままのボタンは気に入りません。カスタム魂が不満の叫びをあげています。それに・・あれあれ？ツイートカウントが表示されちゃうのはなぜかしら？うーん。・・・・調べます。つづきはまた今度。
