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);


    $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;
        }
    }


    asort($combined_values);

    $radioButtons = ''; 
    $name = 'selected_custom_field'; 

    foreach ($combined_values as $field => $price) {
        $field = esc_attr($field);
        $price = esc_attr($price);


        $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 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, data: { action: 'handle_shortcode_request', selectedField: selectedField, selectedPrice: selectedPrice }, success: function(response) { $('#addtocart').html(response); } }); } } $('input[name="selected_custom_field"]').on('change', function() { generateShortcode(); }); 

要留意在编辑器中写入<span id=”addtocart”></span>来接受生成的[wp_cart_button]购物车按钮; 此问题已经在Qtags中解决,会与短代码一同写入;

同时另忘记定义AJAX文件


	wp_localize_script( 'script', 'cq_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' )));

创建一个meta box来验证Custom Fields结果(可选)


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
}

完结

Previous/Next

Say Something!

Leave a Reply