用户与前端按钮进行交互后，如何更改我的WordPress网站中的短代码？ 我将皇家音频播放器用作我正在创建的网站的插件，我想拥有与这个人为他的Voiceover网站创建的内容。本质上，我想要音频上方的文字

Question

音频播放器确实可以使用用户可以使用的列表，单击时将显示其他类别，他们可以从那里进行选择。但是我希望用户能够在给定时间与单个玩家一起查看所有类别。据我所知，使用Ajax更改短代码是我真正实现目标的唯一方法。

我尝试关注此堆栈溢出帖子：

https：//stackoverflow.com/q/544442781/29746210

所以我得到了这样的代码：

add_action('wp_ajax_switch_audio_playlist', 'switch_audio_playlist');
add_action('wp_ajax_nopriv_switch_audio_playlist', 'switch_audio_playlist');

function switch_audio_playlist() {
    if (isset($_POST['playlist'])) {
        $playlist = sanitize_text_field($_POST['playlist']);

        echo do_shortcode('[fwdrap preset_id="VOICEOVER" playlist_id="VoiceOvers"            start_playlist_id="' . $playlist . '" start_track_id="preset"]');
        $html = ob_get_clean();

        wp_send_json_success($html);
    } else {
        wp_send_json_error('No playlist provided.');
    }
}

function enqueue_custom_ajax_script() {
    wp_enqueue_script('custom-ajax-script', get_template_directory_uri() . '/js/custom-ajax.js', array('jquery'), null, true);
    
    wp_localize_script('custom-ajax-script', 'ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_custom_ajax_script');

HTML/JS：

<div class="playlist-container">
    <a class="switch-playlist" data-playlist="Audiobooks">Audiobooks</a> |
    <a class="switch-playlist" data-playlist="Narration">Narration</a>
</div>
<div id="audio-player-container">
    [fwdrap preset_id="VOICEOVER" playlist_id="VoiceOvers" start_playlist_id="Audiobooks" start_track_id="preset"]
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
jQuery(document).ready(function($) {
    $('.switch-playlist').on('click', function() {
        let playlist = $(this).data('playlist');
        console.log('Switching to playlist:', playlist);

        $.ajax({
            url: ajax_object.ajax_url, // This comes from wp_localize_script
            method: "POST",
            data: {
                action: 'fetch_shortcode',
                playlist: playlist
            },
            success: function(response) {
                console.log('AJAX response:', response);
                $('#audio-player-container').html(response.data);
            }
        });
    });
});

</script>

解决本地化问题后，我会遇到此错误：

当我加载页面时，音频播放器正在按预期加载：

我单击“旁白”按钮

但是，当我按下“旁白”按钮时，页面一无所获，检查员看起来像这样：

在我单击“旁白”按钮

之后 我正在做什么问题，如果是的话？

关键问题

Answer 1

ajax request中的wrong动作名称

1. 您的Ajax函数已注册为switch_audio_playlist，但是在JavaScript Ajax请求中，您正在使用

   'action': 'fetch_shortcode'
   。这些必须匹配
   • 的使用
   ob_get_clean()

2. 您正在调用echo do_shortcode(...)

   ，但是没有

   ob_get_clean()使用
   ob_start()
   。这可能会导致问题，因为没有缓冲区可以清洁。
   • 与jQuery版本的有力冲突
   由于WordPress已经出现了jQuery，加载外部版本（
https://code.jquery.com/jquery-3.6.0.min.js
3. ）可能会引起冲突。
   fixed phpcode

   • 修改您的

     switch_audio_playlist
   函数以正确输出短代码：

add_action('wp_ajax_switch_audio_playlist', 'switch_audio_playlist');
add_action('wp_ajax_nopriv_switch_audio_playlist', 'switch_audio_playlist');

function switch_audio_playlist() {
    if (isset($_POST['playlist'])) {
        $playlist = sanitize_text_field($_POST['playlist']);
        
        ob_start();
        echo do_shortcode('[fwdrap preset_id="VOICEOVER" playlist_id="VoiceOvers" start_playlist_id="' . $playlist . '" start_track_id="preset"]');
        
        $html = ob_get_clean();
        
        wp_send_json_success($html);
    } else {
        wp_send_json_error('No playlist provided.');
    }
}

function enqueue_custom_ajax_script() {
    wp_enqueue_script('custom-ajax-script', get_template_directory_uri() . '/js/custom-ajax.js', array('jquery'), null, true);
    
    wp_localize_script('custom-ajax-script', 'ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_custom_ajax_script');

---

fixed html＆javascript

使用正确的Ajax动作名称（

switch_audio_playlist

而不是

fetch_shortcode

）。

<div class="playlist-container">
    <a class="switch-playlist" data-playlist="Audiobooks">Audiobooks</a> |
    <a class="switch-playlist" data-playlist="Narration">Narration</a>
</div>

<div id="audio-player-container">
    <?php echo do_shortcode('[fwdrap preset_id="VOICEOVER" playlist_id="VoiceOvers" start_playlist_id="Audiobooks" start_track_id="preset"]'); ?>
</div>

<script>
jQuery(document).ready(function($) {
    $('.switch-playlist').on('click', function(e) {
        e.preventDefault();
        
        let playlist = $(this).data('playlist');
        console.log('Switching to playlist:', playlist);

        $.ajax({
            url: ajax_object.ajax_url,
            method: "POST",
            dataType: "json",
            data: {
                action: 'switch_audio_playlist',
                playlist: playlist
            },
            success: function(response) {
                if (response.success) {
                    console.log('AJAX response:', response);
                    $('#audio-player-container').html(response.data);
                } else {
                    console.error('AJAX Error:', response.data);
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX request failed:', status, error);
            }
        });
    });
});
</script>

---