web-dev-qa-db-fra.com

Autoriser plusieurs vues de modèle sur la page Paramètres de la galerie lors de l'utilisation de Visual Editor

J'essaie d'étendre cette réponse en permettant de changer les attributs de shortcode depuis l'interface utilisateur et de modifier le balisage de la galerie en fonction de ces attributs.

[gallery owl="true" link="none" size="medium" ids="378,377,376,375,374,373"]

Dans ce cas, si owl est défini sur true, un Owl Carousel serait rendu à la place de la galerie - ce qui est le cas. Mais comme tout code abrégé, vous devez vous rappeler les attributs appropriés. Voyant que je souhaite également pouvoir échanger des carrousels pour indiquer iDangerous Swiper , l'attribut owl est limité et difficile à mémoriser en fonction des fonctionnalités prises en charge.

Heureusement pour moi, j'ai trouvé un extrait pour ajouter des ~ champs personnalisés ~ à la galerie en utilisant ce sample .

add_action('print_media_templates', function(){

  // define your backbone template;
  // the "tmpl-" prefix is required,
  // and your input field should have a data-setting attribute
  // matching the shortcode name
  ?>
  <script type="text/html" id="tmpl-my-custom-gallery-setting">
    <label class="setting">
      <span><?php _e('My setting'); ?></span>
      <select data-setting="my_custom_attr">
        <option value="foo"> Foo </option>
        <option value="bar"> Bar </option>
        <option value="default_val"> Default Value </option>
      </select>
    </label>
  </script>

  <script>

    jQuery(document).ready(function(){

      // add your shortcode attribute and its default value to the
      // gallery settings list; $.extend should work as well...
      _.extend(wp.media.gallery.defaults, {
        my_custom_attr: 'default_val'
      });

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

    });

  </script>
  <?php

});

Malheureusement, le poste a plus de 2 ans et est fermé.

Lechallengeest: si je remplace la vue du modèle par mes paramètres, il est impossible d'étendre les paramètres définis à partir d'un autre plugin ou thème. La dernière vue définie comme template: est toujours gagnante.

Lequestion: Comment puis-je coder ceci pour permettre une plus grande flexibilité, où non seulement mes paramètres sont affichés, mais je ne bloque pas non plus la possibilité d’autres modifications de plugins/thèmes?

plugin-developmentshortcodegalleryattributemedia-settings
3
jgraup

Il semble que les modèles vivent sous forme de script

<script type="text/html" id="tmpl-my-custom-gallery-setting">

Pour rendre le modèle ci-dessus, il faudrait

wp.media.template('my-custom-gallery-setting')(view)

Comme nous remplaçons la logique template:, il ne reste plus qu'à stocker une liste d'ID de modèles.

if (!wp.media.gallery.templates) wp.media.gallery.templates = ['gallery-settings'];
wp.media.gallery.templates.Push('my-custom-gallery-setting');

Puis parcourez toutes les vues disponibles

wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
    template: function (view) {
        var output = '';
        for (var i in wp.media.gallery.templates) {
            output += wp.media.template(wp.media.gallery.templates[i])(view);
        }
        return output;
    }
});

RÉSULTAT

Le client n'a donc plus besoin de se rappeler des attributs de code court pour modifier la galerie, car toutes les options ont été ajoutées à l'interface utilisateur sous forme de listes déroulantes.

[gallery link="none" type="owl" shape="square" ids="7228,7227,7226,7128,7127"]

En prime, la liste des types pris en charge est passée à travers un filtre afin que vous puissiez ajouter ou réduire le nombre de choix d'une source tierce.

 enter image description here 

LOCATION A

add_action('print_media_templates', function() {

    // define your backbone template;
    // the "tmpl-" prefix is required,
    // and your input field should have a data-setting attribute
    // matching the shortcode name
    $gallery_types = apply_filters('print_media_templates_gallery_settings_types',
                                   array(
                                       'swiper'      => ' Swiper',
                                       'owl'         => ' Owl Carousel',
                                       'revolution'  => ' Revolution Slider',
                                       'default_val' => ' Default'));
    ?>
    <script type="text/html" id="tmpl-custom-gallery-type-setting">
        <label class="setting">
            <span><?php _e('Layout Type'); ?></span>
            <select data-setting="type"><?php
                foreach($gallery_types as $key => $value) {
                    echo "<option value=\"$key\">$value</option>";
                }
                ?>
            </select>
        </label>
    </script>

    <script>

        jQuery(document).ready(function () {

            // add your shortcode attribute and its default value to the
            // gallery settings list; $.extend should work as well...
            _.extend(wp.media.gallery.defaults, {
                type: 'default_val'
            });

            // join default gallery settings template with yours -- store in list
            if (!wp.media.gallery.templates) wp.media.gallery.templates = ['gallery-settings'];
            wp.media.gallery.templates.Push('custom-gallery-type-setting');

            // loop through list -- allowing for other templates/settings
            wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
                template: function (view) {
                    var output = '';
                    for (var i in wp.media.gallery.templates) {
                        output += wp.media.template(wp.media.gallery.templates[i])(view);
                    }
                    return output;
                }
            });

        });

    </script>
    <?php
});

LOCATION B

add_action('print_media_templates', function() {

    // define your backbone template;
    // the "tmpl-" prefix is required,
    // and your input field should have a data-setting attribute
    // matching the shortcode name
    $gallery_types = apply_filters('print_media_templates_gallery_settings_shapes',
                                   array(
                                       'circle'      => ' Circle',
                                       'rectangle'   => ' Rectangle',
                                       'square'      => ' Square',
                                       'default_val' => ' Default'));
    ?>
    <script type="text/html" id="tmpl-custom-gallery-shapes">
        <label class="setting">
            <span><?php _e('Shapes'); ?></span>
            <select data-setting="shape"><?php
                foreach($gallery_types as $key => $value) {
                    echo "<option value=\"$key\">$value</option>";
                }
                ?>
            </select>
        </label>
    </script>

    <script>

        jQuery(document).ready(function () {

            // add your shortcode attribute and its default value to the
            // gallery settings list; $.extend should work as well...
            _.extend(wp.media.gallery.defaults, {
                shape: 'default_val'
            });

            // join default gallery settings template with yours -- store in list
            if (!wp.media.gallery.templates) wp.media.gallery.templates = ['gallery-settings'];
            wp.media.gallery.templates.Push('custom-gallery-shapes');

            // loop through list -- allowing for other templates/settings
            wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
                template: function (view) {
                    var output = '';
                    for (var i in wp.media.gallery.templates) {
                        output += wp.media.template(wp.media.gallery.templates[i])(view);
                    }
                    return output;
                }
            });

        });

    </script>
    <?php
});
4
jgraup