Bouton Ajouter au modal WordPress Image Details
Cela fait deux jours que je cherche et je vais donc poser ma question aussi courte que possible pour vous écarter de votre chemin.
Ce que j'essaie de faire devrait être très basique avec jQuery (append) Je suppose, mais pour une raison étrange, je ne peux pas le faire en ajoutant .js au backend. De plus, ce hack personnalisé n’est que temporaire, jusqu’à ce que l'éditeur Gutenberg soit publié dans le noyau et tout cela ne sera plus nécessaire.
Q:
Ajoutez simplement un "Hello world!" chaîne vers le modal Détails de l'image où le texte en rouge sur la ou les captures d'écran ci-dessous est .
-
Les captures d'écran ci-dessous sont un résumé rapide de ce que je fais.
Ce modal Détails de l'image apparaît lorsque vous appuyez sur Éditer image sur une seule image qui fait not une partie de votre bibliothèque multimédia et qui ne possède pas de Post_ID. Images génériques (URL) par exemple.
Screenshot nr. 2. Cette modale Détails de l'image correspond à ce que vous obtenez lorsque vous cliquez sur Modifier une image sur une image qui a été ajoutée à une publication de la bibliothèque multimédia auparavant. Le magnifique bouton Remplacer situé sous la vignette de l'aperçu me pique les yeux. Je le veux, il est mon Chuck Norris!
Voici une technique alternative à la manipulation du modèle. J'ai adapté la solution ci-dessous à partir de ce post .
Dans l’approche ci-dessous, le hook print_media_templates, qui est déclenché au bas de wp-includes/media-template.php, est utilisé pour générer du code JavaScript qui supprime le modèle de soulignement des détails de l’image par défaut (<script type="text/html" id="tmpl-image-details">) et le remplace par une version dupliquée que nous pouvons modifier en fonction de nos besoins. .
J'ai ajouté Bonjour tout le monde! dans le modèle modifié et le bouton Remplacer aussi (plus d'informations à ce sujet dans une seconde). Un des inconvénients de cette approche est que si/lorsque le noyau de WordPress est mis à jour, notre modèle créé ne reflétera aucune modification apportée à ce modèle de support particulier.
Un autre problème est que le simple ajout du bouton ne suffit pas. Vous pouvez activer le bouton en supprimant les commentaires HTML (<!-- et -->) dans lesquels je l'ai encapsulé si vous souhaitez quand même continuer. L'utilisation du bouton standard Remplacer sur une image qui ne fait pas partie de la médiathèque déclenchera une erreur dans la console, mais semble fonctionner néanmoins. Idéalement, un bouton personnalisé devrait être créé ou le contrôleur JS qui gère la fonctionnalité du bouton Remplacer devrait être implémenté (ce que je ne sais pas comment faire).
add_action( 'print_media_templates', 'wpse_print_media_templates' );
function wpse_print_media_templates() { ?>
<script>
// Idea via http://unsalkorkmaz.com/wp3-5-media-gallery-edit-modal-change-captions-to-title/
jQuery( document ).ready( function( $ ){
jQuery( "script#tmpl-image-details:first" ).remove();
});
</script>
<script type="text/html" id="tmpl-image-details">
<div class="media-embed">
<div class="embed-media-settings">
<div class="column-image">
<div class="image">
<img src="{{ data.model.url }}" draggable="false" alt="" />
<# if ( data.attachment && window.imageEdit ) { #>
<div class="actions">
<input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
<input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
</div>
<# } else if ( ! data.attachment && window.imageEdit ) { #>
<!--
<div class="actions">
<input type="button" class="replace-attachment button my-theme" value="<?php esc_attr_e( 'Replace' ); ?>" />
</div>
-->
<# } #>
<h1>Hello, world!</h1>
</div>
</div>
<div class="column-settings">
<?php
/** This filter is documented in wp-admin/includes/media.php */
if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
<label class="setting caption">
<span><?php _e('Caption'); ?></span>
<textarea data-setting="caption">{{ data.model.caption }}</textarea>
</label>
<?php endif; ?>
<label class="setting alt-text">
<span><?php _e('Alternative Text'); ?></span>
<input type="text" data-setting="alt" value="{{ data.model.alt }}" />
</label>
<h2><?php _e( 'Display Settings' ); ?></h2>
<div class="setting align">
<span><?php _e('Align'); ?></span>
<div class="button-group button-large" data-setting="align">
<button class="button" value="left">
<?php esc_html_e( 'Left' ); ?>
</button>
<button class="button" value="center">
<?php esc_html_e( 'Center' ); ?>
</button>
<button class="button" value="right">
<?php esc_html_e( 'Right' ); ?>
</button>
<button class="button active" value="none">
<?php esc_html_e( 'None' ); ?>
</button>
</div>
</div>
<# if ( data.attachment ) { #>
<# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
<label class="setting size">
<span><?php _e('Size'); ?></span>
<select class="size" name="size"
data-setting="size"
<# if ( data.userSettings ) { #>
data-user-setting="imgsize"
<# } #>>
<?php
/** This filter is documented in wp-admin/includes/media.php */
$sizes = apply_filters( 'image_size_names_choose', array(
'thumbnail' => __('Thumbnail'),
'medium' => __('Medium'),
'large' => __('Large'),
'full' => __('Full Size'),
) );
foreach ( $sizes as $value => $name ) : ?>
<#
var size = data.sizes['<?php echo esc_js( $value ); ?>'];
if ( size ) { #>
<option value="<?php echo esc_attr( $value ); ?>">
<?php echo esc_html( $name ); ?> – {{ size.width }} × {{ size.height }}
</option>
<# } #>
<?php endforeach; ?>
<option value="<?php echo esc_attr( 'custom' ); ?>">
<?php _e( 'Custom Size' ); ?>
</option>
</select>
</label>
<# } #>
<div class="custom-size<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
<label><span><?php _e( 'Width' ); ?> <small>(px)</small></span> <input data-setting="customWidth" type="number" step="1" value="{{ data.model.customWidth }}" /></label><span class="sep">×</span><label><span><?php _e( 'Height' ); ?> <small>(px)</small></span><input data-setting="customHeight" type="number" step="1" value="{{ data.model.customHeight }}" /></label>
</div>
<# } #>
<div class="setting link-to">
<span><?php _e('Link To'); ?></span>
<select data-setting="link">
<# if ( data.attachment ) { #>
<option value="file">
<?php esc_html_e( 'Media File' ); ?>
</option>
<option value="post">
<?php esc_html_e( 'Attachment Page' ); ?>
</option>
<# } else { #>
<option value="file">
<?php esc_html_e( 'Image URL' ); ?>
</option>
<# } #>
<option value="custom">
<?php esc_html_e( 'Custom URL' ); ?>
</option>
<option value="none">
<?php esc_html_e( 'None' ); ?>
</option>
</select>
<input type="text" class="link-to-custom" data-setting="linkUrl" />
</div>
<div class="advanced-section">
<h2><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h2>
<div class="advanced-settings hidden">
<div class="advanced-image">
<label class="setting title-text">
<span><?php _e('Image Title Attribute'); ?></span>
<input type="text" data-setting="title" value="{{ data.model.title }}" />
</label>
<label class="setting extra-classes">
<span><?php _e('Image CSS Class'); ?></span>
<input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
</label>
</div>
<div class="advanced-link">
<div class="setting link-target">
<label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new tab' ); ?></label>
</div>
<label class="setting link-rel">
<span><?php _e('Link Rel'); ?></span>
<input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
</label>
<label class="setting link-class-name">
<span><?php _e('Link CSS Class'); ?></span>
<input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
<?php
}
Le beau bouton Remplacer sous la vignette de prévisualisation me pique les yeux. Je le veux, il est mon Chuck Norris!
"Chuck Norris ne programme pas avec un clavier. Il fixe l'ordinateur jusqu'à ce qu'il fasse ce qu'il veut" ( src )
Pour ceux d’entre nous qui ont besoin du clavier pour programmer, il existe un moyen d’injecter le bouton après le sélecteur .image img s’il manque:
où nous étendons la vue média ImageDetails et remplaçons la méthode resetFocus():
add_action( 'print_media_templates', function() { ?>
<script>
jQuery(document).ready( function( $ ) {
wp.media.view.ImageDetails = wp.media.view.ImageDetails.extend({
resetFocus: function() {
this.$( '.link-to-custom' ).blur();
this.$( '.embed-media-settings' ).scrollTop( 0 );
// Inject Replace button if it's missing:
if( ! this.$('.replace-attachment' ).length ) {
this.$( '<div class="actions"> <input type="button" class="replace-attachment button my-theme" value="Replace" /></div>' ).insertAfter('.image img');
}
}
});
});
</script>
<?php } );
Nous pourrions également remplacer la méthode initialize() et accrocher l'événement post-render, comme dans la question ici de @Druzion.
Voici une version de travail et modifiée de cette question:
add_action( 'print_media_templates', function() { ?>
<script>
jQuery(document).ready( function( $ ) {
wp.media.view.ImageDetails = wp.media.view.ImageDetails.extend({
initialize: function() {
this.on( 'post-render', this.add_settings );
},
add_settings: function() {
// Inject Replace button if it's missing:
if( ! this.$('.replace-attachment' ).length ) {
this.$('.image').append( '<div class="actions"><input type="button" class="replace-attachment button my-theme" value="Replace" /></div>');
}
}
});
})
</script>
<?php } );
Notez l'utilisation de this.$ au lieu de $.
De même, nous pourrions remplacer la méthode render(), comme si je jouais avec ici .
Une autre approche consiste à remplacer des parties des modèles par défaut, en utilisant des tampons de sortie et des remplacements de sous-chaînes, comme @bonger l'a fait ici .
Notez également l'erreur javascript, à partir du bouton Remplacer, mentionné par @Dave Romsey
J'ai tellement honte de faire cette technique, mais si personne (en ligne) ne veut aider dans trois jours en demandant partout, vous devenez un peu désespéré de trouver des solutions. ????
function Hijack_caption_off_filter() {
$shame = '<input type="button" class="replace-attachment button my-theme" value="Replace" />';
echo $shame;
}
add_filter( 'disable_captions', 'Hijack_caption_off_filter' );
Je veux mentionner que les gens devraient pas faire des choses comme ça. Ce que j'ai fait ici, c'est que j'ai détourné un filtre booléen de légende [Vrai/Faux] et que je l'ai répercuté sur mon bouton juste pour le faire apparaître sur le media_template.