Fügen Sie benutzerdefinierte Felder zu den Einstellungen der nativen WP-Galerie hinzu

14

ich habe schon nach lösung gesucht und viele ungelöste oder obsolete themen gefunden.

Benutzerdefinierte WordPress-Galerieoption | Benutzerdefiniertes Feld für die Standardgalerie

Ich möchte jedoch einige benutzerdefinierte Felder (Checkboxen, Cyclebuttons usw.) hinzufügen, um der Galerie-Verknüpfung Attribute hinzuzufügen. Hat jemand ein paar Schnipsel?


BEARBEITEN: Endlich habe ich dieses https://wordpress.org/support/topic/how-to-add-fields-to-gallery-settings gefunden und es tut alles, was ich will. :) rownn


EDIT: Basierend auf dem oberen Link habe ich folgende Zeilen geschrieben.

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 Shortcode Shortcode

Alles funktioniert gut nebenbei: Das Zahlenfeld ist nicht mit einem Shortcode gefüllt. Ich glaube, der Grund dafür ist, dass der HTML-Input-Tag-Typ "Zahl" nur Ganzzahlen für "Wert" akzeptiert. Was muss ich zum Code hinzufügen, um die Zeichenfolge von ds_number in int zu ändern?

Grüße rownn

rownn
quelle
2
Bitte poste deinen Code, ob er funktioniert oder nicht.
s_ha_dum
Ich bin erwischt! Ich habe keinen Code. Ich weiß, dass es schwierig ist, nach Schnipseln zu fragen, aber ich habe keine Ahnung. : / Ich wollte einen Arbeitscode analysieren, um zu sehen, wie es funktioniert. Ich weiß, dass ich es mit add_action () zum Hinzufügen und Speichern verwalten muss, aber ich weiß nicht, wie bestimmte Typen an bestimmten Stellen erstellt werden.
31.
@rownn, du solltest deinen Code eher als Antwort posten, als die Frage zu bearbeiten - dann akzeptiere ihn: :)
Jen

Antworten:

1

Danke für deinen Code. Ich habe dieses Problem weiter untersucht (dies ist kein Problem bei der Formatierung von Ganzzahlen). Die einzige Lösung, die ich für Zahlenfelder gefunden habe, ist, mehr WP JS zu patchen. Hier ist der gesamte Code mit Änderungen, die jeden Eingabetyp unterstützen:

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
quelle
1
sieht aus wie "wp.media.gallery.defaults" ist jetzt "wp.media.galleryDefaults"
locomo