Wp yerel galeri ayarlarına özel alanlar ekleme


14

Zaten çözüm aradım ve bir çok çözülmemiş veya eski konular buldum.

Özel wordpress galerisi seçeneği | Varsayılan galeri için özel alan

Ancak, galeri kısayoluna nitelikler eklemek için bazı özel alanlar (onay kutuları, döngü düğmeleri vb.) Eklemek istiyorum. Kimsenin pasajı var mı?


DÜZENLEME: Sonunda bu https://wordpress.org/support/topic/how-to-add-fields-to-gallery-settings buldum ve bunu yapmak istiyorum. :) rownn


EDIT: Üst bağlantıya dayanarak aşağıdaki satırları yazdım.

add_action('print_media_templates', function(){
?>
<script type="text/html" id="tmpl-custom-gallery-setting">
    <h3 style="z-index: -1;">___________________________________________________________________________________________</h3>
    <h3>Custom Settings</h3>

    <label class="setting">
        <span><?php _e('Text'); ?></span>
        <input type="text" value="" data-setting="ds_text" style="float:left;">
    </label>

    <label class="setting">
        <span><?php _e('Textarea'); ?></span>
        <textarea value="" data-setting="ds_textarea" style="float:left;"></textarea>
    </label>

    <label class="setting">
        <span><?php _e('Number'); ?></span>
        <input type="number" value="" data-setting="ds_number" style="float:left;" min="1" max="9">
    </label>

    <label class="setting">
      <span><?php _e('Select'); ?></span>
      <select data-setting="ds_select">
        <option value="option1"> 'Option-1' </option>
        <option value="option2"> 'Option-2' </option>
      </select>
    </label>

    <label class="setting">
        <span><?php _e('Bool'); ?></span>
        <input type="checkbox" data-setting="ds_bool">
    </label>

</script>

<script>

    jQuery(document).ready(function()
    {
        _.extend(wp.media.gallery.defaults, {
        ds_text: 'no text',
        ds_textarea: 'no more text',
        ds_number: "3",
        ds_select: 'option1',
        ds_bool: false,
        ds_text1: 'dummdideldei'
        });

        wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
        template: function(view){
          return wp.media.template('gallery-settings')(view)
               + wp.media.template('custom-gallery-setting')(view);
        }
        });

    });

</script>
<?php

});

ui Kullanıcı Arabirimi kısa kod Kısa Kodu

Everthings yanında iyi çalışıyor: Sayı alanı kısa kodla doldurulmuyor. Bunun nedeni, HTML-girdi-etiket türü "sayı" nın yalnızca "değer" için tamsayıyı kabul ettiğine inanıyorum. Ds_number dizesini int olarak değiştirmek için koda eklemek için ne yapmam gerekir?

Selamlar


2
Lütfen kodunuzu gönderin, çalışın veya çalışmayın.
s_ha_dum

Yakalandım! Kodum yok. Snippes istemenin kalın bir yolu olduğunu biliyorum, ama hiçbir fikrim yok. : / Nasıl çalıştığını görmek için çalışan bir kodu analiz etmek istedim. Eklemek ve kaydetmek için add_action () ile yönetmek için Ive biliyorum, ama nasıl belirli yerlerde belirli türleri oluşturmak bilmiyorum.
rownn

@rownn, kodunuzu soruyu düzenlemek yerine bir cevap olarak göndermelisiniz - daha sonra kabul edin: :)
Jen

Yanıtlar:


1

Kodun için teşekkürler. Bu sorunu daha fazla araştırdım (bu bir tamsayı biçimlendirme sorunu değil). Sayı alanları için bulduğum tek çözüm daha fazla WP JS yaması yapmak. İşte herhangi bir giriş türünü destekleyen değişikliklerle kodun tamamı:

add_action('print_media_templates', function(){
?>
<script type="text/html" id="tmpl-custom-gallery-setting">
    <h3>Custom Settings</h3>

    <label class="setting">
        <span><?php _e('Text'); ?></span>
        <input type="text" value="" data-setting="ds_text" style="float:left;">
    </label>

    <label class="setting">
        <span><?php _e('Textarea'); ?></span>
        <textarea value="" data-setting="ds_textarea" style="float:left;"></textarea>
    </label>

    <label class="setting">
        <span><?php _e('Number'); ?></span>
        <input type="number" value="" data-setting="ds_number" style="float:left;" min="1" max="9">
    </label>

    <label class="setting">
      <span><?php _e('Select'); ?></span>
      <select data-setting="ds_select">
        <option value="option1"> 'Option-1' </option>
        <option value="option2"> 'Option-2' </option>
      </select>
    </label>

    <label class="setting">
        <span><?php _e('Bool'); ?></span>
        <input type="checkbox" data-setting="ds_bool">
    </label>

</script>

<script>

    jQuery(document).ready(function()
    {
        _.extend(wp.media.gallery.defaults, {
        ds_text: 'no text',
        ds_textarea: 'no more text',
        ds_number: "3",
        ds_select: 'option1',
        ds_bool: false,
        ds_text1: 'dummdideldei'
        });

        wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
        template: function(view){
          return wp.media.template('gallery-settings')(view)
               + wp.media.template('custom-gallery-setting')(view);
        },
        // this is function copies from WP core /wp-includes/js/media-views.js?ver=4.6.1
        update: function( key ) {
          var value = this.model.get( key ),
            $setting = this.$('[data-setting="' + key + '"]'),
            $buttons, $value;

          // Bail if we didn't find a matching setting.
          if ( ! $setting.length ) {
            return;
          }

          // Attempt to determine how the setting is rendered and update
          // the selected value.

          // Handle dropdowns.
          if ( $setting.is('select') ) {
            $value = $setting.find('[value="' + value + '"]');

            if ( $value.length ) {
              $setting.find('option').prop( 'selected', false );
              $value.prop( 'selected', true );
            } else {
              // If we can't find the desired value, record what *is* selected.
              this.model.set( key, $setting.find(':selected').val() );
            }

          // Handle button groups.
          } else if ( $setting.hasClass('button-group') ) {
            $buttons = $setting.find('button').removeClass('active');
            $buttons.filter( '[value="' + value + '"]' ).addClass('active');

          // Handle text inputs and textareas.
          } else if ( $setting.is('input[type="text"], textarea') ) {
            if ( ! $setting.is(':focus') ) {
              $setting.val( value );
            }
          // Handle checkboxes.
          } else if ( $setting.is('input[type="checkbox"]') ) {
            $setting.prop( 'checked', !! value && 'false' !== value );
          }
          // HERE the only modification I made
          else {
            $setting.val( value ); // treat any other input type same as text inputs
          }
          // end of that modification
        },
        });
    });

</script>
<?php

1
"wp.media.gallery.defaults" gibi görünüyor şimdi "wp.media.galleryDefaults"
locomo
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.