WordPress WooCommerce ショッピングモールで請求書を作成したい場合は、無料のプラグインであるPDF Invoices＆Packing Slips for WooCommerceを使用できます。高度な機能が必要な場合は、YITH WooCommerce PDF請求書および梱包票 プラグインやエンバトマーケットの PDF請求書プラグインを使用することができます。
PDF Invoices & Packing Slips for WooCommerce プラグインを有効にすると、注文の請求書の作成/送信が可能になりますが、韓国語、日本語、中国語などの非英語の文字が含まれると文字が壊れる現象が発生します。これは、ハングルフォントなど、その言語のフォントが指定されていないためです。
WooCommerce PDFの請求書でハングルなどの非英語の文字が壊れる問題が発生した場合
PDF請求書プラグインをインストールして有効にすると、請求書内のハングルが壊れる現象が発生します。
この場合、以下の手順でハングルフォントをインストールして指定できます。
- PDF請求書用のカスタムテンプレートを作成します。
- fontsフォルダに、韓国語、日本語、中国語など、対応する言語のフォントファイルをアップロードします。
- テーマ関数ファイルにフォントを読み込むコードを追加します。
- テンプレート内のスタイルシートファイルでフォントスタイルを適切に変更または追加します。
カスタムPDF請求書用テンプレートの作成
WooCommerce » PDF Invoices » General ページにテンプレートを作成する方法について言及されています。
Want to use your own template? Copy all the files from wp-content/plugins/woocommerce-pdf-invoices-packing-slips/templates/Simple to your (child) theme in wp-content/themes/flatsome-child/woocommerce/pdf/yourtemplate to customize them
プラグインフォルダの下にあるデフォルトテンプレート（Simpleテンプレート）をアクティブなテーマのフォルダの下にコピーしてカスタムテンプレートを作成できます。私はテストです Flatsomeテーマのチャイルドテーマを利用しているので WP-コンテンツ/themes/flatsome-child/woocommerce/pdf ディレクトリの下にデフォルトのテンプレートをアップロードするように案内しています。
次の手順でカスタムテンプレートを作成できます。
- FTP/SFTPに接続して WP-コンテンツ/plugins/woocommerce-pdf-invoices-packing-slips/templates/Simple フォルダをPCにダウンロードします。
- ダウンロードしたフォルダの名前を変更します（例：NewTemplate）。
- テンプレートフォルダ WP-コンテンツ/themes/flatsome-child/woocommerce/pdf ディレクトリにアップロードします。
- WooCommerce » PDF Invoices » General ページでテンプレートを変更します。
- テンプレートディレクトリからテンプレートファイルをカスタマイズできます。
FTP/SFTP 接続方法について次の記事を参照してください。
FTPクライアントを使用してサーバーに接続し、テンプレートフォルダをアップロードします。
WordPress 通知パネルでPDF請求書テンプレートを変更するようにします。
ハングルフォントなど、その言語のフォントファイルをアップロードする
PDF請求書に適用するフォントファイルをダウンロードします。韓国語の場合、共有ゴシックフォントを使用できます。共有ゴシックフォント Naverで提供しています Naver サイトからダウンロードできます。
フォントファイルをダウンロードすると、分けゴシックと分かち合い、分け手文字など3種類のフォントファイルがあります。すべてアップロードしても、好きなフォントだけをアップロードしてもかまいません。中国語（繁体字）フォントが必要な場合は Noto Sans TCフォントをダウンロードすることができます。
フォントファイル WP-コンテンツ/themes/flatsome-child/woocommerce/pdf/Template_Name/fonts フォルダにアップロードします。
フォントを読み込むコードを追加する
今、最も重要なステップが残っています。すぐにアップロードしたフォントをテンプレートで認識できるように チャイルドテーマの関数ファイルにコードを追加することです。 （チャイルドテーマがない場合は、チャイルドテーマを作成して作業する必要があります。今後のテーマの更新時に追加したコードは消えずに保持されます。）
テーマ関数ファイルに次のコードを追加します。
// PDF 인보이스 폰트 지정
// Specifying fonts to apply to PDF invoices in a WooCommerce shop
add_action('wpo_wcpdf_custom_styles', function($type, $pdf) {
$template_path = $pdf->get_template_path();
$css = <<<CSS
@font-face {
font-family: 'NanumGothic';
font-style: normal;
font-weight: normal;
src: url($template_path/fonts/NanumGothic.ttf) format('truetype');
}
@font-face {
font-family: 'NanumGothic';
font-style: normal;
font-weight: bold;
src: url($template_path/fonts/NanumGothicBold.ttf) format('truetype');
}
@font-face {
font-family: 'NanumGothic';
font-style: normal;
font-weight: 800;
src: url($template_path/fonts/NanumGothicExtraBold.ttf) format('truetype');
}
@font-face {
font-family: 'NanumGothic';
font-style: normal;
font-weight: light;
src: url($template_path/fonts/NanumGothicLight.ttf) format('truetype');
}
CSS;
echo $css;
}, 10, 2);テンプレートのスタイルシートファイルにフォントスタイルを追加する
最後に、テンプレートのスタイルシートファイル（style.css）にフォントスタイルを変更または追加します。テンプレートフォルダの下にあるデフォルトのスタイルシートファイルを開くと、次のようにbody要素にOpen Sansフォントファミリが適用されます。
body {
background: #fff;
color: #000;
margin: 0cm;
font-family: 'Open Sans', sans-serif;
...
}上記のコードでは、font-family部分を次のように変更します。
font-family: 'NanumGothic', 'serif';これで、PDFの請求書では、ハングルなどの英語以外の文字が壊れずに正しく表示されます。
最後に、
以上で WooCommerce用のPDF請求書プラグインを使用して請求書を作成すると、ハングルなどの英語以外の文字が壊れる問題が発生した場合にフォントを指定する方法について説明しました。
多言語を使用する場合は、複数の言語のフォントをアップロードし、CSSを使用してPDF請求書内のフォントスタイルを指定する必要があります。これを行うには 基本的なCSSを理解すると役に立ちます。
PDF請求書のフッターに条件、ポリシーなどを入力できます。フレーズを入力するとHTMLタグを入力できます。
多言語でフッターに返品ポリシーなどを入力する場合、HTML/CSSを活用してフォントを精巧に指定することができます。
コメントを残す