HoBoFoTo

Hobo everyday foto.

日本語 English

テキストモードにモーダルウィンドウを持つボタンを設置する

 私は、このサイトを更新するときは、もっぱらテキストモードを使って更新しています。
 というのも、ビジュアルモードはどんな風に表示されるかがわかるので使い勝手はいいのですが、改行などの処理が思っているのと少し違った形で表示されてしまい、それを直すのにわざわざテキストモードに戻して、変換しないといけないので、二度手間のような気がするためです。
 ですが、テキストモードで一つだけビジュアルモードに負けていると思う部分があります。それは、ボタンが少ない!
 初期設定では、13個しかありません。
ビジュアルモード
 それだけあれば十分という方には、それでいいのですが、私には少ないと感じます。
 今回は、そんなボタンを表示する方法、そして、「link」ボタンのようにモーダルウィンドウを表示させる方法を紹介したいと思います。

AddQuicktag

テキストモードでボタンを追加するだけならば、

WordPress.org
AddQuicktag
AddQuicktag は HTML エディター・ビジュアルエディターへのクイックタグの追加を容易にします。

というプラグインを使うと簡単にボタンを追加することができます。「AddQuicktag」については

www.google.com
AddQuicktag - Google 検索

で紹介されているので、ここでの紹介はやめておきます。

functions.phpに自力でボタンを表示する

 もう一つの方法は、「functions.php」に「QTags.addButton」を追加する方法です。
 例えば、このサイトでも使っている、「h3」ボタンを追加しようとすると、「functions.php」に以下のコマンドを記入します。

function add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
        QTags.addButton( 'h3', 'h3', '<h3>', '</h3>', '3', 'h3', 202 );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'add_quicktags' );

 まず、1行目で「add_quicktags」という関数を定義しています。
2行目で参照エラーを避けるために ‘quicktags’ スクリプトが使用中かどうかチェックします。
4,5,6行目が大切です。ここで、ボタンを表示しています。
4行目と6行目はjavascriptを呼び出しています。
5行目で、「QTags.addButton」を使いボタンを追加します。
10行目で「add_action」を使って「admin_print_footer_scripts」アクションに今回の関数をフックします。

 これで、「h3」ボタンが表示され、1回クリックすると開始タグの<h3>が表示されボタンが「/h3」に変わります。変わったボタンを押すと終了タグの</h3>が入力されます。文字列を選択すると、その選択した文字列を囲むように<h3>選択文字列</h3>となります。
なかなか使い勝手がいいボタンができあがります。

自力で作ったボタンにモーダルウィンドウを表示させる

「link」ボタンをクリックすると、モーダルウィンドウが表示され、そこからいろいろな処理をしてテキストエリアに表示されます。これをなんとか自力で作れないかと思ってやってみました。

ボタンの表示

まずは、ボタンを表示させます。これは、上でやったやり方とほぼ同じですが、一部違います。

function add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
        QTags.addButton( 'Wp_my_callback','my_callback', my_callback );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'add_quicktags' );

 違っているのは、QTags.addButtonの部分です。ここでは第3引数に「my_callback」という関数を呼び出しています。この関数にモーダルウィンドウを表示するスクリプトを記入していきます。
 では、関数「my_callback」を見てみましょう。

function my_callback() {
    tb_show('モーダルウィンドウ', '#TB_inline?width=400&height=500&inlineId=my-form', '');
}

1行目で関数my_callbackを定義しています。
2行目のtb_showで幅400px高さ500pxの大きさを持ったモーダルウィンドウを表示しています。inlineId=my-formは次回で使うのでここでは割愛します。

 どうでしょう。これでモーダルウィンドウを表示することが出来ました。

でも中身が全くありません。次回は中身の表示の仕方とテキストモードの文字列の取得、挿入について書こうと思います。

今回のコード

今回のコードの全容を載せておきます。

function add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
        function my_callback() {
            tb_show('モーダルウィンドウ', '#TB_inline?width=400&height=500&inlineId=my-form', '');
        }
        QTags.addButton( 'Wp_my_callback','my_callback', my_callback );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'add_quicktags' );

 

よかったらクリックしてください。
にほんブログ村 IT技術ブログ WordPressへ

共有:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です