0
我有一個自定義的帖子類型，我創建了一個自定義的帖子類型，併爲「選項」創建了一個子菜單，我希望它具有存檔頁面和單個頁面（如標題文本和橫幅）。我已經能夠使文本字段正常工作，但我無法使媒體上傳按鈕正常工作。它只是做一個正常的提交。我遵循了大量不同的教程，但這是唯一一個讓我從最終產品中脫離一步的教程。 https://mycyberuniverse.com/integration-wordpress-media-uploader-plugin-options-page.html爲什麼不能在CPT選項子菜單中使用Wordpress媒體上傳？
這是子菜單，選項組和字段的代碼。這是一個在/inc/settingsMenus/blog-settings.php
<?php
/*
================================================================================
Blog Settings
================================================================================
*/
/*
============================================================================
Add sub menu page to the custom post type
============================================================================
*/
function add_blog_settings_page(){
add_submenu_page(
'edit.php?post_type=blog',
'Blog Options',
'Options',
'manage_options',
'blog_settings',
'blog_options_display'
);
}
add_action('admin_menu', 'add_blog_settings_page');
/*
========================================================================
Options page callback
========================================================================
*/
function blog_options_display(){
echo '<div>';
echo '<h1>Blog Options</h1>';
echo '<form action="options.php" method="post">';
settings_fields('blog_option_group');
do_settings_sections('blog_settings');
submit_button();
echo '</form></div>';
}
/*
========================================================================
Register and add settings
========================================================================
*/
function blog_sub_menu_page_init(){
//misha_add_options_page();
register_setting(
'blog_option_group', // Option group
'blog_option_group', // Option name
'blog_sanitize' // sanitize
);
add_settings_section(
'header_settings_section', // ID
'Archive Page Settings', // Title
'blog_print_section_info', // Callback
'blog_settings' // Page
);
add_settings_field(
'archiveBlueTitle', // ID
'Archive Blue Title', // Title
'archiveBlueTitle_callback', // Callback
'blog_settings', // Page
'header_settings_section' // Section
);
add_settings_field(
'archiveRedTitle', // ID
'Archive Red Title', // Title
'archiveRedTitle_callback', // Callback
'blog_settings', // Page
'header_settings_section' // Section
);
add_settings_field(
'archiveBannerImage', // ID
'Archive Banner Image', // Title
'archiveBannerImage_callback', // Callback
'blog_settings', // Page
'header_settings_section' // Section
);
}
add_action('admin_init', 'blog_sub_menu_page_init');
/*
========================================================================
Sanitize each setting field as needed
========================================================================
*
* @param array $input Contains all settings fields as array keys
*/
function blog_sanitize($input){
$new_input = array();
if(isset($input['archiveBlueTitle']))
$new_input['archiveBlueTitle'] = sanitize_text_field($input['archiveBlueTitle']);
if (isset($input['archiveRedTitle']))
$new_input['archiveRedTitle'] = sanitize_text_field($input['archiveRedTitle']);
if(isset($input['archiveBannerImage']))
$new_input['archiveBannerImage'] = absint($input['archiveBannerImage']);
return $new_input;
}
/*
========================================================================
Print the Section text
========================================================================
*/
function blog_print_section_info(){
echo '<p>The settings for the Blog archive page.</p>';
}
/*
========================================================================
Get the settings option array and print one of its values
========================================================================
*/
function archiveBlueTitle_callback(){
$mypage_options = get_option('blog_option_group');
echo '<p>The first half of the page title (styled in blue).</p>';
echo '<input id="archiveBlueTitle_string" name="blog_option_group[archiveBlueTitle]" type="text" value="' . $mypage_options["archiveBlueTitle"] . '" />';
}
/*
========================================================================
Get the settings option array and print one of its values
========================================================================
*/
function archiveRedTitle_callback() {
$mypage_options = get_option('blog_option_group');
echo '<p>The second half of the page title (styled in red).</p>';
echo '<input id="archiveRedTitle_string" name="blog_option_group[archiveRedTitle]" type="text" value="' . $mypage_options["archiveRedTitle"] . '" />';
}
/*
========================================================================
Get the settings option array and print one of its values
========================================================================
*/
function archiveBannerImage_callback() {
// Save attachment ID
echo '<p>The banner image used at the top of the page.</p>';
arthur_image_uploader('blog_option_group', 'archiveBannerImage', $width = 115, $height = 115);
}
/*
============================================================================
Blog Settings
============================================================================
*/
require_once('inc/settingsMenus/blog-settings.php');
?>
這是上傳的媒體上傳的代碼和排隊所需的所有文件
/*
================================================================================
Enqueue media uploader and scripts
================================================================================
*/
/**
* Load scripts and style sheet for settings page
*/
function arthur_load_scripts_admin() {
// WordPress library
wp_enqueue_media();
}
add_action('admin_enqueue_scripts', 'arthur_load_scripts_admin');
/*
================================================================================
Media Uploader function
================================================================================
*/
/**
* Image Uploader
*
* author: Arthur Gareginyan www.arthurgareginyan.com
*/
function arthur_image_uploader($option_id, $field_id, $width, $height) {
// Set variables
$options = get_option($option_id);
$default_image = 'http://www.freeiconspng.com/uploads/no-image-icon-15.png';
if (!empty($options[$field_id])) {
$image_attributes = wp_get_attachment_image_src($options[$field_id], array($width, $height));
$src = $image_attributes[0];
$value = $options[$field_id];
} else {
$src = $default_image;
$value = '';
}
$text = __('Upload', RSSFI_TEXT);
// Print HTML field
echo '
<div class="upload">
<img data-src="' . $default_image . '" src="' . $src . '" width="' . $width . 'px" height="' . $height . 'px" />
<div>
<input type="hidden" name="' . $option_id . '[' . $field_id . ']" id="' . $option_id . '[' . $field_id . ']" value="' . $value . '" />
<button type="submit" class="upload_image_button button">' . $text . '</button>
<button type="submit" class="remove_image_button button">×</button>
</div>
</div>
';
}
////////////////////////////////////////////////////////////////////////////////
add_action('admin_enqueue_scripts', 'enqueue_myuploadscript_script');
function enqueue_myuploadscript_script() {
wp_enqueue_script('myuploadscript', get_template_directory_uri() . '/js/myuploadscript.js', array('jquery'));
}
////////////////////////////////////////////////////////////////////////////////
最後的JavaScript和刪除按鈕（在/js/myuploadscript.js）
/**
* Image Uploader
*
* author: Arthur Gareginyan www.arthurgareginyan.com
* Modified by Andy Warren - Original here: https://mycyberuniverse.com/integration-wordpress-media-uploader-plugin-options-page.html
**/
// The "Upload" button
jQuery('.upload_image_button').click(function() {
var send_attachment_bkp = wp.media.editor.send.attachment;
var button = jQuery(this);
wp.media.editor.send.attachment = function(props, attachment) {
jQuery(button).parent().prev().attr('src', attachment.url);
jQuery(button).prev().val(attachment.id);
wp.media.editor.send.attachment = send_attachment_bkp;
}
wp.media.editor.open(button);
return false;
});
// The "Remove" button (remove the value from input type='hidden')
jQuery('.remove_image_button').click(function(event) {
event.preventDefault(); // Added this to prevent remove button submitting and refreshing page when clicked
var answer = confirm('Are you sure?');
if (answer == true) {
var src = jQuery(this).parent().prev().attr('data-src');
jQuery(this).parent().prev().attr('src', src);
jQuery(this).prev().prev().val('');
}
return false;
});
結果是我有以下頁面。文本字段工作正常，但當我點擊「上傳」按鈕，它只是提交表單，並沒有JavaScript被觸發。
Screenshot of CPT Options page
幫我在這裏的傢伙。我不是任何方式的專家，但據我所知，這應該工作正常嗎？我錯過了什麼？