»テキストモードにモーダルウィンドウを持つボタンを設置する投稿日:2018年5月23日カテゴリー:WordPressコメントがありません。今回のコード私は、このサイトを更新するときは、もっぱらテキストモードを使って更新しています。いうのも、ビジュアルモードはどんな風に表示されるかがわかるので使い勝手はいいのですが、改行などの処理が思っているのと少し違った形で表示されてしまい、それを直すのにわざわざテキストモードに戻して、変換しないといけないので、二度手間のような気がするためです。テキストモードで一つだけビジュアルモードに負けていると思う部分があります。それは、ボタンが少ない!初期設定では、13個しかありません。それだけあれば十分という方には、それでいいのですが、私には少ないと感じます。今回は、そんなボタンを表示する方法、そして、「link」ボタンのようにモーダルウィンドウを表示させる方法を紹介したいと思います。エディター・ビジュアルエディターへのクイックタグの追加を容易にします。いうプラグインを使うと簡単にボタンを追加することができます。検索https://www.google.com/search?q=AddQuicktagで紹介されているので、ここでの紹介はやめておきます。functions.phpに自力でボタンを表示するもう一つの方法は、「functions.php」に「QTags.addButton」を追加する方法です。このサイトでも使っている、「h3」ボタンを追加しようとすると、「functions.php」に以下のコマンドを記入します。);まず、1行目で「add_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」ボタンをクリックすると、モーダルウィンドウが表示され、そこからいろいろな処理をしてテキストエリアに表示されます。これをなんとか自力で作れないかと思ってやってみました。ボタンの表示まずは、ボタンを表示させます。これは、上でやったやり方とほぼ同じですが、一部違います。);違っているのは、QTags.addButtonの部分です。ここでは第3引数に「my_callback」という関数を呼び出しています。この関数にモーダルウィンドウを表示するスクリプトを記入していきます。関数「my_callback」を見てみましょう。'');}1行目で関数my_callbackを定義しています。2行目のtb_showで幅400px高さ500pxの大きさを持ったモーダルウィンドウを表示しています。inlineId=my-formは次回で使うのでここでは割愛します。これでモーダルウィンドウを表示することが出来ました。中身が全くありません。次回は中身の表示の仕方とテキストモードの文字列の取得、挿入について書こうと思います。今回のコード今回のコードの全容を載せておきます。);よかったらクリックしてください。コメントをキャンセルメールアドレスが公開されることはありません。(4)ブログをメールで購読メールアドレスを記入して購読すれば、更新をメールで受信できます。