レシートテンプレート
レシートテンプレートエディターを使用すると、POSシステムから印刷されるレシートの外観と内容をカスタマイズできます。テンプレートエディターには、次の場所でアクセス可能です:WP Admin > POS > Templates
概要
テンプレートシステムは2種類のテンプレートを提供します:
- デフォルトテンプレート: プラグインおよびテーマファイルから自動的に検出されます。これらは削除できませんが、カスタムバージョンを作成するためにコピーできます。
- カスタムテンプレート: ユーザーが作成したテンプレートで、完全にカスタマイズ、編集、および管理が可能です。
テンプレートエディターへのアクセス
- WordPress管理ダッシュボードに移動します
- POS > Templates に行きます
- 利用可能なテンプレートのリストが2つのセクションに整理されて表示されます:
- デフォルトテンプレート(プラグイン/テーマファイルから)
- カスタムテンプレート(あなたのカスタム作成物)
デフォルトテンプレート
システムは3つのソースからレシートテンプレートを自動的に検出します:
テンプレートソース
| ソース | 説明 | 状態 |
|---|---|---|
| プラグイン | WooCommerce POSに含まれるコアレシートテンプレート | 常に利用可能 |
| Proプラグイン | WooCommerce POS Proからの拡張テンプレート | アクティブライセンスで利用可能 |
| テーマ | アクティブテーマからのカスタムテンプレート | テーマにテンプレートが含まれている場合は利用可能 |
テンプレートアクション
各デフォルトテンプレートに対して、以下の操作ができます:
- プレビュー: サンプルデータでテンプレートがどのように表示されるかを確認
- コピー: 編集できるカスタムコピーを作成
- アクティブ化: POSのアクティブテンプレートとして設定
カスタムテンプレートの作成
方法1: デフォルトテンプレートからコピー
- デフォルトテンプレートセクションでカスタマイズしたいテンプレートを見つける
- コピーボタンをクリック
- カスタムテンプレートの名前を入力
- テンプレートをコピーをクリック
- 新しく作成されたカスタムテンプレートを編集
方法2: ゼロから作成
- ページの上部で新しいテンプレートを追加をクリック
- テンプレート名を入力
- テンプレートタイプとしてレシートを選択
- エディターでテンプレートのコーディングを開始
テンプレートエディタの機能
テンプレートエディタは以下の機能を提供します:
コードエディタ
- 構文ハイライト: コードの可読性を向上させるためのPHP構文ハイライト
- 行番号: 簡単なナビゲーションとデバッグ
- フルスクリーン編集: 集中できる編集環境
テンプレート設定パネル
- 言語: 適切な構文ハイライトのためにPHPに設定
- テンプレートタイプ: レシートまたはレポートテンプレートの選択
- 状態: 公開/下書きステータス管理
- 可視性: テンプレートの可視性を制御
テンプレートアクション
- プレビュー: サンプルデータでテンプレートがどのようにレンダリングされるかを確認
- アクティブとして設定: このテンプレートをPOSのデフォルトにする
- 更新: 変更を保存
- ゴミ箱に移動: カスタムテンプレートを削除
テンプレート構造
レシートテンプレートはHTML出力を生成するPHPファイルです。基本的な構造は以下の通りです:
<?php
/**
* Custom Receipt Template
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Your custom CSS styles */
body { font-family: sans-serif; font-size: 14px; }
.receipt-header { text-align: center; margin-bottom: 20px; }
/* Add more styles as needed */
</style>
</head>
<body>
<!-- Your receipt content -->
<div class="receipt-header">
<h1><?php echo get_bloginfo( 'name' ); ?></h1>
<p><?php echo get_bloginfo( 'description' ); ?></p>
</div>
<!-- Order details, items, totals, etc. -->
</body>
</html>
利用可能なテンプレート変数
カスタムテンプレートを作成する際に、さまざまなWordPressおよびWooCommerce関数とデータにアクセスすることができます:
店舗情報
get_bloginfo( 'name' )- 店舗名get_bloginfo( 'description' )- 店舗のキャッチフレーズget_bloginfo( 'url' )- 店舗のURL
注文データ
現在の注文データは、テンプレートがレンダリングされるときに標準のWooCommerce注文関数を通じて利用可能です。
WCPOS関数
POS関連のデータや機能にアクセスするために、WCPOS特有の関数(wcpos_で始まる)を使用できます。
ベストプラクティス
テンプレート開発
- コピーから始める: ゼロから作成するのではなく、常にデフォルトテンプレートをコピーして始めましょう
- 徹底的にテストする: アクティブ化する前にプレビューファンクションを使用してテンプレートをテストする
- バックアップを保持する: カスタムテンプレートをエクスポートするか、コードのコピーを保持する
- モバイルフレンドリー: 異なる画面サイズでテンプレートがうまく動作することを確認する
コードの品質
- HTMLを検証する: HTMLがよく形成されていることを確認
- 出力をエスケープする: セキュリティのためにWordPressエスケープ関数を使用する
- エラーハンドリング: PHPコードに適切なエラー検出を含める
- コメント: 将来のリファレンスのためにカスタマイズを文書化する
パフォーマンス
- CSSを最適化する: スタイルを最小限かつ効率的に保つ
- PHPを最小限にする: テンプレート内での複雑なロジックを避ける
- 印刷テスト: テンプレートがレシートプリンターでうまく機能することを確認する
トラブルシューティング
一般的な問題
テンプレートが変更を表示しない
- "更新"をクリックして変更を保存したことを確認
- テンプレートが"アクティブ"として設定されていることを確認
- キャッシュプラグインをクリアする
構文エラー
- 構文ハイライトを使用して問題を特定する
- セミコロン、括弧、引用符が欠けていないか確認する
- PHP構文を検証する
スタイリングの問題
- プレビューモードでCSSをテストする
- スタイルがレシートプリンターと互換性があることを確認する
- 印刷に優しいデザイン原則を考慮する
テンプレートが利用できない
- テンプレートタイプが"レシート"に設定されていることを確認
- テンプレートの状態が"公開"であることを確認
- 適切な権限があることを確認
ヘルプを得る
テンプレートのカスタマイズに問題が発生した場合:
- エラーメッセージのためにテンプレートプレビューを確認する
- PHPエラーのためにWordPressデバッグログを確認する
- まずデフォルトテンプレートのコピーでテストする
- AIアシスタンス: 現代のAIツール(例: Gemini, ChatGPT, Claude)は、これらのシンプルなWordPressテンプレートの手助けに優れています。あなたのテンプレートコードを貼り付けて、達成したいことを説明できます。
- WooCommerce POSドキュメントを参照して、詳細なカスタマイズを行う
高度なカスタマイズ
レシートテンプレートをよりコントロールしたい上級ユーザーのために:
テーマ統合
カスタムreceipt.phpファイルをテーマに配置することでデフォルトテンプレートをオーバーライドできます:
your-theme/woocommerce-pos/receipt.php
フックとフィルター
WooCommerce POSは、テンプレートカスタマイズのためのさまざまなフックおよびフィルターを提供します。利用可能なオプションについては開発者ドキュメントを参照してください。
カスタムフィールド
適切なWordPressおよびWooCommerce関数を使用して、レシートテンプレートにカスタム注文フィールド、製品属性、および他のメタデータを含めることができます。