Skip to content

Instantly share code, notes, and snippets.

@chwnam
Last active April 23, 2021 20:39
Show Gist options
  • Save chwnam/7caeca6fac60490c5d6118010159c8db to your computer and use it in GitHub Desktop.
Save chwnam/7caeca6fac60490c5d6118010159c8db to your computer and use it in GitHub Desktop.
WP Util Sample: wp-util 활용법 샘플 코드
<?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]);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment