Dodaj niestandardowe pola do ustawień natywnej galerii wp

14

szukałem już rozwiązania i znalazłem wiele nierozwiązanych lub przestarzałych tematów.

Opcja niestandardowej galerii Wordpress | Pole niestandardowe dla domyślnej galerii

Chciałbym jednak dodać pola niestandardowe (pola wyboru, przyciski cykliczne itp.), Aby dodać atrybuty do skrótu galerii. Czy ktoś ma jakieś wycinki?


EDYCJA: W końcu znalazłem to https://wordpress.org/support/topic/how-to-add-fields-to-gallery-settings i robi wszystko, co chcę. :) rownn


EDYCJA: Na podstawie górnego linku napisałem następujące wiersze.

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 userinterface krótki kod Krótki kod

Everthings działa dobrze: pole liczbowe nie jest wypełniane przez shortcode. Uważam, że powodem tego jest to, że znacznik wejściowy HTML „liczba” akceptuje tylko liczbę całkowitą dla „wartości”. Co muszę dodać do kodu, aby zmienić ciąg ds_number na int?

Pozdrawiamy z góry

rownn
źródło
2
Prześlij swój kod, działający lub nie.
s_ha_dum
Jestem złapany! Nie mam kodu Wiem, że to gęsty sposób, by prosić o strzały, ale nie mam pojęcia. : / Chciałem przeanalizować działający kod, aby zobaczyć, jak to działa. Wiem, że muszę to zarządzać za pomocą add działań () do dodawania i zapisywania, ale nie wiem, jak tworzyć określone typy w określonych miejscach.
ranny
@rownn, powinieneś opublikować swój kod jako odpowiedź, a nie edytować pytanie - a następnie zaakceptuj je: :)
Jen

Odpowiedzi:

1

Dziękuję za Twój kod. Dokładnie zbadałem ten problem (nie jest to problem z formatowaniem liczb całkowitych). Jedynym rozwiązaniem, jakie wymyśliłem dla pól liczbowych, jest załatanie większej ilości WP JS. Oto cały kod z modyfikacjami, które obsługują dowolny typ danych wejściowych:

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
jmarceli
źródło
1
wygląda na to, że „wp.media.gallery.defaults” to teraz „wp.media.galleryDefaults”
locomo 1'17