0
Ich habe einen benutzerdefinierten Post-Typ, den ich erstellt und ein Untermenü für "Optionen", die ich für die Archivseite und die einzelnen Seiten (wie Header-Text und Banner) haben möchte. Ich war in der Lage, die Textfelder in Ordnung zu bringen, aber ich kann die Medien-Upload-Schaltfläche nicht zum Laufen bringen. Es tut einfach eine normale Eingabe. Ich folgte Tonnen von verschiedenen Tutorials, aber diese war die einzige, die mir einen Schritt vom Endprodukt brachte. https://mycyberuniverse.com/integration-wordpress-media-uploader-plugin-options-page.htmlWarum funktioniert das Hochladen von Wordpress-Medien nicht im Untermenü "CPT-Optionen"?
Dies ist der Code für das Untermenü, Optionsgruppe und Felder. Es ist in /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');
?>
Und dies ist der Code für die Medien Uploader und Einreihen alle benötigten Dateien
/*
================================================================================
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'));
}
////////////////////////////////////////////////////////////////////////////////
Und schließlich die Javascript für den Upload und entfernen buttons (in /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;
});
Das Ergebnis ist, ich habe die folgende Seite. Die Textfelder funktionieren gut, aber wenn ich auf die Schaltfläche "Hochladen" klicke, wird nur das Formular übermittelt und es wird kein JavaScript ausgelöst.
Screenshot of CPT Options page
Helfen Sie mir hier Jungs. Ich bin kein Experte, aber soweit ich sehen kann, sollte das gut funktionieren, oder? Was vermisse ich?