WordPress画像詳細モーダルに追加ボタン
私は今から2、3日探しているので、私はあなたの方法から抜け出すために私の質問をできるだけ短くしておきます。
私がやろうとしていることは私が推測するjQuery（非常に基本的な）で非常に基本的であるべきですが、バックエンドに.jsを追加している間私はそれを実現できませんまた、このカスタムハックは、 Gutenbergエディタ がコアにリリースされるまでの一時的なものであり、これ以上必要になることはありません。
Q：
単に「Hello world！」を追加してください。下のスクリーンショットの赤いテキストがであるImage Detailsモーダルへの文字列。
-
以下のスクリーンショットは、私がしていることの簡単なまとめです。
この画像の詳細モーダルは、メディアライブラリのnotの部分でPost_IDがない単一の画像に対して 編集 imageを押すと表示されます。たとえばプレースホルダ（URL）画像。
スクリーンショット番号2.この画像の詳細モーダルは、メディアライブラリの投稿に追加された画像の 画像の編集 をクリックしたときに表示されるものです。プレビューのサムネイルの下にある美しい 置換 ボタンが私の目に入っています。彼が欲しいのですが、彼は私のChuck Norrisです！
これはテンプレートを操作する代わりのテクニックです。私は以下の解決策を この記事 から書き直しました。
以下のアプローチでは、print_media_templatesの下部で起動されるwp-includes/media-template.phpフックを使用して、デフォルトの画像詳細アンダースコアテンプレート（<script type="text/html" id="tmpl-image-details">）を削除し、必要に応じて変更可能な重複バージョンに置き換えるJavaScriptを出力します。 。
こんにちは、世界です。修正されたテンプレートで 、および Replace ボタンも表示されます。このアプローチの欠点の1つは、WordPressコアが更新されたときに、フォークされたテンプレートがこの特定のメディアテンプレートに対する変更を反映しないことです。
ここでの別の問題は、単にボタンを追加するだけでは不十分であるということです。あなたがとにかく続行したい場合、私がそれに包んだHTMLコメント（<!--と-->）を削除することによってボタンをアクティブにすることができます。メディアライブラリの一部ではない画像に対して標準の 置換 ボタンを使用すると、コンソールにエラーが表示されますが、それでも問題はありません。理想的には、カスタムボタンを作成するか、 Replace ボタンの機能を処理するJSコントローラを実装する必要があります（これはどうすればよいかわかりません）。
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
}
プレビューのサムネイルの下にある美しい置換ボタンが私の目に入っています。彼が欲しいのです、彼は私のChuck Norrisです！
"Chuck Norrisはキーボードでプログラムしない。彼は望んだことができるまでコンピュータを見つめている" （ src ）
キーボードをプログラムする必要がある私たちにとって、.image imgセレクタの後にボタンがない場合はそれを挿入する方法があります。
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 } );
@Druzionの質問 here のように、initialize()メソッドをオーバーライドしてpost-renderイベントにフックすることもできます。
これは、その質問からの修正版です。
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.$の代わりに$を使用することに注意してください。
同様に、 here でプレイしたように、render()メソッドをオーバーライドすることもできます。
別のアプローチは、@bongerが here を行ったように、出力バッファリングとサブストリング置換を使用して、デフォルトのテンプレートの一部を置換することです。
@Dave Romseyで言及されているReplaceボタンの使い方からのjavascriptエラーにも注意してください
私はこのテクニックをやることをとても恥じていますが、誰も （オンライン） を求めていないのであれば、どこにでも解決策を見つけることがやむを得ず求められます。 ????
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' );
私は人々がnotをこのようなことをするべきであることに言及したいです。私がここでしたことは、キャプションブール値フィルタ[True/False]をハイジャックし、media_templateに表示させるためだけにボタンをエコーしました。