Customizing PDF Styling When Printing an Entry

エントリーを印刷する際の表示をカスタマイズしますか？ WPFormsには、フォームエントリープレビューの基本的なスタイルが含まれています。ただし、PHPスニペットとCSSルールを使用すると、印刷前に独自のスタイルを簡単に追加できます。

このチュートリアルでは、WPFormsのエントリーPDFプレビューをカスタマイズする方法を説明します。

フォームの作成

まず、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスする必要があります。フォームビルダーで、必要なフィールドをフォームに追加してください。

このフォームはクラス登録フォームであり、特定のクラスへのサインアップリクエストを受け付けます。そのため、名前、メールアドレス、ドロップダウン（クラスを選択するため）、数値（クラスにサインアップする人数）、日付/時刻（クラスの希望日を選択するため）、および段落テキストのフォームフィールドがあります。

スタイルシートの作成とアップロード

次に、専用のスタイルシートを作成し、カスタムスタイルをこの.cssファイルに追加します。

CSSルールを作成したら、FTPまたはFTPタイプのプラグインを使用してサイトのテーマディレクトリにアップロードします。

注意： FTPを使用してファイルをアップロードするのにさらにヘルプが必要な場合は、WPBeginnerのチュートリアルを確認してください。

ラベル、ユーザーがフィールドに入力した内容、タイトル、エントリーの境界線、および本文の背景色を変更するためにCSSを使用します。

body {
    background-color: #e1f5fe;
}

#print .page-title h1 {
    color: #01579b;
}

#print .fields {
    border: 15px solid #eee;
}

#print p.field-name {
    color: #01579b;
}

#print p.field-value {
    color: #0277bd;
}

CSSファイルがアップロードされたら、次のステップで使用するため、このファイルのURLをコピーする必要があります。

注意： URLの見つけ方がわからない場合は、ホスティング会社に問い合わせてください。サポートしてくれます。

エントリーの印刷をカスタマイズするためのコードの追加

これで、最後のステップは、スタイルシートを指すコードスニペットを追加することです。コードスニペットの追加にヘルプが必要な場合は、このチュートリアルを参照してください。

/*
 * Change the styles when printing an entry
 *
 * @link  https://wpforms.com/developers/how-to-customize-printing-an-entry/ 
 */
 
function print_page_additional_styles() {
     
   // Change this link to your stylesheet   
   $link = 'http://yoursite.com/print-wpforms-entry-stylesheet.css';
     
   //You can also echo your own custom styles by adding them inline to the top of the page
   echo '<style> body { background-color: #e1f5fe;} </style>';
     
   printf( '<link rel="stylesheet" href="%s">', $link ); 
     
}
add_action( 'wpforms_pro_admin_entries_printpreview_print_html_head', 'print_page_additional_styles', 10 );

これで、エントリーを印刷すると、新しいカスタムスタイルが表示されます。

よくある質問

以下に、エントリーの印刷プレビューをカスタマイズすることに関するよくある質問にお答えします。

印刷ビューで余白を増やすにはどうすればよいですか？

このスニペットを使用するだけで、印刷ビューのあらゆるものにパディング、マージン、幅を追加できます。

/*
 * Customize the print view with margins, padding, and widths
 *
 * @link  https://wpforms.com/developers/how-to-customize-printing-an-entry/ 
 */
 
function wpf_customize_print_entry_styles() {
  echo '<style>
  #print.wpforms-preview-mode-compact .print-item-title{
    width: 200px;
    min-width: 400px;
  }
  #print.wpforms-preview-mode-compact .print-item-title, #print.wpforms-preview-mode-compact .print-item-value{
       padding-top: 4px;
       padding-bottom: 4px;
  }
  #print .print-body{
       margin-right: 20px;
       margin-left: 20px;
  }
  </style>';
}
 
add_action('wpforms_pro_admin_entries_printpreview_print_html_head', 'wpf_customize_print_entry_styles', 10);

これで完了です！これで、エントリーを印刷する前にWPFormsの印刷プレビューをカスタマイズする方法がわかりました。

次に、Conversational Formsアドオンのスタイルもカスタマイズしますか？Conversational Formsのスタイルシートをエンキューする方法に関するチュートリアルをご覧ください。

エントリー印刷時のPDFスタイルカスタマイズ

AI要約