WordPress

2010.12.09

TinyMCE AdvancedにTwitterへつぶやく「ツイートボタン」を追加してみる・2


TinyMCE Advancedのビジュアルエディタでのツールバーに、「ツイートボタン」の挿入ボタンを追加します。前置きは「TinyMCE AdvancedにTwitterへつぶやく「ツイートボタン」を追加してみる・1」をお読み下さいませ。

以下、手順です。(TinyMCE Advancedインストール済みを前提にしています。Wordpressは3.0.2です。)

  1. 元になるソースの用意します。
    • ボタンをポチっとした際に挿入されるHTMLソースを準備します。今回は「ツイートボタン」の挿入をしたいので、まず本家サイトへ行って、自分好みにカスタムしたソースをいただいてきます。
  2. TinyMCEに追加する用のボタン画像を用意します。ボタンサイズは20*20ピクセルで、GIFでもPNG(8or24)でもOK.ボタン枠はTinyMCEがつけてくれるので、中身だけで大丈夫です。私はこんなのを用意しました。→
  3. 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,プラグイン関数名
    })();
  4. つぎにPHPファイルを用意します。プラグインにしてしまうやり方と、テーマのfunctions.phpにするやり方の両方が紹介されていますので、上記サイトさまの記事をご参照ください。ちなみにわたしはfunctions.phpに書き込みました。Twentytenの場合、なのかわかりませんが(はづ)サンプルコードのphpの閉じタグ『?>』が不要になりますので、消して追記しました。
  5. functions.phpを更新して、先に作った「editor_plugin.js」を使用テーマ直下、ボタン用の画像をテーマ内のimagesフォルダにアップします。これで準備は整いました!投稿の編集画面を開いてみると・・・・じゃじゃーん!
     か・ん・げ・き・・・・

早速、一番うえで「ぽち」っとしてみました!結果はこの記事をご覧の通りです。う・れ・し・い。

しかしこの純正のままのボタンは気に入りません。カスタム魂が不満の叫びをあげています。それに・・あれあれ?ツイートカウントが表示されちゃうのはなぜかしら?うーん。・・・・調べます。つづきはまた今度。


関連記事

Tags: ,,,

LINE STAMPLine Stamp

樋口こたつ&ミノムシのラインスタンプ、絶賛販売中です❤ スタンプキャラによる漫画もpixivにて超不定期連載中!!お暇なお嬢ちゃんお坊ちゃん方は是非お立ち寄りくださいッ

スライドショー内のスタンプをクリックすると、LINEストア内のスタンプページにジャンプします。