Thêm các trường tùy chỉnh vào cài đặt thư viện gốc wp


14

tôi đã tìm kiếm giải pháp và tìm thấy rất nhiều chủ đề chưa được giải quyết hoặc lỗi thời.

Tùy chọn bộ sưu tập wordpress | Trường tùy chỉnh cho thư viện mặc định

Tuy nhiên, tôi đã muốn thêm một số trường tùy chỉnh (hộp kiểm, nút bấm, v.v.) để thêm thuộc tính vào lối tắt thư viện. Có ai có một số đoạn?


EDIT: Cuối cùng Ive đã tìm thấy https://wordpress.org/support/topic/how-to-add-fields-to-gallery-sinstall và nó làm tất cả những gì tôi muốn nó làm. :) nổi tiếng


EDIT: Dựa trên liên kết trên tôi đã viết những dòng sau.

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 diện người dùng mã ngắn shortcode

Everthings hoạt động tốt bên cạnh: Trường số không được điền bởi shortcode. Tôi tin rằng lý do cho điều này là loại "số" thẻ HTML đầu vào chỉ chấp nhận số nguyên cho "giá trị". Tôi phải thêm gì vào mã để thay đổi chuỗi của DS_number thành int?

Chúc mừng


2
Xin vui lòng gửi mã của bạn, làm việc hay không.
s_ha_dum

Tôi bị bắt! Tôi không có mã. Tôi biết đó là một cách dày để yêu cầu snippes, nhưng tôi không biết. : / Tôi muốn phân tích một mã làm việc để xem nó hoạt động như thế nào. Tôi biết Ive để quản lý nó bằng add_action () để thêm và lưu, nhưng tôi không biết cách tạo một số loại nhất định tại các địa điểm nhất định.
xuất hiện

@rownn, bạn nên đăng mã của mình dưới dạng câu trả lời thay vì chỉnh sửa câu hỏi - sau đó chấp nhận nó: :)
Jen

Câu trả lời:


1

Cảm ơn mã của bạn. Tôi đã điều tra vấn đề này thêm (đây không phải là vấn đề định dạng số nguyên). Giải pháp duy nhất tôi nghĩ ra cho các trường số là khỉ vá thêm WP JS. Đây là toàn bộ mã với các sửa đổi hỗ trợ bất kỳ loại đầu vào:

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
có vẻ như "wp.media.gallery.defaults" hiện là "wp.media.galleryDefaults"
locomo
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.