レシートテンプレート
レシートテンプレートエディタを使用すると、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関数を使用して、レシートテンプレートにカスタム注文フィールド、製品属性、および他のメタデータを含めることができます。