web-dev-qa-db-fra.com

Comment connecter et modifier la nouvelle interface utilisateur des versions (3.6+)?

Disons que je veux ajouter un peu de post_meta dans la "nouvelle" interface utilisateur des révisions. J'enregistre certaines méta sur les révisions uniquement et je souhaite l'afficher sur cet écran.

enter image description here

Normalement, j’ouvrirais wp-admin/revisions.php, chercherais des crochets et du code. Mais la page des révisions est entièrement réalisée avec Backbone . Je ne sais pas Backbone (totalement disposé à apprendre). Cependant, je ne trouve rien sur la façon de modifier des vues de backbone d’administrateur existantes dans WordPress.

Quelqu'un a-t-il réussi à modifier cette interface et peut-il donner un exemple de la façon dont cela peut être fait?

7
jjeaton

Malheureusement, WordPress n’a pas mis en place de meilleure pratique normalisée pour l’accrochage aux modèles Backbone. Il y a eu des plans suggérés pour amener les filtres et les actions bien connus API à Javascript dans WordPress, mais il y a un manque de traction dans ce mouvement. Carl Danley a créé une bibliothèque qui fait justement cela , ce qui est utile si vous essayez de construire le code/jerry-rig de la manière la plus minutieuse qui soit pour que vous puissiez faire ce que vous essayez de faire.

En gros, vous essayez de remplacer ce qui se passe dans le micro-modèle de revisions.view.Meta.

Il n'existe pas de moyen simple de remplacer le balisage de microtemplate lui-même. Ce que je suggérerais, c'est de remplacer la méthode .template() de tout constructeur s'étendant de revisions.view.Meta, ceux-ci étant revisions.view.MetaFrom et revisions.view.MetaTo. Pour ce faire, voici quelques exemples:

add_action( 'admin_footer-revision.php', function() {
    $post = get_post();
    ?>
    <script id="tmpl-revisions-meta-override" type="text/html">
        <# if ( ! _.isUndefined( data.attributes ) ) { #>
            <div class="diff-title">
                <# if ( 'from' === data.type ) { #>
                    <strong><?php _ex( 'From:', 'Followed by post revision info' ); ?></strong>
                <# } else if ( 'to' === data.type ) { #>
                    <strong><?php _ex( 'To:', 'Followed by post revision info' ); ?></strong>
                <# } #>
                <div class="author-card<# if ( data.attributes.autosave ) { #> autosave<# } #>">
                    {{{ data.attributes.author.avatar }}}
                    <div class="author-info">
                    <# if ( data.attributes.autosave ) { #>
                        <span class="byline"><?php printf( __( 'Autosave by %s' ),
                            '<span class="author-name">{{ data.attributes.author.name }}</span>' ); ?></span>
                    <# } else if ( data.attributes.current ) { #>
                        <span class="byline"><?php printf( __( 'Current Revision by %s' ),
                            '<span class="author-name">{{ data.attributes.author.name }}</span>' ); ?></span>
                    <# } else { #>
                        <span class="byline"><?php printf( __( 'Revision by %s' ),
                            '<span class="author-name">{{ data.attributes.author.name }}</span>' ); ?></span>
                    <# } #>
                        <span class="time-ago">{{ data.attributes.timeAgo }}</span>
                        <span class="date">({{ data.attributes.dateShort }})</span>
                    </div>
                    Your custom text here
                <# if ( 'to' === data.type && data.attributes.restoreUrl ) { #>
                    <input  <?php if ( wp_check_post_lock( $post->ID ) ) { ?>
                        disabled="disabled"
                    <?php } else { ?>
                        <# if ( data.attributes.current ) { #>
                            disabled="disabled"
                        <# } #>
                    <?php } ?>
                    <# if ( data.attributes.autosave ) { #>
                        type="button" class="restore-revision button button-primary" value="<?php esc_attr_e( 'Restore This Autosave' ); ?>" />
                    <# } else { #>
                        type="button" class="restore-revision button button-primary" value="<?php esc_attr_e( 'Restore This Revision' ); ?>" />
                    <# } #>
                <# } #>
            </div>
        <# if ( 'tooltip' === data.type ) { #>
            <div class="revisions-tooltip-arrow"><span></span></div>
        <# } #>
    <# } #>
    </script>
    <script>
    (function($) {
        wp.revisions.view.MetaFrom.prototype.template = wp.template('revisions-meta-override');
        wp.revisions.view.MetaTo.prototype.template = wp.template('revisions-meta-override');
    })(jQuery);
    </script>
    <?php
} );

Et pour expliquer ça. Nous nous accrochons au pied de page de la page d'administration des révisions, nous avons donc la garantie que les constructeurs revisions.view.MetaFrom et revisions.view.MetaToont été définis , mais avant que le module de révisions bootstrapper ait été déclenché . Ceci est important car nous souhaitons modifier les constructeurs avant leur utilisation. J'ai copié le contenu du microtemplate de revisions.view.Meta dans une version remplacée du modèle #tmpl-revisions-meta-override, mais remarquez que j'ai ajouté Your custom text here dans le modèle, ce qui donne l'impression que vous voulez votre texte personnalisé. Ensuite, je substitue la méthode template() du constructeur, en utilisant l'ID du microtemplate modifié comme référence.

Voila. Maintenant, cela dépend de ce que vous voulez faire avec votre texte personnalisé. Si vous voulez y insérer du texte, allez-y. Si vous souhaitez générer du texte spécifique à cette révision, vous devez consulter la bibliothèque susmentionnée de Carl Danley et déclencher un crochet de filtrage transmettant data afin que vous puissiez générer un élément spécifique aux données disponibles.

Je sais, c'est fou. Mais c’est là où nous en sommes avec le remplacement de Javascript dans les modèles WordPress Backbone. Nous devrions discuter de la personnalisation possible, comme vous le souhaitez, mais nous ne le sommes pas parce qu'il y a un manque d'intérêt ou d'élan. N'hésitez pas à engager la conversation lors de nos discussions hebdomadaires avec les développeurs principaux WordPress . Je serai la.

7
Eric Andrew Lewis