web-dev-qa-db-ja.com

保存せずにカスタム投稿プレビュー

レスポンシブテーマにJSを追加し、投稿編集ページのプレビューボタンをオフサイトページへのリンクに変更しました。このページには このサイト とよく似たモバイルレイアウトでの投稿を示す320px 568pxのiframeが含まれています。リンクのhrefに引数として投稿のURLを渡し、ページはそのURLをiframeのsrcとして使用します。

私たちのコンテンツ担当者は、デフォルトのプレビューボタンは保存しなくても投稿への変更をプレビューすると指摘しています。モバイルプレビューページを使用してこの動作を再現する方法を誰かが提案できますか？通常のプレビューURLをモバイルプレビューページに送信するようにプレビューボタンを変更できる方法はありますか。

プレビューボタンのクリックを処理するwp-admin/js/post.min.jsにclick.post-previewハンドラがあります。 #postフォームを送信するようです。私はまた、wp-includes/js/autosave.min.jsにsubmit.autosave-localハンドラを見つけました。これは、プレビュー時に起動するもののようです。しかし、私はそれがどのように組み合わさっているかを理解するのに苦労しています。

postsjavascriptpreviewsautosave
1
And Finally

プレビュー操作で使用されるURLを書き換えることができるpreview_post_linkフィルタを使用してこれを実行するための良い方法を見つけました。私の場合は、次のようにしました。

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

これはデフォルトのプレビューボタンのhref属性からURLを取得し、それを新しいカスタムモバイルプレビューボタンのhrefとして使用します。私のモバイルプレビューページはオフサイトでホストされています - ユーザーがカスタムプレビューボタンをクリックすると、デフォルトプレビューURLがsrcというパラメータとしてこの特別ページに渡されます。プレビューページには、モバイルサイズのiframeでURLが表示されます。

カスタムプレビューボタンのクリックハンドラは、beforeunload.edit-postイベントハンドラを無効にして、デフォルトの「このページから移動しますか？」を停止します。投稿編集フォームを送信したときにポップアップ表示されることを確認します。次の行は、プレビューボタンをクリックしたときにWordPressが通常使用する自動保存JSメソッドを呼び出します。これにより、現在投稿エディタにある下書きが保存されます。次の行はエディタに保存された投稿を送信し、最後の行は私たちのカスタムプレビューURLで新しいウィンドウを開きます。

1
And Finally