Javascript 如何在Wordpress中添加媒体按钮

我正在尝试添加两个如下所示的按钮：

我首先添加了addpdf按钮。它工作得很好。 在functions.php中，我添加了以下代码：

// Add PDF button
function add_pdf_button() {
    echo '<a href="#" id="add-pdf" class="button" title="Add PDF"><span class="dashicons-before dashicons-format-aside wp-media-buttons-icon"></span> Add PDF</a>';
}
add_action('media_buttons', 'add_pdf_button', 14);
// Include JavaScript for button functionality
function include_add_pdf_js_file() {
    wp_enqueue_script('media_button', get_template_directory_uri() . '/js/add-pdf.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_media', 'include_add_pdf_js_file');

//添加PDF按钮
函数添加pdf按钮（）{
回声'；
}
添加操作（“媒体按钮”、“添加pdf按钮”，14）；
//包含用于按钮功能的JavaScript
函数包括_add_pdf_js_file（）{
wp_enqueue_script（'media_button'，get_template_directory_uri（）。/js/add pdf.js'，array（'jquery'），'1.0'，true）；
}
添加操作（“wp_排队_媒体”、“包含_添加_pdf_js_文件”）；

在add-image.js中，我添加了以下代码：

var file_frame;
jQuery('#add-pdf').live('click', function( event ){
    event.preventDefault();
    // If the media frame already exists, reopen it.
    if ( file_frame ) {
        file_frame.open();
        return;
    }
    // Construct our media frame with only pdfs shown
    file_frame = wp.media.frames.file_frame = wp.media({
        title: 'Add PDF',
        multiple: false,
        library: {
            type: 'application/pdf',
        },
    });
    // When something is selected, insert our new link with a custom class into the editor
    file_frame.on( 'select', function() {
        attachment = file_frame.state().get('selection').first().toJSON();
        wp.media.editor.insert('<div class="show-form-container butonrosu"><a class="show-form" href="#">Download the report</a></div><div class="my-form-container"><a class="pdf" href="' + attachment.url + '">' + attachment.title + '</a></div>');
    });
    file_frame.open();
});

var文件\u帧；
jQuery（“#添加pdf”）.live（'click'，函数（事件）{
event.preventDefault（）；
//如果媒体框已存在，请重新打开它。
if（文件帧）{
文件_frame.open（）；
返回；
}
//仅显示PDF构建我们的媒体框架
file_frame=wp.media.frames.file_frame=wp.media({
标题：“添加PDF”，
多重：假，
图书馆：{
键入：“application/pdf”，
},
});
//选择某个对象后，将带有自定义类的新链接插入编辑器
文件_frame.on（'select'，function（））{
附件=file_frame.state（）.get（'selection'）.first（）.toJSON（）；
wp.media.editor.insert（“”）；
});
文件_frame.open（）；
});

正如我所说，它工作得很好。当我做同样的事情添加一个添加图像按钮时，两个按钮都停止工作。问题出在functions.php中，因为一切都停止在那里

所以我的问题是：为什么这两块代码不兼容

// Block 1 : Add PDF button
function add_pdf_button() {
    echo '<a href="#" id="add-pdf" class="button" title="Add PDF"><span class="dashicons-before dashicons-format-aside wp-media-buttons-icon"></span> Add PDF</a>';
}
add_action('media_buttons', 'add_pdf_button', 14);
// Include JavaScript for button functionality
function include_add_pdf_js_file() {
    wp_enqueue_script('media_button', get_template_directory_uri() . '/js/add-pdf.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_media', 'include_add_pdf_js_file');


// BLOCK 2: Add Image button next to Add PDF
function add_img_button() {
    echo '<a href="#" id="add-img" class="button" title="Add Image"><span class="dashicons-before dashicons-format-aside wp-media-buttons-icon"></span> Add Image</a>';
}
add_action('media_buttons', 'add_img_button', 14);
// Include JavaScript for button functionality
function include_add_img_js_file() {
    wp_enqueue_script('media_button', get_template_directory_uri() . '/js/add-image.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_media', 'include_add_img_js_file');

//第1块：添加PDF按钮
函数添加pdf按钮（）{
回声'；
}
添加操作（“媒体按钮”、“添加pdf按钮”，14）；
//包含用于按钮功能的JavaScript
函数包括_add_pdf_js_file（）{
wp_enqueue_script（'media_button'，get_template_directory_uri（）。/js/add pdf.js'，array（'jquery'），'1.0'，true）；
}
添加操作（“wp_排队_媒体”、“包含_添加_pdf_js_文件”）；
//块2：添加PDF旁边的添加图像按钮
功能添加按钮（）{
回声'；
}
添加操作（“媒体按钮”，“添加图像按钮”，14）；
//包含用于按钮功能的JavaScript
函数包括_add_img_js_file（）{
wp_enqueue_script（'media_button'，get_template_directory_uri（）。/js/add image.js'，array（'jquery'），'1.0'，true）；
}
添加操作（“wp\u排队媒体”，“包括添加img\u js\u文件”）；