Was ich schließlich erreichen möchte, sind zusätzliche Einstellungen im Feld Bilddetails, die im Bild- <img>
Tag als data-*
Attribute gespeichert werden
Beispiel: <img src="..." data-my_setting="...">
MEIN CODE
Ich erstelle ein Plugin und muss weitere Einstellungen vornehmen, wenn Sie Bilder bearbeiten. Bisher habe ich folgenden Code:
jQuery(function($) {
var imageDetails = wp.media.view.ImageDetails
wp.media.view.ImageDetails = wp.media.view.ImageDetails.extend({
// Initialize - Call function to add settings when rendered
initialize: function() {
this.on('post-render', this.add_settings);
},
// To add the Settings
add_settings: function() {
$('.advanced-section').prepend('\
<h2>My Settings</h2>\
<input type="text" class="my_setting">\
');
// Set Options
this.controller.image.set({"data-settings": 'setting-value-here'})
}
});
}) // End of jQuery(function($))
Ich habe einen neuen Beitrag erstellt und ein Bild hinzugefügt, dann darauf geklickt und auf Bearbeiten gedrückt (das Stiftsymbol in der Symbolleiste, das auftauchte). Ich landete auf der Seite mit den Bilddetails, und so sah es aus:
So weit, ist es gut. In dieser Zeile:
this.controller.image.set({"data-settings": 'setting-value-here'})
Normalerweise würde ich jQuery verwenden, um den Wert der Eingabe abzurufen, aber zu Testzwecken habe ich ihn in einen statischen Wert von geändert 'setting-value-here'
. Ich habe unten rechts im Feld "Bilddetails" auf "Aktualisieren" geklickt.
DAS PROBLEM
Im Texteditor wird der HTML-Code folgendermaßen angezeigt:
Dies nicht haben ein data-settings="setting-value-here"
, wie kommt das ?
Wenn ich die Zeile durch diese ersetze:
this.controller.image.set({alt: 'setting-value-here'})
Es tut das ändern ALT zu Tag alt="setting-value-here"
. Was mache ich also falsch, wenn ich versuche, das data- * Attribut festzulegen?
DIE LÖSUNG
Dank @bonger (der die volle Prämie von 50 Reputation erhalten hat) habe ich den folgenden Code:
PHP:
function add_my_settings() {
ob_start();
wp_print_media_templates();
$tpl = ob_get_clean();
if ( ( $idx = strpos( $tpl, 'tmpl-image-details' ) ) !== false
&& ( $before_idx = strpos( $tpl, '<div class="advanced-section">', $idx ) ) !== false ) {
ob_start();
?>
<div class="my_setting-section">
<h2><?php _e( 'My Settings' ); ?></h2>
<div class="my_setting">
<label class="setting my_setting">
<span><?php _e( 'My Setting' ); ?></span>
<input type="text" data-setting="my_setting" value="{{ data.model.my_setting }}" />
</label>
</div>
</div>
<?php
$my_section = ob_get_clean();
$tpl = substr_replace( $tpl, $my_section, $before_idx, 0 );
}
echo $tpl;
};
// Hack the output of wp_print_media_templates()
add_action('wp_enqueue_media', $func =
function() {
remove_action('admin_footer', 'wp_print_media_templates');
add_action('admin_footer', 'add_my_settings');
}
);
JavaScript: (Muss mit in die Warteschlange gestellt werden wp_enqueue_script()
)
// When Image is Edited
wp.media.events.on('editor:image-edit', function(data) {
data.metadata.my_setting = data.editor.dom.getAttrib( data.image, 'data-my_setting' );
});
// When Image is Updated
wp.media.events.on('editor:image-update', function(data) {
data.editor.dom.setAttrib( data.image, 'data-my_setting', data.metadata.my_setting );
});
Antworten:
Eine Möglichkeit, dies zu tun, besteht darin, das (sehr praktische)
editor:image-edit
undeditor:image-update
vom tinymce-wpeditimage
Plugin ausgelöste Ereignis zu verwenden, um den Dom direkt abzurufen / festzulegen ( aktualisiert , um ihn inwp_enqueue_media
Aktion umzuhüllen ):Um das Einstellungsfeld hinzuzufügen und auszufüllen, ist es möglicherweise besser, die Ausgabe zu hacken,
wp_print_media_templates()
als sie zu überschreibenImageDetails.initialize()
( aktualisiert , um sie inwp_enqueue_media
Aktion umzuhüllen ):quelle
wp_enqueue_media()
ist. Vielleicht ist ein schöner Weg, um das verwendenwp_enqueue_media
Aktion , die am Ende gefeuert wirdwp_enqueue_media()
, wickeln dh alle den Code in einemadd_action( 'wp_enqueue_media', function () { /*the code*/ } );
wp.template
in "wp-includes / js / wp-util.js") .... Ich denke