Пользовательский предварительный просмотр без сохранения

Я добавил JS к моей отзывчивой теме, которая меняет кнопку предварительного просмотра на странице редактирования сообщения в ссылку на удаленную страницу. Страница содержит 320px x 568px iframe, которая показывает сообщение в мобильном макете, как и этот сайт . Я передаю URL сообщения в качестве аргумента в href ссылки, и страница использует этот URL как src iframe.

Ребята из нашего контента указали, что предварительный просмотр превью предварительного просмотра по умолчанию изменяется даже после сохранения. Может ли кто-нибудь предложить, как я могу воспроизвести это поведение, используя мою страницу предварительного просмотра мобильного? Например, есть ли способ изменить кнопку предварительного просмотра, чтобы отправить нормальный URL-адрес предварительного просмотра на мою страницу предварительного просмотра мобильного?

Я нашел обработчик click.post-preview в wp-admin / js / post.min.js, который обрабатывает клики по кнопке предварительного просмотра. Кажется, он представляет форму #post. Я также нашел submit.autosave-local обработчик в wp-includes / js / autosave.min.js, который, похоже, срабатывает при предварительном просмотре. Но мне трудно понять, как все это сочетается.

Я нашел хороший способ сделать это, используя фильтр preview_post_link , который позволяет вам переписать URL-адрес, используемый в операции предварительного просмотра. В моем случае я сделал что-то вроде:

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

Когда я нажимаю кнопку предварительного просмотра, WordPress открывает мой собственный URL. Легко, и нет необходимости в JavaScript – WordPress снова станет блестящим!

В случае, если кому-то это нужно сделать с JS, вы можете попробовать следующее:

 (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); 

Это захватывает URL-адрес из атрибута href кнопки предварительного просмотра по умолчанию и использует его как href новой пользовательской кнопки предварительного просмотра мобильных устройств. Моя мобильная страница предварительного просмотра размещена за пределами сайта – когда пользователь нажимает кнопку пользовательского предварительного просмотра, мы собираемся передать URL-адрес предварительного просмотра по умолчанию на эту специальную страницу в качестве параметра src . На странице предварительного просмотра отображается URL-адрес в формате iframe для мобильных устройств.

Обработчик клика для кнопки пользовательского предварительного просмотра отключает обработчик события beforeunload.edit-post чтобы остановить значение по умолчанию «вы уверены, что хотите покинуть эту страницу?» подтвердите, что появляется, когда вы отправляете форму редактирования сообщения. Следующая строка вызывает метод автосохранения JS, который WordPress обычно использует, когда вы нажимаете кнопку предварительного просмотра. Это сохраняет черновик в настоящее время в редакторе сообщений. Следующая строка отправляет сообщение, сохраненное в редакторе, а заключительная строка открывает новое окно с нашим пользовательским URL-адресом предварительного просмотра.