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

Contents

1 AddQuicktag
2 functions.phpに自力でボタンを表示する
3 自力で作ったボタンにモーダルウィンドウを表示させる
- 3.1 ボタンの表示
- 3.2 今回のコード

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

　それだけあれば十分という方には、それでいいのですが、私には少ないと感じます。
　今回は、そんなボタンを表示する方法、そして、「link」ボタンのようにモーダルウィンドウを表示させる方法を紹介したいと思います。

AddQuicktag

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

WordPress.org 日本語

AddQuicktag

https://ja.wordpress.org/plugins/addquicktag/

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

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

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

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' );

　まず、１行目で「add_quicktags」という関数を定義しています。
２行目で参照エラーを避けるために ‘quicktags’ スクリプトが使用中かどうかチェックします。
４,５,６行目が大切です。ここで、ボタンを表示しています。
４行目と６行目はjavascriptを呼び出しています。
５行目で、「QTags.addButton」を使いボタンを追加します。
１０行目で「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の部分です。ここでは第３引数に「my_callback」という関数を呼び出しています。この関数にモーダルウィンドウを表示するスクリプトを記入していきます。
　では、関数「my_callback」を見てみましょう。

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

１行目で関数my_callbackを定義しています。
２行目の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へ$ $\text{[math]}$