エントリーを印刷する際にコンパクト表示をデフォルトに設定する方法

はじめに

WPFormsのエントリを印刷する際、デフォルトとしてコンパクトビューを設定したいですか？印刷画面の歯車をクリックすると、この表示を手動で変更できます。

しかし、印刷用のコンパクトなビューをデフォルトのビューとして設定したい場合は、小さなJavaScriptスニペットを使用することで、このビューをデフォルトでよりコンパクトなビューに簡単に設定することができます。

コンパクトな印刷表示を設定するスニペットの追加

まず、このスニペットをあなたのサイトに追加する必要があります。 スニペットをサイトに追加する方法については、こちらのチュートリアルをご覧ください。

/**
 * Change print entry view to compact.
 *
 * @link https://wpforms.com/developers/wpforms_process_validate_email/
 */

function custom_wpforms_print_view() {
    ?>
 
    <script>
        jQuery( document ).ready(function() {
 
            jQuery( '.wpforms-preview' ).addClass( 'wpforms-preview-mode-compact' );
 
            jQuery( '.switch-container.toggle-mode [ data-mode=compact ]' ).addClass( 'active' );
 
        });
    </script>
 
        <?php
}
add_action( 'wpforms_pro_admin_entries_printpreview_print_html_head', 'custom_wpforms_print_view', 99 );

印刷したいエントリーを開き、「アクション」メニューから「印刷」リンクをクリックします。自動的にエントリーがコンパクトビューに表示されます。

以上で、デフォルトの印刷画面をコンパクトに設定することができました。印刷画面に独自のスタイルを追加したいですか？チュートリアル「エントリーの印刷をカスタマイズする方法」をご覧ください。

よくあるご質問

Q: デフォルトで有効にできる他の設定はありますか？

A:もちろんです！他のフィールドもデフォルト設定で設定できます。

/**
 * Change print entry view to compact.
 *
 * @link https://wpforms.com/developers/wpforms_process_validate_email/
 */
function wpf_dev_default_print_view() {
    ?>
 
    <script>
        jQuery( document ).ready(function() {
 			
			// Compact View
            jQuery( '.wpforms-preview' ).addClass( 'wpforms-preview-mode-compact' );
 
            jQuery( '.switch-container.toggle-mode [ data-mode=compact ]' ).addClass( 'active' );
			
			// Field Descriptions
			jQuery( '.wpforms-preview' ).addClass( 'wpforms-preview-mode-description' );
 
            jQuery( '.switch-container.toggle-mode [ data-mode=description ]' ).addClass( 'active' );
			
			// Empty Fields
			jQuery( '.wpforms-preview' ).addClass( 'wpforms-preview-mode-empty' );
 
            jQuery( '.switch-container.toggle-mode [ data-mode=empty ]' ).addClass( 'active' );
			
			// Unselected Choices
			jQuery( '.wpforms-preview' ).addClass( 'wpforms-preview-mode-unselected-choices' );
 
            jQuery( '.switch-container.toggle-mode [ data-mode=unselected-choices ]' ).addClass( 'active' );
			
			// HTML fields
			jQuery( '.wpforms-preview' ).addClass( 'wpforms-preview-mode-html' );

			jQuery( '.switch-container.toggle-mode [ data-mode=html ]' ).addClass( 'active' );
			
			// Section Dividers
			jQuery( '.wpforms-preview' ).addClass( 'wpforms-preview-mode-divider' );

			jQuery( '.switch-container.toggle-mode [ data-mode=divider ]' ).addClass( 'active' );
			
			// Page Breaks
			jQuery( '.wpforms-preview' ).addClass( 'wpforms-preview-mode-pagebreak' );

			jQuery( '.switch-container.toggle-mode [ data-mode=pagebreak ]' ).addClass( 'active' );
			
        });
    </script>
 
        <?php
}
add_action( 'wpforms_pro_admin_entries_printpreview_print_html_head', 'wpf_dev_default_print_view', 10 );