javascript - WordPress バックエンドの TinyMCE モーダルウィンドウ内で PHP 関数を呼び出す

Question

TinyMCE プラグインに登録されている静的 .js ファイルを使用しています。新しいボタンをクリックすると、ショートコードの生成に使用するフォームが表示されたモーダルウィンドウが開きます。問題は、フォームフィールドの一部を PHP 関数から入力する必要があることです。私はこれに関する記事を何時間も見てきましたが、実行可能な解決策が見つかりませんでした. 現在、私のphp関数はショートコードであるため、通常の古い関数になるように適応させる必要があります. しかし、大きな課題は、.js ファイルがフォーム内の関数を取得できるように、これをどのように配置するかを考え出すことです。ここに基本的なものがあります。まず、.js ファイルのいくつかのチャンク:

(function(){
    // creates the plugin
    tinymce.create('tinymce.plugins.myshortcode', {
        // creates control instances based on the control's id.
        createControl : function(id, controlManager) {
            if (id == 'myshortcode') {
                // creates the button
                var button = controlManager.createButton('myshortcode', {
                    title : 'My Shortcode', // title of the button
                    image : '../wp-content/plugins/my-shortcode/js/images/myshortcode.png',  // path to the button's image
                    onclick : function() {
                        // triggers the thickbox
                        var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width;
                        W = W - 80;
                        H = H - 80;
                        tb_show( 'My Shortcode', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=myshortcode-form' );
                    }
                });
                return button;
            }
            return null;
        }
    });
    // registers the plugin.
    tinymce.PluginManager.add('myshortcode', tinymce.plugins.myshortcode);
    jQuery(function(){
        var form = jQuery(' \
\
The HTML Web Form all goes in here.\
\
 ');
var table = form.find('table');
        form.appendTo('body').hide();
        form.find('#myshortcode-submit').click(function(){
            var options = { 
                'att1'  : '',
                'att2'   : '',
                'att3'   : '',
                'att4'   : '',
                };
            var shortcode = '[myshortcode';
            
                for( var index in options) {
                var value = table.find('#myshortcode-' + index).val();
                
                if ( value !== options[index] && value != null )
                    shortcode += ' ' + index + '="' + value + '"';
            }
            
            shortcode += '] content here. [/myshortcode]';
            
            tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);
            
            tb_remove();
        });
    });
})()

しかし、「HTML Web フォームがここに入ります」と書かれている場所には、PHP 関数に基づいて生成されたフィールドがいくつか必要です。これまでのところ、2 つのうちの 1 つしか書いていません。前述したように、現在はショートコードとして記述されているため、変更する必要があります (他の大きな質問があるため、これを行う最善の方法はわかりません)。しかし、ここにあります：

add_shortcode('rolescapsdropdown', 'sc_rolescapsdropdown');
function sc_rolescapsdropdown($attr) {
    global $wp_roles;
    $all_roles = $wp_roles->roles; 
    $editable_roles = apply_filters('editable_roles', $all_roles); 
    $user = new WP_User( 1 );
    $capslist = $user->allcaps;
    $dropdown = '<select multiple>';
    foreach($editable_roles as $role=>$theroles){
        $dropdown .= '<option value="'.$role.'">'.$role.'</option>';
    }
    foreach($capslist as $cap=>$caps){
        if($cap !== 'administrator' && $cap !== 'level_0' && $cap !== 'level_1' && $cap !== 'level_2' && $cap !== 'level_3' && $cap !== 'level_4' && $cap !== 'level_5' && $cap !== 'level_6' && $cap !== 'level_7' && $cap !== 'level_8' && $cap !== 'level_9' && $cap !== 'level_10'){ 
            $dropdown .= '<option value="'.$cap.'">'.$cap.'</option>';
        }
    }
    $dropdown .= '</select>';
    return $dropdown;
}

ここで Ajax を学ぶ必要がないようにしたいと考えています。しかし、.js ファイルを .php ファイルにして、JavaScript を<script>タグで囲むだけにしてみましたが、TinyMCE のボタンがすべて消えてしまい、どうやら .php ファイルを使用してプラグインを登録することはできません。

更新 1

私が持っている 1 つのアイデアは、Web フォームを php ファイルに移動して、TMCE プラグインを登録する .js ファイルを呼び出すだけにすることですが、それが機能するかどうかも、. js ファイルを使用して、外部 php ファイル内のフォームの存在を認識します。

更新 2

ScottA のヘルプに基づいて、これをどのように処理しようとしているかを次に示します。

これを次の形式の静的 .js ファイルに追加しました。

$.get( "ajax/test.php", function( data ) {
  var options = data.options;
  for(row in options) {
     $("#option-list").append("<option value=" + options[row].value + ">" + options[row].name + "</option>");
     // debug for unexpected results
     console.log(data.options);
  }
}, "json" );

この test.php ファイルを「ajax」というサブディレクトリに作成しました。

function rolescapsdropdown() {
    global $wp_roles;
    $all_roles = $wp_roles->roles; 
    $editable_roles = apply_filters('editable_roles', $all_roles); 
    $user = new WP_User( 1 );
    $capslist = $user->allcaps;
    $all_options = $editable_roles . $capslist;
    $all_options[]['value'] = $value;
    $all_options[]['name'] = $name;
    echo json_encode( array('options' => $all_options) );
}

そして、この HTML を静的 .js ファイルのフォームに追加しました。

<select id="option-list"></select>

私が得ているのは、空のモーダルウィンドウです。関数を含めても、HTML はまったく表示されません$.get。

アップデート 3

まだ空白のモーダルウィンドウが表示されます。それをショートコードに変換して、出力内容を確認しました。これ...

add_shortcode('rolesdropdown', 'sc_rolesdropdown');
function sc_rolesdropdown() {
    global $wp_roles;
    $all_roles = $wp_roles->roles; 
    $editable_roles = apply_filters('editable_roles', $all_roles); 
    $user = new WP_User( 1 );
    $capslist = $user->allcaps;
    foreach ($editable_roles as $role=>$theroles){
        $all_options = $role;
    }
    foreach ($capslist as $cap=>$caps){
        $all_options .= $cap;
    }
    echo json_encode( array('options' => $all_options) );
}

これをページに出力します：

{"オプション":"trollswitch_themesedit_themesactivate_pluginsedit_pluginsedit_usersedit_filesmanage_optionsmoderate_commentsmanage_categoriesmanage_linksupload_filesimportunfiltered_htmledit_postsedit_others_postsedit_published_postspublish_postsedit_pagesreadlevel_10level_9level_8level_7level_6level_5level_4level_3level_2level_1level_0edit_others_pagesedit_published_pagespublish_pagesdelete_pagesdelete_others_pagesdelete_published_pagesdelete_postsdelete_others_postsdelete_published_postsdelete_private_postsedit_private_postsread_private_postsdelete_private_pagesedit_private_pagesread_private_pagesdelete_userscreate_usersunfiltered_uploadedit_dashboardupdate_pluginsdelete_pluginsinstall_pluginsupdate_themesinstall_themesupdate_corelist_usersremove_usersadd_userspromote_usersedit_theme_optionsdelete_themesexportbe_trollexec_phpedit_others_phpadministrator"}}}

しかし、バックエンドのモーダルウィンドウでは、$.getその関数を含むファイルを呼び出しているときにウィンドウが空白になります。

score 2 · Accepted Answer

あなたは AJAX を学びたくないと言いますが、恐れる必要はありません。jQuery の$.get()機能により、外部ファイルからデータを取得して処理することが非常に簡単になります。PHP 関数が別のファイルに存在する場合は、そのファイルに対して $.get() 呼び出しを行い、同じ jQuery 関数でフォームに入力することができます。

あなたのjQueryは次のように単純です：

$.get( "ajax/test.php", function( data ) {
  $( ".result" ).html( data );
});

あなたのファイル、test.php が JSON 配列、または URL で渡したパラメーターに基づいたプレーンテキスト (例: "ajax/test.php?userid=1&get=name") を返すとします。jQuery を使用してフォームに入力できます。

あなたのjQuery:

$.get( "ajax/test.php?userid=1&get=name", function( data ) {
  $( "#myform input.firstname").val( data.firstname );
  $( "#myform input.lastname").val( data.lastname );
}, "json" );

test.php は次のようになります。

<?php

// your function to retrieve the data from the database, a file, etc.

echo json_encode(array(
  "firstname" => "Burt",
  "lastname" => "Bartigan"
));

?>

あなたは AJAX を使いたくないと言いますが、それがこの問題を解決する最も簡単な方法です。

$.get(); に関する詳細情報

PHP json 関数の詳細

- 編集 -

以下のコメントに答えるには：

あなたのphp:

$all_options[]['value'] = $value;
$all_options[]['name'] = $name;
// or however you can best get it
// from the database into an array

echo json_encode( array('options' => $all_optoins) );

あなたのjQuery：

$.get( "ajax/test.php", function( data ) {
  var options = data.options;
  for(row in options) {
     // append will place this inside the <select> HTML element
     $("#option-list").append("<option value=" + options[row].value + ">" + options[row].name + "</option>");
     // debug for unexpected results?
     console.log(data.options);
  }
}, "json" );

あなたのHTML:

<select id="option-list"></select>

score 1 · Accepted Answer

私はちょうど同じ問題を抱えていましたが、これが私がそれを解決した方法です。まず、いくつかの PHP 値を JavaScript ファイルに渡す必要があります。wp_localize_script使用できないため (スクリプトをキューに入れていません)、直接出力しますadmin_head:

foreach( array('post.php','post-new.php') as $hook )
    add_action( "admin_head-$hook", 'admin_head_js_vars' );

/**
 * Localize Script
 */
function admin_head_js_vars() 
{
        $img = plugins_url( '/js/images/myshortcode.png', __FILE__ );
        ?>
<!-- TinyMCE Shortcode Plugin -->
<script type='text/javascript'>
    var b5f_mce_config = {
        'tb_title': '<?php _e('Roles Shortcode'); ?>',
        'button_img': '<?php echo $img; ?>',
        'ajax_url': '<?php echo admin_url( 'admin-ajax.php')?>',
        'ajax_nonce': '<?php echo wp_create_nonce( '_nonce_tinymce_shortcode' ); ?>' 
    };
</script>
<!-- TinyMCE Shortcode Plugin -->
        <?php
}

これにより、ボタンの作成は次のようになります。

title: b5f_mce_config.tb_title, // title of the button
image: b5f_mce_config.button_img, // path to the button's image

次に、Ajax アクションを追加します。

add_action( 'wp_ajax_b5f_tinymce_shortcode', 'b5f_tinymce_shortcode' );

function b5f_tinymce_shortcode()
{
    $do_check = check_ajax_referer( '_nonce_tinymce_shortcode', 'security', false ); 

    if( !$do_check )
        echo 'error';
    else
        include_once 'my-form.php';
    exit();
}

JS に戻ります (私の例はthisに基づいていることに注意してください):

jQuery(function($)
{
    /* Used in Ajax and Callback */
    var table;

    /**
     * Get the ThickBox contents wit Ajax
     */
    var data_alt = {
        action: 'b5f_tinymce_shortcode',
        security: b5f_mce_config.ajax_nonce
    };
    $.post( 
        b5f_mce_config.ajax_url, 
        data_alt,                   
        function( response )
        {
            if( 'error' == response  )
            {
                $('<div id="mygallery-form"><h1 style="color:#c00;padding:100px 0;width:100%;text-align:center">Ajax error</h1></div>')
                    .appendTo('body').hide();
            }
            else
            {
                form = $(response);
                table = form.find('table');
                form.appendTo('body').hide();
                form.find('#mygallery-submit').click(b5f_submit_gallery);
            }
        }
    ); 

    /**
     * Callback for submit click
     */
    function b5f_submit_gallery()
    {
        // Options defined in admin_head
        var shortcode = '[my_shortcode]';

        // inserts the shortcode into the active editor
        tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);

        // closes Thickbox
        tb_remove();
    }
});

最後に、myform.phpAjax に含まれるファイルには、任意の WordPress 関数を含めることができます。

<?php
/**
 * Used by Ajax
 */
?>
<div id="mygallery-form">
<?php echo site_url(); ?>
</div>

javascript - WordPress バックエンドの TinyMCE モーダル ウィンドウ内で PHP 関数を呼び出す

更新 1

更新 2

アップデート 3

2 に答える 2

Related

Reference

javascript - WordPress バックエンドの TinyMCE モーダルウィンドウ内で PHP 関数を呼び出す