Intereting Posts
comment_notes_before не работает Добавление шаблона в пользовательский тип сообщения Автоматическое резервное копирование перед автоматическим обновлением WordPress Пауза / Остановить видео и показать всплывающее сообщение Mediaelement.js Как получить тему index.php, указанную в редакторе внешнего вида Форма входа, имя пользователя или адрес электронной почты Являются ли метаданные комментариев включенными в файл экспорта? Похожие сообщения с удалением некоторых категорий Где я должен добавить необходимый код для добавления дополнительного атрибута в массив тегов kses? Как получить список дочерних идентификаторов для названной категории? Ошибка при попытке WordPress администратора при попытке входа в систему 401 перемещение элемента подменю admin в позицию верхнего уровня Автоматическое разделение сообщений по всему WordPress Multisite Как сделать pagination_links показанным как 01 02 03, вместо 1 2 3? Страница для печати со всеми сообщениями из тега

Добавить кнопку в WordPress Image Details modal

Я искал пару дней, поэтому я буду как можно короче, чтобы уйти от ваших путей.

То, что я пытаюсь сделать, должно быть очень простым с jQuery (append), я думаю, но по какой-то странной причине я не могу это сделать, добавляя .js к серверу. Кроме того, этот пользовательский хак является временным, пока редактор Gutenberg не выпустят его в ядро, и все это больше не понадобится.

В :

Просто добавьте «Привет, мир!». string к изображению Детали модальный, где красный текст на скриншоте ниже .

Скриншоты ниже – быстрый саммит из того, что я делаю.

введите описание изображения здесь

Эта мода изображения появляется, когда вы нажимаете Редактировать изображение на одном изображении, которое не является частью вашей медиабиблиотеки и не имеет Post_ID. Например, изображения заполнитель (URL).

Скриншот №. 2. Модальное изображение этой модели – это то, что вы получаете, когда вы нажимаете « Редактировать изображение» на изображении, которое было добавлено в сообщение «Библиотека мультимедиа» раньше. Красивая кнопка « Заменить» под миниатюрой предварительного просмотра высунула мне глаза, я хочу его, он мой Чак Норрис!

введите описание изображения здесь

Solutions Collecting From Web of "Добавить кнопку в WordPress Image Details modal"

Вот альтернативный способ манипулирования шаблоном. Я адаптировал решение ниже из этой публикации .

В приведенном ниже подходе к print_media_templates , который запускается в нижней части wp-includes/media-template.php , используется для вывода некоторого JavaScript, который удаляет шаблон изображения подчеркивания по умолчанию ( <script type="text/html" id="tmpl-image-details"> ) и заменяет его дублированной версией, которую мы можем изменить в соответствии с нашими потребностями.

Я добавил Привет, мир! в измененном шаблоне, а также кнопку « Заменить» (больше на секунду). Один из недостатков этого подхода заключается в том, что если / когда ядро ​​WordPress обновлено, наш разветвленный шаблон не будет отражать никаких изменений в этом конкретном медиа-шаблоне.

Другая проблема заключается в том, что просто добавить кнопку недостаточно. Вы можете активировать кнопку, удалив комментарии HTML ( <!-- и --> ), которые я завернул, если вы хотите продолжить. Использование стандартной кнопки « Заменить» на изображении, которое не является частью медиа-библиотеки, вызовет ошибку в консоли, но, похоже, работает никогда. В идеале должна быть создана пользовательская кнопка или должен быть реализован JS-контроллер, который обрабатывает функциональность кнопки Replace (что я не знаю, как это сделать).

 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 ); ?> &ndash; {{ size.width }} &times; {{ 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">&times;</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 } 

Красивая кнопка «Заменить» под миниатюрой предварительного просмотра высунула мне глаза, я хочу его, он мой Чак Норрис!

«Чак Норрис не программирует клавиатуру, он смотрит на компьютер, пока он не делает то, что он хочет» ( src )

Для тех из нас, кому нужна клавиатура для программирования, тогда есть способ ввести кнопку после селектора .image img , если она отсутствует:

замещать

где мы расширяем ImageDetails медиаданных ImageDetails и переопределяем метод 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 } ); 

Мы также могли бы переопределить метод initialize() и подключиться к событию post-render , как в вопросе здесь @Druzion.

Вот рабочая и измененная версия этого вопроса:

 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 } ); 

Обратите внимание на this.$ Usage вместо $ .

Аналогично, мы могли бы переопределить метод render() , как я играл здесь .

Другой подход заключается в замене частей шаблонов по умолчанию, использовании буферизации вывода и подстроек, как это делал @bonger.

Также обратите внимание на ошибку javascript, используя использование кнопки Replace, упомянутую @Dave Romsey

Мне так стыдно за эту технику, но если никто (онлайн) не хочет помогать через три дня, спрашивая повсюду, вы становитесь несколько отчаянным, чтобы найти решения. 🤢

 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' ); 

Я хочу упомянуть, что люди не должны так делать. Что я здесь сделал, я захватил булевский фильтр caption [True / False] и эхом отозвал свою кнопку, чтобы он появился на media_template.