WooCommerce PDF Invoices & Packing Slips

【WooCommerce 請求書・納品書作成プラグイン】

  • WooCommerce PDF Invoices & Packing Slips
  • 標準で日本語フォントに対応していないため文字化けする
  • そこで、日本語フォントを適用するための手順をメモする

【情報源と手順】

  1. プラグインのドキュメント(英語)を参照
  2. カスタムPDFテンプレートを作成する(Creating a custom PDF template
    1. http://docs.wpovernight.com/woocommerce-pdf-invoices-packing-slips/creating-a-custom-pdf-template/
    2. プラグインのフォルダー内にあるテンプレートを子テーマの同一構造体にコピーする
      1. From: wp-content/plugins/woocommerce-pdf-invoices-packing-slips/templates/pdf/Simple
      2. To: wp-content/themes/yourtheme/woocommerce/pdf/yourtemplate
      3. ※ テンプレートのカスタマイズについても記載されて
        1. Customizing the template
  3. カスタムフォントの利用(Using custom fonts
    1. 日本語フォントファイルを入手
      1. http://ipafont.ipa.go.jp/(IPA:情報処理推進機構)のダウンロードから、ゴシックや明朝体の日本語フォントファイルをダウンロードできる
      2. 例) ゴシックのフォントファイル:ipaexg.ttf
    2. 入手したフォントファイルを/fonts のサブフォルダーに配置
      1.  wp-content/themes/yourtheme/woocommerce/pdf/yourtemplate/fonts
      2. Style.cssにフォントの指定を追記 ※ Using custom fontsのページを参照
        1. Load Font
          1. /* Load font */
            @font-face {
            font-family: ‘MyFont’;
            font-style: normal;
            font-weight: normal;
            src: local(‘MyFont’), local(‘MyFont’), url(<?php echo $this->get_template_path(); ?>/fonts/myfont.ttf) format(‘truetype’);
            }
            @font-face {
            font-family: ‘MyFont’;
            font-style: normal;
            font-weight: bold;
            src: local(‘MyFont Bold’), local(‘MyFont-Bold’), url(<?php echo $this->get_template_path(); ?>/fonts/myfont-bold.ttf) format(‘truetype’);
            }
            @font-face {
            font-family: ‘MyFont’;
            font-style: italic;
            font-weight: normal;
            src: local(‘MyFont Italic’), local(‘MyFont-Italic’), url(<?php echo $this->get_template_path(); ?>/fonts/myfont-italic.ttf) format(‘truetype’);
            }
            @font-face {
            font-family: ‘MyFont’;
            font-style: italic;
            font-weight: bold;
            src: local(‘MyFont Bold Italic’), local(‘MyFont-BoldItalic’), url(<?php echo $this->get_template_path(); ?>/fonts/myfont-bolditalic.ttf) format(‘truetype’);
            }
        2. Font-family の指定
          1. body {
            font-family: ‘MyFont’;
            }
        3. ※ normal, normal bold, italic, italic bold の4つはすべて追記して、フォントファイル名を全て同じファイル(ipaexg.ttf)を指定しておけばよい。

– End –