エントリを印刷する際にコンパクトビューをデフォルトとして設定する方法

はじめに

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