エントリーを印刷するときに、その外観をカスタマイズしたいですか？WPFormsには、フォーム入力のプレビューに基本的なスタイリングが含まれています。しかし、小さなPHPスニペットといくつかのCSSルールで、印刷前に簡単に独自のスタイルを追加することができます。
このチュートリアルでは、WPFormsの入力PDFプレビューをカスタマイズする方法を説明します。
フォームの作成
まず、フォームビルダーにアクセスするために、新しいフォームを作成するか、既存のフォームを編集する必要があります。フォームビルダーでフォームに必要なフィールドを追加します。
私たちのフォームは、特定のクラスに申し込むリクエストを受け付けるクラス登録フォームなので、名前、Eメール、ドロップダウン（クラスを選択）、数字（クラスに申し込む人数）、日付/時間（クラスの希望日を選択）、段落テキストフォームフィールドがあります。
スタイルシートの作成とアップロード
次に、専用のスタイルシートを作成し、カスタム・スタイルをこの.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 );
さて、エントリーを印刷しようとすると、新しいカスタム・スタイルが表示されます。
よくある質問
以下では、WPFormsのエントリー印刷プレビューのカスタマイズに関するよくある質問にお答えします。
印刷ビューで間隔を広げるには？
このスニペットを使うだけで、印刷ビューのあらゆるものにパディング、マージン、幅を追加できる。
/*
* 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 のスタイルシートをエンキューする方法のチュートリアルをご覧ください。