web-dev-qa-db-fra.com

Prévisualisation personnalisée sans enregistrement

J'ai ajouté JS à mon thème responsive, qui modifie le bouton d'aperçu de la page d'édition en un lien vers une page hors site. La page contient une iframe de 320px x 568px qui affiche la publication dans la mise en page mobile, un peu comme ce site . Je passe l'URL de la publication en tant qu'argument dans le href du lien, et la page utilise cette URL comme src de l'iframe.

Nos gars du contenu ont fait remarquer que le bouton de prévisualisation par défaut permet de prévisualiser les modifications apportées à la publication, même sans enregistrer. Quelqu'un peut-il suggérer comment je peux reproduire ce problème à l'aide de ma page d'aperçu mobile? Par exemple, est-il possible de modifier le bouton de prévisualisation pour envoyer l'URL de prévisualisation normale vers la page de prévisualisation de mon mobile?

J'ai trouvé le gestionnaire click.post-preview dans wp-admin/js/post.min.js, qui gère les clics sur le bouton d'aperçu. Il semble soumettre le formulaire #post. J'ai également trouvé le gestionnaire submit.autosave-local dans wp-includes/js/autosave.min.js, qui semble être celui qui se déclenche lorsque vous affichez un aperçu. Mais j'ai du mal à comprendre comment tout cela va ensemble.

postsjavascriptpreviewsautosave
1
And Finally

J'ai trouvé un bon moyen de faire cela en utilisant le filtre preview_post_link, qui vous permet de réécrire l'URL utilisée par l'opération de prévisualisation. Dans mon cas, j'ai fait quelque chose comme:

add_filter( 'preview_post_link', function ( $link ) {
    return 'http://domain.com/mobile-preview/?src=' . urlencode($link) . '%26admin_bar=false';
} );

Lorsque je clique sur mon bouton de prévisualisation, WordPress ouvre mon URL personnalisée. Facile, et pas besoin de JavaScript - WordPress redevient brillant!

Au cas où quelqu'un aurait besoin de le faire avec JS, vous pouvez essayer ceci:

(function ($) {

    $(document).ready(function () {

        // Create URL for post preview
        var previewUrl = $('#preview-action').find('.preview').attr('href');
        var parser = document.createElement('a');
        parser.href = previewUrl;
        var postId = $('#post_ID').val();
        mobilePreviewUrl = parser.protocol + '//' + parser.Host + '?p=' + postId;

        var href = mobilePreviewUrl ? 'http://domain.com/mobile-preview/?src=' + encodeURIComponent(mobilePreviewUrl) + '%26preview=true' : '';

        // Preview buttons
        var mobilePreviewBtn = $('<a/>').addClass('preview button').attr({
            'id'    : 'mobile-preview',
            'href'  : href,
            'target': '_new'
        }).text('Preview Mobile');
        $('#preview-action').prepend(mobilePreviewBtn);
        $('#post-preview').hide();
        mobilePreviewBtn.on('click', function(e){
            e.preventDefault();
            $(window).off( 'beforeunload.edit-post' );
            wp.autosave.server.tempBlockSave();
            $('form#post').submit();
            window.open(href, 'mobilePreview');
        });

    }); // end document ready

})(jQuery);

Cela récupère l'URL de l'attribut href du bouton de prévisualisation par défaut et l'utilise comme href d'un nouveau bouton de prévisualisation mobile personnalisé. La page d'aperçu de mon mobile est hébergée hors site. Lorsque l'utilisateur clique sur le bouton d'aperçu personnalisé, l'URL de prévisualisation par défaut de cette page spéciale est transmise sous la forme d'un paramètre appelé src. La page d'aperçu affiche l'URL dans une iframe de taille mobile.

Le gestionnaire de clic du bouton d'aperçu personnalisé désactive le gestionnaire d'événements beforeunload.edit-post pour arrêter le paramètre par défaut "êtes-vous sûr de vouloir quitter cette page?" confirmez que la fenêtre s’affiche lorsque vous envoyez le formulaire de post-édition. La ligne suivante appelle la méthode d'enregistrement automatique JS que WordPress utilise normalement lorsque vous cliquez sur le bouton Aperçu. Cela enregistre le brouillon actuellement dans l'éditeur de publication. La ligne suivante envoie le message enregistré dans l'éditeur et la dernière ligne ouvre une nouvelle fenêtre avec notre URL de prévisualisation personnalisée.

1
And Finally