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ファイルを作成します。ファイル名は任意でいいと思います。私の場合は↓こんな感じになりました。
  4. つぎにPHPファイルを用意します。プラグインにしてしまうやり方と、テーマのfunctions.phpにするやり方の両方が紹介されていますので、上記サイトさまの記事をご参照ください。ちなみにわたしはfunctions.phpに書き込みました。Twentytenの場合、なのかわかりませんが(はづ)サンプルコードのphpの閉じタグ『?>』が不要になりますので、消して追記しました。
  5. functions.phpを更新して、先に作った「editor_plugin.js」を使用テーマ直下、ボタン用の画像をテーマ内のimagesフォルダにアップします。これで準備は整いました!投稿の編集画面を開いてみると・・・・じゃじゃーん!
     か・ん・げ・き・・・・

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

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


関連記事

Tags: ,,,

LINE STAMPLine Stamp

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

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