0
私はカスタムページタイプを作成し、アーカイブページとヘッダーテキストとバナーのような単一のページに必要な「オプション」のサブメニューを作成しました。私はテキストフィールドを正常に動作させることができましたが、メディアアップロードボタンを動作させることができません。それは単に通常の送信を行います。私は数多くのチュートリアルを続けましたが、これが私に最終製品から1ステップを得た唯一のものでした。 https://mycyberuniverse.com/integration-wordpress-media-uploader-plugin-options-page.htmlWordPressのメディアがCPTオプションのサブメニューで動作しないのはなぜですか？
これは、サブメニュー、オプショングループ、およびフィールドのコードです。それは/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'));
}
////////////////////////////////////////////////////////////////////////////////
/**
* 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
ここでみんな私を助けて。私は専門家ではありませんが、私が見る限り、これは正しく機能するはずですか？私は何が欠けていますか？