Bright PluginsはWordPress・WooCommerceプラグインの買収を行っています。 お問い合わせ

カスタム注文ステータスのスタイルを設定する

1 min read Updated 2026年4月20日 By the Bright Plugins team

クイックサマリー#

  • を追加します 認識可能なアイコン をカスタムステータスに設定します。
  • セット そして テキストの背景色 読みやすいバッジのために。
  • リストでの表示方法を選択する ステータスビュー (名前 又は アイコン ).
  • 結果をプレビューする WooCommerce →注文 .

ステータス エディターを開きます#

パス: WooCommerce → 注文 → 注文ステータス → 編集 (ステータスを選択)または 新規追加 (作成)をクリックします。


代替: WooCommerce の [注文] → [注文ステータス→] からステータス エディターが開きました。
キャプション: 「[注文] → [注文状況] から状況エディタを開きます。」

アイコンを追加する#

クリック アイコンを追加 をクリックし、シンプルで説明的なアイコンを選択します。過度に詳細な形状は避けてください。クリアなシルエットを好みます。


代替: カスタムステータスのアイコンピッカーが開きます。
キャプション: 「シンプルで認識しやすいアイコンを選択してください。」


代替: 選択したアイコンがステータスに適用されます。
キャプション: 「アイコンが割り当てられていることを確認してください。」

バッジの色を選ぶ#

使う (text/icon) と テキストの背景色 (バッジの背景)を使用して、コントラストと迅速なスキャンを確保します。


代替: テキスト/アイコンとバッジの背景のカラーピッカーを開きます。
キャプション: 「テキスト/アイコンの色とバッジの背景を設定します。」

コントラストのヒント#

  • 暗いテキスト 背景または明るいテキスト 暗い バックグラウンド。
  • コントラストの低いペア(ライトグレーのミッドグレーなど)は避けてください。
  • ステータス全体でパレットに一貫性を保ちます。


代替: ハイコントラストと低コントラストのステータスバッジの比較。
キャプション: 「読みやすさのために、コントラストの高い組み合わせを好みます。」

ステータスビュー:名前とアイコン#

注文テーブルでのステータスの表示方法を制御します。

  • 名前: テキストラベルが表示されます(すべてのユーザーに対して最もクリア)。
  • アイコン: テキストをアイコンに置き換えます(チームがシンボルを認識している場合に機能します)。


代替: [ステータス ビュー] ドロップダウンが開き、[名前] と [アイコン] オプションが表示されます。
キャプション: 「名前を表示するか、アイコンのみを表示するかを選択してください。」

注文のプレビュー#

ステータスを保存して開く WooCommerce →注文 読みやすさを一目で確認します。

  • チェック バッジ 地位 コラム。
  • 使用する場合 アイコン 表示する場合は、アイコンが一目瞭然であることを確認してください。


代替: 名前とアイコンとしてレンダリングされたバッジを表示する注文ビュー。
キャプション: 「注文リストの読みやすさと一貫性を確認してください。」

ベストプラクティス#

  • 再使用 2〜4色のコアカラー グループステージに (例: 青 = 進行中、緑 = 完了、赤 = ブロック)。
  • 予約する 赤/黄 注意が必要なアラートまたは状態の場合。
  • 色だけに頼らないでください。 テキスト 又は アイコン 明確でなければなりません。

トラブルシューティング#

  • バッジが青白く、読みにくいように見えます。 増える 対照 (テキストと背景)。
  • アイコンがわかりにくい: に切り替えます。 より単純な記号 または ステータスビュー = 名前 .
  • 注文に変更なし: ステータスを保存し、 リフレッシュ ;キャッシュプラグインを使用する場合はキャッシュをクリアします。

Updated on 2026年4月20日 · Need help? Open a support ticket