WP Util Sample: wp-util 활용법 샘플 코드

wp-util-sample.php

<?php
/*
 * Plugin Name: wp-util-sample
 * Description: wp.util sample code.
 */

add_action('admin_menu', 'wp_util_sample_menu');

function wp_util_sample_menu()
{
    add_menu_page(
        'WP Util Sample',
        'WP Util Sampple',
        'read',
        'wp-util-sample',
        'wp_util_output_sample_menu',
        'dashicons-embed-generic'
    );
}

function wp_util_output_sample_menu()
{
    ?>
    <div class="wrap">
        <h1 class="wp-heading-inline">WP Util Sample</h1>
        <hr class="wp-header-end">
        <div>
            <h4>wp.template/wp.ajax sample</h4>
            <div>
                <label for="echo-text">Echo Text</label>:
                <input id="echo-text" type="text" class="text" name="echo-text" value="" placeholder="Enter any text">
                <button id="echo-send" class="button" type="button">Send</button>
            </div>
            <ul id="echoed"></ul>
        </div>
    </div>
    <?php
    wp_enqueue_script('wp-util');
    add_action('admin_print_footer_scripts', 'wp_util_footer_script', 1000);
}

function wp_util_footer_script()
{
    wp_nonce_field('wp-util-sample', 'wp-util-sample', false);
    ?>

    <script type="text/template" id="tmpl-echo-text">
        <# console.log( data ); #>

        <# if ( data.text.length >= 2 && data.text.substring(0, 2) === 's:' ) { #>
            <li>
                <strong>{{ data.text.substring(2) }}</strong>
            </li>
        <# } else if ( data.text.length >= 2 && data.text.substring(0, 2) === 'p:' ) { #>
            <li>
                <p>
                    <h4 style="display: inline-block;"><# print('paragraph: ' ); #></h4>
                    {{ data.text.substring(2) }}
                </p>
            </li>
        <# } else { #>
            <li>{{ data.text }}</li>
        <# } #>
    </script>

    <script>
        (function ($) {
            var template = wp.template('echo-text'),
                echoed = $('#echoed'),
                nonce = $('#wp-util-sample').val();

            $('#echo-send').on('click', function () {
                var echoText = $('#echo-text').val().trim();

                if (echoText.length) {
                    wp.ajax.send('echo_text', {
                        data: {text: echoText, nonce: nonce},
                        success: function (data) {
                            echoed.append(template(data));
                        },
                        error: function (data) {
                            if ($.isPlainObject(data)) {
                                // E1: Not 200 status error
                                alert(data.status + ': ' + data.responseText);
                            } else if ($.isArray(data)) {
                                var buffer = [];
                                data.forEach(function (item) {
                                    if (item.hasOwnProperty('code') && item.hasOwnProperty('message')) {
                                        // E2: 200, not successful, WP_Error.
                                        buffer.push(item.code + ': ' + item.message);
                                    } else {
                                        // E3: 200, not successful, array.
                                        buffer.push(item.toString());
                                    }
                                });
                                alert(buffer.join('\n'));
                            } else {
                                // E4: 200, not successful, unknown format.
                                alert('Error: ' + data.toString());
                            }
                        }
                    });
                }
            });

            $('#echo-text').on('keyup', function (e) {
                if (e.key === 'Enter') {
                    $('#echo-send').trigger('click');
                }
            });
        })(jQuery);
    </script>
    <?php
}

add_action('wp_ajax_echo_text', 'wp_util_echo_text');
function wp_util_echo_text()
{
    check_ajax_referer('wp-util-sample', 'nonce');

    $text = sanitize_text_field($_REQUEST['text'] ?? '');

    if ('e1' === $text) {
        wp_die('e1 error!', 400);
    } elseif ('e2' === $text) {
        $error = new WP_Error();
        $error->add('error', 'E2 Error 01');
        $error->add('error', 'E2 Error 02');
        wp_send_json_error($error);
    } elseif ('e3' === $text) {
        wp_send_json_error(['E3 Error 01', 'E3 Error 02']);
    } elseif ('e4' === $text) {
        wp_send_json_error('e4 error!');
    } elseif ($text) {
        wp_send_json_success(['text' => $text]);
    }
}