0
J'ai un type de message personnalisé que j'ai créé et créé un sous-menu pour les "options" que j'aimerais avoir pour la page d'archive et les pages simples (comme le texte d'en-tête et les bannières). J'ai réussi à faire fonctionner correctement les champs de texte, mais je n'arrive pas à faire fonctionner le bouton de chargement des médias. Il fait juste une soumission normale. J'ai suivi des tonnes de tutoriels différents mais celui-ci était le seul qui m'a fait 1 pas du produit final. https://mycyberuniverse.com/integration-wordpress-media-uploader-plugin-options-page.htmlPourquoi le téléchargement de médias Wordpress ne fonctionne-t-il pas dans le sous-menu des options CPT?
Ceci est le code du sous-menu, du groupe d'options et des champs. Il est dans /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');
?>
Et voici le code pour le Uploader des médias et mise en attente tous les fichiers nécessaires
/*
================================================================================
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'));
}
////////////////////////////////////////////////////////////////////////////////
Enfin le javascript pour le téléchargement et supprimer boutons (dans /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;
});
Le résultat est J'ai la page suivante. Les champs de texte fonctionnent bien, mais lorsque je clique sur le bouton "Télécharger", le formulaire est soumis et aucun javascript n'est déclenché.
Screenshot of CPT Options page
Aidez-moi les gars. Je ne suis pas un expert par tous les moyens mais pour autant que je puisse voir, cela devrait fonctionner très bien non? Qu'est-ce que je rate?