レシートテンプレート
レシートテンプレートエディタを使用すると、POSシステムから印刷されるレシートの外観と内容をカスタマイズできます。テンプレートエディタには、次の手順でアクセスできます: WP Admin > POS > Templates
概要
テンプレートシステムには、2種類のテンプレートがあります:
- デフォルトテンプレート: プラグインやテーマファイルから自動的に検出されます。これらは削除できませんが、カスタムバージョンを作成するためにコピーできます。
- カスタムテンプレート: ユーザーが作成したテンプレートで、完全にカスタマイズ、編集、管理できます。
テンプレートエディタへのアクセス
- WordPress管理ダッシュボードに移動します
- POS > Templatesに移動します
- 利用可能なテンプレートのリストが2つのセクションに整理されて表示されます:
- デフォルトテンプレート (プラグイン/テーマファイルから)
- カスタムテンプレート (あなたのカスタム作成)
デフォルトテンプレート
システムは、3つのソースからレシートテンプレートを自動的に検出します:
テンプレートソース
| ソース | 説明 | ステータス |
|---|---|---|
| プラグイン | WooCommerce POSに含まれるコアレシートテンプレート | いつでも利用可能 |
| プロプラグイン | 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関数
WCPOS特有の関数（wcpos_でプレフィックス付けされた）を使用して、POS関連のデータや機能にアクセスできます。
ベストプラクティス
テンプレート開発
- コピーから始める: 一から作成するのではなく、常にデフォルトテンプレートをコピーして始める
- 徹底的にテスト: 有効化する前にプレビュー機能を使用してテンプレートをテスト
- バックアップを保持: カスタムテンプレートをエクスポートするか、コードのコピーを保持
- モバイルフレンドリー: テンプレートが異なる画面サイズで問題なく動作することを確認
コード品質
- HTMLを検証: HTMLが適切に形成されていることを確認
- 出力をエスケープ: セキュリティのためにWordPressエスケープ関数を使用
- エラーハンドリング: PHPコードに適切なエラーチェックを含める
- コメント: 将来の参考のためにカスタマイズ内容を文書化
パフォーマンス
- CSSを最適化: スタイルを最小限かつ効率的に保つ
- PHPを最小限に: テンプレート内で複雑なロジックを避ける
- 印刷テスト: テンプレートがレシートプリンターで正常に動作することを確認
トラブルシューティング
一般的な問題
テンプレートが変更を表示しない
- 変更を保存するために「更新」をクリックしたことを確認
- テンプレートが「アクティブ」と設定されていることを確認
- キャッシングプラグインをクリア
構文エラー
- 構文ハイライトを使用して問題を特定
- セミコロン、括弧、または引用符が欠けていないか確認
- PHPの構文を検証
スタイリングの問題
- プレビューモードでCSSをテスト
- スタイルがレシートプリンターに互換性があることを確認
- 印刷に優しいデザイン原則を考慮
テンプレートが利用できない
- テンプレートタイプが「レシート」に設定されていることを確認
- テンプレートのステータスが「公開」になっていることを確認
- 適切な権限を持っていることを確認
ヘルプを得る
テンプレートのカスタマイズに関して問題が発生した場合:
- テンプレートプレビューでエラーメッセージを確認
- PHPエラーのためにWordPressデバッグログを確認
- 最初にデフォルトテンプレートのコピーでテスト
- AIアシスタンス: Gemini、ChatGPT、Claudeなどの最新のAIツールは、これらのシンプルなWordPressテンプレートの作成に非常に役立ちます。テンプレートコードを貼り付けて、達成したいことを説明できます。
- 高度なカスタマイズについては、WooCommerce POSのドキュメントを参照
高度なカスタマイズ
レシートテンプレートに対してさらに制御が必要な上級者向け:
テーマ統合
テーマ内にカスタムreceipt.phpファイルを配置することで、デフォルトテンプレートをオーバーライドできます:
your-theme/woocommerce-pos/receipt.php
フックとフィルター
WooCommerce POSは、テンプレートカスタマイズのためのさまざまなフックとフィルターを提供しています。利用可能なオプションについては、開発者ドキュメントを参照してください。
カスタムフィールド
適切なWordPressおよびWooCommerce関数を使用して、レシートテンプレートにカスタムオーダーフィールド、商品属性、その他のメタデータを含めることができます。