ビジュアルエディタの使用時にギャラリー設定ページで複数のテンプレートビューを許可する
私はこの 答え を拡張して、ショートコードの属性をUIから切り替え、それらの属性に基づいてギャラリーのマークアップを変更できるようにしています。
[gallery owl="true" link="none" size="medium" ids="378,377,376,375,374,373"]
この場合、owlがtrueに設定されていると、 Owl Carousel がギャラリーの場所にレンダリングされます。しかし、他のショートコードと同様に、正しい属性を覚えておく必要があります。カルーセルを交換して iDangerous Swiper と言う機能も欲しいのですが、サポートされている機能セットに基づくとowlという属性は限られていて覚えにくいです。
幸いなことに私はこの サンプル を使ってギャラリーに〜カスタムフィールド〜を追加するスニペットを見つけました。
add_action('print_media_templates', function(){
// define your backbone template;
// the "tmpl-" prefix is required,
// and your input field should have a data-setting attribute
// matching the shortcode name
?>
<script type="text/html" id="tmpl-my-custom-gallery-setting">
<label class="setting">
<span><?php _e('My setting'); ?></span>
<select data-setting="my_custom_attr">
<option value="foo"> Foo </option>
<option value="bar"> Bar </option>
<option value="default_val"> Default Value </option>
</select>
</label>
</script>
<script>
jQuery(document).ready(function(){
// add your shortcode attribute and its default value to the
// gallery settings list; $.extend should work as well...
_.extend(wp.media.gallery.defaults, {
my_custom_attr: 'default_val'
});
// merge default gallery settings template with yours
wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
template: function(view){
return wp.media.template('gallery-settings')(view)
+ wp.media.template('my-custom-gallery-setting')(view);
}
});
});
</script>
<?php
});
残念ながら、投稿は2歳以上で終了しています。
チャレンジは、テンプレートビューを自分の設定に置き換えると、他のプラグインまたはテーマから設定設定を拡張することができなくなります。 template:として設定された最後のビューが常に勝者です。
質問：私の設定が示すだけでなく、他のプラグインやテーマの変更の機能を妨げないようにするために、どのようにこれをコーディングしてより大きな柔軟性を可能にすることができますか？
テンプレートはスクリプト形式で存在しているようです。
<script type="text/html" id="tmpl-my-custom-gallery-setting">
上記のテンプレートをレンダリングするには、
wp.media.template('my-custom-gallery-setting')(view)
template:ロジックを置き換えるので、テンプレートIDのリストを格納するだけです。
if (!wp.media.gallery.templates) wp.media.gallery.templates = ['gallery-settings'];
wp.media.gallery.templates.Push('my-custom-gallery-setting');
その後、利用可能なすべてのビューをループします。
wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
template: function (view) {
var output = '';
for (var i in wp.media.gallery.templates) {
output += wp.media.template(wp.media.gallery.templates[i])(view);
}
return output;
}
});
RESULT
そのため、すべてのオプションがドロップダウンとしてUIに追加されているため、クライアントはギャラリーを変更するためにショートコード属性を覚える必要はありません。
[gallery link="none" type="owl" shape="square" ids="7228,7227,7226,7128,7127"]
おまけとして、サポートされているタイプのリストはフィルタを通して渡されるので、サードパーティのソースからの選択肢の数を増減することができます。
ロケーションA
add_action('print_media_templates', function() {
// define your backbone template;
// the "tmpl-" prefix is required,
// and your input field should have a data-setting attribute
// matching the shortcode name
$gallery_types = apply_filters('print_media_templates_gallery_settings_types',
array(
'swiper' => ' Swiper',
'owl' => ' Owl Carousel',
'revolution' => ' Revolution Slider',
'default_val' => ' Default'));
?>
<script type="text/html" id="tmpl-custom-gallery-type-setting">
<label class="setting">
<span><?php _e('Layout Type'); ?></span>
<select data-setting="type"><?php
foreach($gallery_types as $key => $value) {
echo "<option value=\"$key\">$value</option>";
}
?>
</select>
</label>
</script>
<script>
jQuery(document).ready(function () {
// add your shortcode attribute and its default value to the
// gallery settings list; $.extend should work as well...
_.extend(wp.media.gallery.defaults, {
type: 'default_val'
});
// join default gallery settings template with yours -- store in list
if (!wp.media.gallery.templates) wp.media.gallery.templates = ['gallery-settings'];
wp.media.gallery.templates.Push('custom-gallery-type-setting');
// loop through list -- allowing for other templates/settings
wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
template: function (view) {
var output = '';
for (var i in wp.media.gallery.templates) {
output += wp.media.template(wp.media.gallery.templates[i])(view);
}
return output;
}
});
});
</script>
<?php
});
ロケーションB
add_action('print_media_templates', function() {
// define your backbone template;
// the "tmpl-" prefix is required,
// and your input field should have a data-setting attribute
// matching the shortcode name
$gallery_types = apply_filters('print_media_templates_gallery_settings_shapes',
array(
'circle' => ' Circle',
'rectangle' => ' Rectangle',
'square' => ' Square',
'default_val' => ' Default'));
?>
<script type="text/html" id="tmpl-custom-gallery-shapes">
<label class="setting">
<span><?php _e('Shapes'); ?></span>
<select data-setting="shape"><?php
foreach($gallery_types as $key => $value) {
echo "<option value=\"$key\">$value</option>";
}
?>
</select>
</label>
</script>
<script>
jQuery(document).ready(function () {
// add your shortcode attribute and its default value to the
// gallery settings list; $.extend should work as well...
_.extend(wp.media.gallery.defaults, {
shape: 'default_val'
});
// join default gallery settings template with yours -- store in list
if (!wp.media.gallery.templates) wp.media.gallery.templates = ['gallery-settings'];
wp.media.gallery.templates.Push('custom-gallery-shapes');
// loop through list -- allowing for other templates/settings
wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
template: function (view) {
var output = '';
for (var i in wp.media.gallery.templates) {
output += wp.media.template(wp.media.gallery.templates[i])(view);
}
return output;
}
});
});
</script>
<?php
});