从仪表板小部件保存嵌入代码

时间:2017-10-25 作者:swg1cor14

因此,我试图在仪表板上制作一个小部件,教会可以在其中粘贴Facebook Live中的iframe嵌入代码,然后将其放在网站的正确页面上。

问题是,我使用Ajax保存小部件选项,但当您将HTML放入文本区域时,它不会保存。我在ajax调用中转储了$\\u帖子,而textarea没有HTML代码的数据。

function add_dashboard_widgets() {
    wp_add_dashboard_widget(
        \'stream_options\',            // $widget_id 
        \'Stream Settings\',          // $widget_name 
        \'stream_options_widget\' // $callback 

    );
}

add_action(\'wp_dashboard_setup\', \'add_dashboard_widgets\' );

function stream_options_widget() {

    $code = stripslashes( get_option( \'stream_code\' ));
    $status = get_option( \'stream_status\' );

    $live = $offline = "";

    if($status == "1") {
        $live = "checked";
    } else {
        $offline = "checked";
    }
        echo "
        <form action=\'". admin_url( \'admin-post.php\' ) ."\' method=\'post\'>
        <div class=\'options_class_wrap\'>
            <textarea name=\'stream_code\' id=\'stream_code\' col=\'10\' style=\'width: 100%\' rows=\'5\'>". $code ."</textarea>
        </div>
        <div class=\'options_class_wrap\'>
            <label for=\'live\'><input type=\'radio\' ". $live ." name=\'stream_status\' id=\'live\' value=\'1\' /> Live</label>&nbsp;&nbsp;<label for=\'offline\'><input type=\'radio\' ". $offline ." name=\'stream_status\' id=\'offline\' value=\'0\' /> Offline</label>
        </div>
            <input type=\'hidden\' name=\'ajax_action\' value=\'stream_options_ajax_call\' />
            <input type=\'hidden\' name=\'_ajax_nonce\' value=\'". wp_create_nonce(\'stream_options_ajax_call\')."\' />
        <br />
        <div class=\'options_buttons\'>
            <input type=\'submit\' class=\'button\' value=\'Save\'>
        </div>";
}

function stream_options_ajax_call() {
    if(!wp_verify_nonce( $_POST[\'_ajax_nonce\'], \'stream_options_ajax_call\' )) {
        die(-1);
    }


    $status = wp_kses($_POST[\'stream_status\'],array() );

    update_option( \'stream_code\', stripslashes(wp_filter_post_kses(addslashes($_POST[\'stream_code\']))));
    update_option( \'stream_status\', $status );

    wp_redirect(\'/wp-admin/index.php\');

    exit;
}

function stream_options_ajax_call_init() {
    if(isset($_REQUEST[\'ajax_action\']) && $_REQUEST[\'ajax_action\'] === \'stream_options_ajax_call\') {
        do_action( \'wp_ajax_stream_options_ajax_call\' );
    }
}

if (is_admin()){
    add_action(\'wp_ajax_stream_options_ajax_call\', \'stream_options_ajax_call\');
}

add_action( \'init\', \'stream_options_ajax_call_init\');

1 个回复
SO网友:Jacob Peattie

好的,所以这里的主要问题最终只是wp_filter_post_kses 可能是过滤掉iFrame。但我也想谈谈你处理表格的方式。您没有使用AJAX,AJAX是通过Javascript将请求发送到服务器,但您正在尝试挂接AJAX挂钩,然后在admin post上手动运行它们。php?这一切都是一团糟。

下面是一些可以在实际AJAX中实现所需功能的工作代码,下面我将介绍一些需要注意的事项:

function wpse_211908_add_dashboard_widgets() {
    wp_add_dashboard_widget(
        \'wpse_211908_stream_options\',
        \'Stream Settings\',
        \'wpse_211908_stream_options_widget\'
    );
}
add_action(\'wp_dashboard_setup\', \'wpse_211908_add_dashboard_widgets\' );

function wpse_211908_stream_options_widget() {
    $code = stripcslashes( get_option( \'stream_code\' ) );
    $status = get_option( \'stream_status\' );
    ?>

    <form id="stream_options" method="post">
        <p><textarea name="stream_code" rows="5" class="widefat"><?php echo esc_textarea( $code ); ?></textarea>

        <p><label><input type="checkbox" name="stream_status" value="1" <?php checked( $status, \'1\' ); ?>> Live</label>

        <?php wp_nonce_field( \'stream_options_ajax_call\' ); ?>
        <input type="hidden" name="action" value="wpse_211908_save_stream_options">

        <p><input type="submit" class="button button-primary" value="Save">
    </form>

    <script>
        ( function($) {
            var $form = $( \'#stream_options\' );
            var $button = $form.find( \'input[type="submit"]\' );

            $form.on( \'submit\', function(e) {
                e.preventDefault();

                $button.prop( \'disabled\', true ).attr( \'value\', \'Saving...\' );

                $.ajax( {
                    url: window.ajaxurl,
                    method: \'post\',
                    data: $form.serialize(),
                    complete: function() {
                        $button.prop( \'disabled\', false );
                    },
                    success: function() {
                        $button.attr( \'value\', \'Saved\' );
                    },
                    error: function() {
                        $button.attr( \'value\', \'Save\' );
                    },
                } );
            } );

            $form.on( \'input change\', function() {
                $button.attr( \'value\', \'Save\' );
            } );
        } )( jQuery );
    </script>

    <?php
}

function wpse_211908_save_stream_options() {
    if ( empty( $_POST[\'_wpnonce\'] ) || ! wp_verify_nonce( $_POST[\'_wpnonce\'], \'stream_options_ajax_call\' ) ) {
        http_response_code(403);
        exit();
    }

    if ( ! current_user_can( \'manage_options\' ) ) {
        http_response_code(403);
        exit();
    }

    update_option( \'stream_code\', $_POST[\'stream_code\'] );

    $status = isset( $_POST[\'stream_status\'] ) ? \'1\' : \'0\';
    update_option( \'stream_status\', $status );

    wp_die();
}
add_action( \'wp_ajax_wpse_211908_save_stream_options\', \'wpse_211908_save_stream_options\', 99 );
首先,请注意,为了避免冲突,我在所有函数和所有将与WordPress共享的变量前面加了前缀。这是一个很好的做法,我推荐它。名称如下add_dashboard_widgets 只是乞求引起冲突。

请注意script 小部件中的标记。这是将发送AJAX请求的JavaScript。因为我有一个隐藏字段名为action 具有值wpse_211908_save_stream_options, 这意味着它将成为$_POST[\'action\'] 我可以通过使用wp_ajax_wpse_211908_save_stream_options 钩使用Javascript进行提交意味着提交时不需要加载页面。

同样在我使用的widget通知中esc_textarea() 确保$code 变量不会破坏小部件的HTML。注意我使用checked() 作为输出选中属性的更简单方法。

第二个函数是处理AJAX请求的函数。请注意,我可以在一个函数中处理所有内容,而不是添加检查字段和触发操作的操作。在这里,如果nonce没有验证,或者用户没有更新设置的权限,我会发送403个错误。

你会注意到,我对$_POST[\'stream_code\']. 如果我们已经在检查提交的HTML是否为可信用户,则无需对其进行过滤。如果要进一步锁定此项,可以使用wp_kses, 但您需要提供自己的允许元素列表,因为iFrame将被wp_filter_post_kses().

然后请注意$_POST[\'stream_status\'] 我只需检查它是否存在(使用AJAX,如果不检查,它将根本无法通过),然后手动设置为\'0\'\'1\'. wp_kses() 对复选框进行消毒是相当过分的。

最后,要在前端使用HTML,只需使用:

结束

相关推荐

Theme Loading Into Dashboard

我有一个很奇怪的,以前从未见过的问题。。。每当我访问仪表板时,大约3-5秒后,我的主题就会加载到仪表板布局中。这就像主题的样式表以某种方式排队。。。这是我的排队钩functions.php:function myyogawebsite_scripts() { wp_enqueue_style( \'foundation-normalize\', get_template_directory_uri() . \'/css/normalize.css\' ); wp_