WordPress短代码shortcode与自定义字段Custom Fields的合用
为了方便使用插件WP Simple Shopping Cart，将购物车短代码按钮[wp_cart_button name="Test Product" price="29.95"]中的参数从固定值切换到可变值，决定使用Custom Fields来给修改购物车短代码中的name和price赋值。
创建Custom Fields字段
创建selected_custom_field给name赋值用，再创建selected_custom_field_price给price赋值用。自定义的selected_custom_field值将与selected_custom_field_price自定义值按顺序来对应，两个自定义值缺少任意一对应值将不输出结果；
将Custom Fields字段的自定义值插入到post content中
通常是在模板中调用Custom Fields的值，但为了修改post content中的购物车短代码按钮[wp_cart_button name=”Test Product” price=”29.95″]，必须要在编辑器中接收到Custom Fields的自定义值；另外一个原因是Custom Fields自定义字段也需要在前端显示，并且将用户来选择，经过触发，再将对应值赋值给购物车短代码按钮[wp_cart_button name=”Test Product” price=”29.95″]，并且修改对应name和price的值，从而改变原来的默认值。
要将Custom Fields自定义值插入到编辑器中，最快的方法就是使用短代码。将Custom Fields生成一组短代码，再将短代码插入到编辑器目标位置；短代码很方便调整位置，甚至CSS样式
function custom_field_type_shortcode() {
$post_id = get_the_ID();
$custom_fields = get_post_custom($post_id);
$field_values = get_post_custom_values('selected_custom_field', $post_id);
$price_values = get_post_custom_values('selected_custom_field_price', $post_id);
// Combine field and price values and maintain order
$combined_values = array();
for ($i = 0; $i < count($field_values); $i++) {
if (isset($field_values[$i], $price_values[$i])) {
$field = esc_attr($field_values[$i]);
$price = esc_attr($price_values[$i]);
$combined_values[$field] = $price;
}
}
// Sort the fields and prices based on their order of addition
asort($combined_values);
$radioButtons = ''; // Initialize a string to store radio button inputs
$name = 'selected_custom_field'; // Radio buttons should have the same 'name' attribute for exclusive selection
foreach ($combined_values as $field => $price) {
$field = esc_attr($field);
$price = esc_attr($price);
// Generate a radio button input for each field
$radioButtons .= '<input type="radio" name="' . $name . '" value="' . $field . '" data-price="' . $price . '">';
$radioButtons .= '<label>' . $field . ' ($' . $price . ')</label>';
}
return $radioButtons;
}
add_shortcode('custom_field_type', 'custom_field_type_shortcode');创建Custom Fields的短代码插入按钮
如果每次手动输入短代码，麻烦且容易忘记，于是便创建一个简单Qtags来插入对应的自定义自段短代码
function appthemes_add_quicktags() {
if (wp_script_is('quicktags')){
wp_add_inline_script(
'quicktags',
QTags.addButton( 'custom_field_type', 'CFtype', '[custom_field_type]<span id=\"addtocart\"></span>', '', '', 'Insert Custom Field Type', 100);
QTags.addButton( 'eg_nbsp', 'nbsp', ' ', '', '', 'Non Breaking Space', 111 );"
);
}
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );用户选择的结果使用AJAX来调用，并将值赋给[wp_cart_button]
上述的Custom Fields自定义值，被生成了单选项radio box；相比较修改原来的购物车短代码按钮[wp_cart_button name=”Test Product” price=”29.95″]，不如生成新的[wp_cart_button]，避免查找修改的过程。
AJAX-PHP端
function handle_shortcode_request() {
$selectedField = sanitize_text_field($_POST['selectedField']);
$selectedPrice = sanitize_text_field($_POST['selectedPrice']);
$shortcode = '[wp_cart_button name="' . $selectedField . '" price="' . $selectedPrice . '"]';
$result = do_shortcode($shortcode);
echo $result;
wp_die();
}
add_action('wp_ajax_handle_shortcode_request', 'handle_shortcode_request');
add_action('wp_ajax_nopriv_handle_shortcode_request', 'handle_shortcode_request');JS端
// Function to generate and display the shortcode triggled by Custom Fields.
function generateShortcode() {
var selectedField = $('input[name="selected_custom_field"]:checked').val();
var selectedPrice = $('input[name="selected_custom_field"]:checked').data('price');
if ( selectedField && selectedPrice ) {
$.ajax({
type: 'POST',
url: cq_ajax.ajax_url, // Use the global AJAX URL variable provided by WordPress
data: {
action: 'handle_shortcode_request',
selectedField: selectedField,
selectedPrice: selectedPrice
},
success: function(response) {
$('#addtocart').html(response);
}
});
}
}
$('input[name="selected_custom_field"]').on('change', function() {
generateShortcode();
});
// Initial generation of the shortcode 默认不显示#addtocart
//generateShortcode();要留意在编辑器中写入<span id=”addtocart”></span>来接受生成的[wp_cart_button]购物车按钮; 此问题已经在Qtags中解决，会与短代码一同写入；
同时另忘记定义AJAX文件
// ajax call for frontend
wp_localize_script( 'script', 'cq_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' )));创建一个meta box来验证Custom Fields结果(可选)
/*Triggle Custom Fields to control shortcode*/
add_action('add_meta_boxes', 'add_custom_meta_box');
function add_custom_meta_box() {
add_meta_box('custom_field_selector', 'Select Custom Field', 'custom_field_selector_callback', 'post', 'normal', 'high');
}
function custom_field_selector_callback($post) {
$selected_field = get_post_meta($post->ID, 'selected_custom_field', true);
$all_custom_fields = get_post_custom($post->ID);
$custom_field_values = [];
?>
<label for="selected_custom_field">Select a Custom Field:</label>
<select name="selected_custom_field" id="selected_custom_field">
<option value="">Select a Custom Field</option>
<?php
foreach ($all_custom_fields as $field => $values) :
$field = esc_attr($field);
?>
<option value="<?php echo $field; ?>" <?php selected($selected_field, $field); ?>>
<?php echo $field; ?>
</option>
<?php endforeach; ?>
</select>
<div id="custom-field-result">
<?php if (!empty($selected_field) && isset($all_custom_fields[$selected_field])) : ?>
<p>Selected custom field values: <?php echo implode(', ', $all_custom_fields[$selected_field]); ?></p>
<?php endif; ?>
</div>
<script>
document.getElementById('selected_custom_field').addEventListener('change', function() {
var selectedField = this.value;
var customFieldResult = document.getElementById('custom-field-result');
customFieldResult.innerHTML = '';
if (selectedField && <?php echo json_encode(array_keys($all_custom_fields)); ?>.includes(selectedField)) {
var values = <?php echo json_encode($all_custom_fields); ?>[selectedField];
customFieldResult.innerHTML = '<p>Selected custom field values: ' + values.join(', ') + '</p>';
}
});
</script>
<?php
}完结
Say Something!