เพิ่มฟิลด์ที่กำหนดเองไปที่การตั้งค่าแกลเลอรี่พื้นเมืองของ WP

ฉันค้นหาวิธีแก้ปัญหาแล้วและพบหัวข้อที่ยังไม่ได้แก้ไขหรือล้าสมัยมากมาย

ตัวเลือกแกลเลอรี WordPress ที่กำหนดเอง | ฟิลด์ที่กำหนดเองสำหรับแกลเลอรีเริ่มต้น

อย่างไรก็ตามฉันต้องการเพิ่มฟิลด์ที่กำหนดเอง (ช่องทำเครื่องหมายปุ่มวงกลม ฯลฯ ) เพื่อเพิ่มคุณสมบัติให้กับทางลัดแกลเลอรี ไม่มีใครมีตัวอย่างบ้างไหม?

แก้ไข: ในที่สุดฉันก็พบhttps://wordpress.org/support/topic/how-to-add-fields-to-gallery-settingsและทำทุกอย่างที่ฉันต้องการ :) rownn

แก้ไข: ตามลิงค์บนฉันเขียนบรรทัดต่อไปนี้

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

});

UserInterface ย่อ

Everthings ทำงานได้ดีข้าง: ฟิลด์หมายเลขไม่ได้ถูกเติมด้วยรหัสย่อ ฉันเชื่อว่านี่คือเหตุผลที่ว่า "หมายเลข" ประเภทแท็ก HTML ยอมรับเฉพาะจำนวนเต็มสำหรับ "ค่า" ฉันต้องเพิ่มอะไรในรหัสเพื่อเปลี่ยนสตริงของ ds_number เป็น int?

สวัสดีเข้าแถว

ขอบคุณสำหรับรหัสของคุณ ฉันได้ตรวจสอบปัญหานี้เพิ่มเติม (นี่ไม่ใช่ปัญหาการจัดรูปแบบจำนวนเต็ม) ทางออกเดียวที่ฉันใช้สำหรับฟิลด์หมายเลขคือลิงแพทช์ WP เพิ่มเติม นี่คือรหัสทั้งหมดที่มีการแก้ไขซึ่งรองรับประเภทอินพุตใด ๆ :

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