HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

AddQuickTag に値（パラメータ）入力して、作ったタグを挿入する

スポンサーリンク

AddQuickTag は、とても便利なプラグインです。
自分で設定したタグがボタン一つでエディタに入力できるプラグインです。
ところが、値を必要とするタグは、ダメ。

例えば、Aタグなら href の値を入れられない。
タグを挿入してから投稿エリアでURLを入力しないといけない。

そこで、AddQuickTagのボタンでウィンドウでを開き値を入力させてからタグを挿入する機能を付けたい。


AddQuckTag のカスタマイズでやるのは荷が重い


値（パラメータ）を入力するウィンドウを表示させてそのウィンドウの値を取り出してタグを生成してそのタグを挿入。
というのは、AddQuickTagのカスタマイズで実現するのはかなり骨が折れる。
そこで、ボタンを追加して、JavaScriptを動かす方法を考えた。

Addbuttonのポイント


  • ボタンの追加
  • ボタン押下でウィンドウを開く
  • ウィンドウで入力された値（パラメータ）を取り出してタグを作る
  • 作ったタグを編集エリアへ挿入する



ボタンの追加の仕方


編集領域の上にボタンを追加するには、QTags.addButtonを使います。
QTags.addButtonは、以下のような書式です。

QTags.addButton(‘ID’, ‘LABEL’, callbackfunc);

ID：他とぶつからない任意のID
LABEL：表示するボタンのラベル
callbackfunc：コールバック関数名


AddQuickTagのようにボタンを追加する


これは、以下のようなJavaScriptのコマンドがあります。

QTags.addButton(‘ID’, ‘LABEL’, コールバック関数名);

単純に 入力する値が１つで AddQuickTagのようにタグを挿入するならば、
QTags.addButton(‘ID’, ‘LABEL’, callbackfunc);
function callbackfunc(f, g, fd){
　// パラメータの入力
　scnt = window.prompt("値を入力してください", "");
　// タグの作成
　line = ”;
　　：
　//タグの挿入
　this.tagStart = line;
　QTags.TagButton.prototype.callback.call(this, f, g, fd);
}


値を prompt を使って入力させれば、その場でタグを作ることができます。

値が複数になる場合は、きちんと formタグ を使って form を表示させないといけません。

  • ボタン押下でウィンドウを開く
    • javascript の場合 モーダルウィンドウで form を作成させます。 呼出し
    　QTags.addButton(‘rnk’, ‘Ranking’, rankingfunction);
    　function rankingfunction(f, g, fd){
    　　//キーボード操作などにより、オーバーレイが多重起動するのを防止する
    　　$(this).blur() ; //ボタンからフォーカスを外す
    　　if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;
    　　　//オーバーレイ用のHTMLコードを、[body]内の最後に生成する
    　　　$("body").append(‘<div id="modal-overlay"></div>’);
    　　　//[$modal-overlay]をフェードインさせる
    　　　$("#modal-overlay").fadeIn("slow");
    　　　//[$modal-content]をフェードインさせる
    　　　$("#modal-content").fadeIn("slow");
    　　　centeringModalSyncer();
    }


    モーダルウィンドウの設定
    <!– ここからモーダルウィンドウ –>
    <div id="modal-content">
    　<!– モーダルウィンドウのコンテンツ開始 –>
    　<p><a id="modal-close" class="button-link">閉じる</a></p>
    　<form name="formS">
    　　<input type="text" name="title1" id="title1">
    　　<textarea name="biko" id="biko" cols="80" rows="5"></textarea>
    　</form>
    　<!– モーダルウィンドウのコンテンツ終了 –>
    　</div>
    　<!– ここまでモーダルウィンドウ –>

    <script>
    //ウィンドウで入力された値（パラメータ）を取り出してタグを作る
    //閉じるをクリックされた時の処理
    $( "#modal-overlay,#modal-close" ).unbind().click( function(){
    　//挿入テキスト(値取り出し)
    　line1 = $(‘#title1’).val();
    　line2 = $(‘#biko’).val();

    　//挿入テキスト(作成)
    　line = ”;
    　　：
    　//作ったタグを編集エリアへ挿入する
    　//作成したテキストを挿入
    　var textarea = document.getElementById("content");
    　var sentence = textarea.value;
    　var len = sentence.length;
    　var pos = textarea.selectionStart;
    　var before = sentence.substr(0, pos);
    　var word = line;
    　var after = sentence.substr(pos, len);
    　sentence = before + word + after;
    　textarea.value = sentence;
    　//モーダルウィンドウを閉じる
    　$( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
    　　//[#modal-overlay]を削除する
    　　$(‘#modal-overlay’).remove() ;
    　　} ) ;
    　} ) ;

    　$( window ).resize( centeringModalSyncer ) ;
    　　//センタリングを実行する関数
    　　function centeringModalSyncer() {
    　　　//画面(ウィンドウ)の幅、高さを取得
    　　　var w = $( window ).width() ;
    　　　var h = $( window ).height() ;
    　　　// コンテンツ(#modal-content)の幅、高さを取得
    　　　// jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
    　　　var cw = $( "#modal-content" ).outerWidth();
    　　　var ch = $( "#modal-content" ).outerHeight();
    　　　//センタリングを実行する
    　　　$( "#modal-content" ).css( {"left": ((w – cw)/2) + "px","top": ((h – ch)/2) + "px"} ) ;
    　}
    </script>
    <style>
    #modal-content {
    　width: 50% ;
    　margin: 0 ;
    　padding: 10px 20px ;
    　border: 2px solid #aaa ;
    　background: #fff ;
    　position: fixed ;
    　display: none ;
    　z-index: 1002 ;
    }

    #modal-overlay {
    　z-index: 1001 ;
    　display: none ;
    　position: fixed ;
    　top: 0 ;
    　left: 0 ;
    　width: 100% ;
    　height: 120% ;
    　background-color: rgba( 0,0,0, 0.75 ) ;
    }

    .button-link {
    　color: #00f ;
    　text-decoration: underline ;
    }

    .button-link:hover {
    　cursor: pointer ;
    　color: #f00 ;
    }
    </style>



    プラグイン化する


    function.php に書き込んでもいいですし、プラグインにしても使えます。
    // テキストエディタにクイックタグボタンを追加
    function add_my_quicktag() {?>
    <script type="text/javascript">
    QTags.addButton(‘ID’, ‘LABEL’, callbackfunc);
    function callbackfunc(f, g, fd){
    $(this).blur() ; //ボタンからフォーカスを外す
    if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;

    $("body").append(‘<div id="modal-overlay"></div>’);

    $("#modal-overlay").fadeIn("slow");

    $("#modal-content").fadeIn("slow");

    centeringModalSyncer();
    }
    </script>
    <?php
    }
    add_action(‘admin_print_footer_scripts’, ‘add_my_quicktag’);


    /********************************************************/
    // 設定
    /********************************************************/
    add_action( ‘admin_menu’ , ‘bootstrap_box’); // 投稿画面追加
    /********************************************************/
    function bootstrap_box()
    /********************************************************/
    {
    add_meta_box(
    ‘bootstrap_append1’,
    ‘パラメータタグ’,
    ‘bootstrap_append’, ‘post’, ‘normal’, ‘high’ ); // —-(1)

    add_meta_box(
    ‘bootstrap_append2’,
    ‘パラメータタグ’,
    ‘bootstrap_append’, ‘page’, ‘normal’, ‘high’ ); // —-(1)
    }
    /********************************************************/
    function bootstrap_append()
    /********************************************************/
    {
    ?>
    <!– ここからモーダルウィンドウ –>
    <div id="modal-content">
    <!– モーダルウィンドウのコンテンツ開始 –>
    <p><a id="modal-close" class="button-link">閉じる</a></p>
    <form name="formS">
    <input type="text" name="title1" id="title1">
    <textarea name="biko" id="biko" cols="80" rows="5"></textarea>
    </form>
    <!– モーダルウィンドウのコンテンツ終了 –>
    </div>
    <!– ここまでモーダルウィンドウ –>

    <script>
    //[#modal-overlay]、または[#modal-close]をクリックしたら…
    $( "#modal-overlay,#modal-close" ).unbind().click( function(){
    //挿入テキスト(値取り出し)
    line1 = $(‘#title1’).val();
    line2 = $(‘#biko’).val();

    //挿入テキスト(作成)
    line = ”;
    line += ‘<div>’+line1+'</div>’;
    line += ‘<div style="background-color:#ffc;">’+line2+'</div>’;

    //作成したテキストを挿入
    var textarea = document.getElementById("content");
    var sentence = textarea.value;
    var len = sentence.length;
    var pos = textarea.selectionStart;
    var before = sentence.substr(0, pos);
    var word = line;
    var after = sentence.substr(pos, len);
    sentence = before + word + after;
    textarea.value = sentence;

    //[#modal-content]と[#modal-overlay]をフェードアウトした後に…
    $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
    //[#modal-overlay]を削除する
    $(‘#modal-overlay’).remove() ;

    } ) ;

    } ) ;

    //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
    $( window ).resize( centeringModalSyncer ) ;

    //センタリングを実行する関数
    function centeringModalSyncer() {

    //画面(ウィンドウ)の幅、高さを取得
    var w = $( window ).width() ;
    var h = $( window ).height() ;

    // コンテンツ(#modal-content)の幅、高さを取得
    // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
    // var cw = $( "#modal-content" ).outerWidth( {margin:true} );
    // var ch = $( "#modal-content" ).outerHeight( {margin:true} );
    var cw = $( "#modal-content" ).outerWidth();
    var ch = $( "#modal-content" ).outerHeight();

    //センタリングを実行する
    $( "#modal-content" ).css( {"left": ((w – cw)/2) + "px","top": ((h – ch)/2) + "px"} ) ;

    }
    </script>
    <style>
    #modal-content {
    width: 50% ;
    margin: 0 ;
    padding: 10px 20px ;
    border: 2px solid #aaa ;
    background: #fff ;
    position: fixed ;
    display: none ;
    z-index: 1002 ;
    }

    #modal-overlay {
    z-index: 1001 ;
    display: none ;
    position: fixed ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 120% ;
    background-color: rgba( 0,0,0, 0.75 ) ;
    }

    .button-link {
    color: #00f ;
    text-decoration: underline ;
    }

    .button-link:hover {
    cursor: pointer ;
    color: #f00 ;
    }
    </style>
    <?php
    }
    /********************************************************/



    AddQuickTag に値（パラメータ）入力して、作ったタグを挿入する まとめ


    AddQuickTag をカスタマイズするのは骨が折れます。
    そこで、 JavaScript のモーダルウィンドウを使用して値（パラメータ）を入力させます。
    入力した値（パラメータ）は、モーダルウィンドウで入力されているため 閉じる 等のアクションで取り出すことができます。
    タグの挿入は、テキストエリアのカーソルポイントを利用して挿入します。

    AddQuckTagの原理がわかってしまうと様々なタグを入れたくなります。
    値（パラメータ）入力型のタグ挿入もその一つです。

    QTags.addButton の使い方がわかってしまうと、AddQuckTagを自作したくなりますよね？


    スポンサーリンク

    トップページに戻る

    スポンサーリンク

    よく使うタグ

    ・float クリア
    <br clear="all"><div style="clear:both;" class="clearfix"></div>
    ・角丸め
    round-radius
    border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;
    ・div box
    overflow:scroll;min-width:300px;max-width:300px;min-height:300px;max-height:300px;
    ・TEXTAREAリサイズ
    resize: vertical;
    ・サイトURL
    home_url() // http://…
    if(site_url()==home_url){
    $shorturl_yuzu_path = substr(ABSPATH,0,strpos( ABSPATH, substr(site_url(),strlen(home_url()) ) ) ).’/’;
    }else{
    $shorturl_yuzu_path = ABSPATH.’/’;
    }
    // /var/…
    ・WP HOME URL
    site_url() // http://…/wp
    ABSPATH // /var/…/wp
    ・プラグイン(自分のDIR追加必要)
    plugins_url() // http://…/plugins
    WP_PLUGIN_URL // http://…/plugins
    WP_PLUGIN_DIR // /var/…/plugins
    ・使用中のテーマ
    get_template_directory_uri() // http://…/theme/xx
    get_template_directory() // /var/…/theme/xx
    ・wp-content
    content_url() // http://…/wp-content
    WP_CONTENT_DIR // /var/…/wp-content
    ・画像URLからDIR変換
    $pctdir=str_replace(content_url(), WP_CONTENT_DIR,$pcturl);
    ・パス名分解
    $pathData = pathinfo($file);
    echo $pathData["dirname"]; // /var/～
    echo $pathData["filename"]; // xxx
    echo $pathData["extension"]; // txt
    echo $pathData["basename"]; // xxx.txt
    ・画像サイズ
    list($width,$height) = getimagesize($url);
    if(has_post_thumbnail()){
    $thumbnail_id = get_post_thumbnail_id();
    $thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘full’ );
    $src = $image[0]; //url
    $width = $image[1]; //横幅
    $height = $image[2]; //高さ
    ・画像サイズ比率
    list($src_w,$src_h) = getimagesize($file);
    $dst_w = 600;$dst_h = 0;
    $dst_h = ($dst_w!=0)?(intval(($src_h*$dst_w)/$src_w )):(($dst_h!=0)?(intval(($src_w*$dst_h)/$src_h)):0);
    ・疑似要素順
    link visited hover active

    特殊文字
    シングルクォート : &#39;
    ダブルクォート : &quot;
    WP設定内表示前処理(htmlタグ許可項目)
    $str = str_replace(‘<','&lt;' ,$str);
    $str = str_replace(‘>’,’&gt;’ ,$str);
    $str = str_replace(‘\”‘,’&quot;’,$str);
    $str = str_replace(“\'”,’&#39;’ ,$str);
    WO設定項目表示前処理(htmlタグ許可項目)
    $str = str_replace(‘\”‘,'”‘,$str);
    $str = str_replace(“\'”,”‘”,$str);
    ・テーマ
    get_theme_root_uri()
    get_theme_root()
    ・WP 情報
    get_bloginfo( $show )
    ・Wp config FTP 情報 設置
    define( ‘FTP_HOST’, ‘host’ );
    define( ‘FTP_USER’, ‘id’ );
    define( ‘FTP_PASS’, ‘pw’ );
    define( ‘FTP_SSL’, false );
    弾に使う
    placeholder:ユーザー入力補助

    カテゴリー

    install_driver(mysql) failed: DBD::mysql object version 4.023 does not match bootstrap parameter 4.050 at /usr/lib64/perl5/DynaLoader.pm line 213. Compilation failed in require at (eval 23) line 3.

    install_driver(mysql) failed: DBD::mysql object version 4.023 does not match bootstrap parameter 4.050 at /usr/lib64/perl5/DynaLoader.pm line 213. Compilation failed in require at (eval 23) line 3. 今まで動いていたデータベースにアクセスできなくなっていた。これは、エックスサーバーでの出来事だ。調べたら、install_driver(mysql) failed: DBD::mysql object
    詳しくは・・・

    Javascript で textarea のスクロールバーを動かす

    Javascript で textarea のスクロールバーを動かす Javascript で textarea のスクロールバーを動かす必要が出ました。HTMLエディタを自作しているんですが、テキストエリアの中の文字列を検索したとき、その位置にテキストのスクロールバー
    詳しくは・・・

    カラフルボックスなど cpanel サーバーでPerlでMySQLにアクセスできないときの対策

    カラフルボックスなど cpanel サーバーでPerlでMySQLにアクセスできないときの対策 カラフルボックスでPerlでMySQLにアクセスできないときの対策カラフルボックスでPerlでMySQLにアクセスできない！エラーメッセージは、mysql のドライバーがない。こんなメッセージが返って
    詳しくは・・・

    MW WP FORM のフックが効かない。

    MW WP FORM のフックが効かない。 MW WP FORM のフックが効かない。MW WP FORM は、各種フックがあってカスタマイズが便利～とか言われているプラグインですが。。。マニュアルにはあるのにフックが効かないフックがかなりある
    詳しくは・・・

    MW WP FORM のショートコードで出力される内容をカスタマイズする。

    MW WP FORM のショートコードで出力される内容をカスタマイズする。 MW WP FORM のショートコードで出力される内容をカスタマイズしたくなりました。非表示フィールド type=”hidden” にデータをためておいて、それをメール送信する
    詳しくは・・・

    WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所

    WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所 WelCart 買い物かごのカスタマイズするとき、毎回テンプレートファイルを探すのでメモしておきます。WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所WelCart 買い物かごのカ
    詳しくは・・・