メインコンテンツにスキップ

チームカラー

チームカラーモジュールは SportsPress Pro に含まれています。チーム編集画面に**チームカラー**メタボックスを追加し、訪問者がチームに関連するページを表示したときにそれらのカラーをフロントエンドに適用します。

今日アップデートされました

チームカラー

チームカラーモジュールは SportsPress Pro に含まれています。チーム編集画面にチームカラーメタボックスを追加し、訪問者がチームに関連するページを表示したときにそれらのカラーをフロントエンドに適用します。

チームカラーメタボックス

任意のチームの編集画面を開きます。チームカラーメタボックスがコンテンツエディターの下のメインカラムに表示されます。5 つのカラーフィールドがあり、それぞれにチェックボックスとカラーピッカーがあります。

  • プライマリ

  • 背景色

  • 文字色

  • 見出し

  • リンク

各フィールドには 2 つの部分があります。

  1. カラー名でラベル付けされたチェックボックス。チェックボックスがオフの場合、そのカラーは無効になり、代わりにサイト全体のテーマカラーが使用されます。

  2. クリックするとカラーピッカーが開く 16 進数カラー入力。ピッカーは WordPress の wp-color-picker(Iris)インターフェースを使用します。視覚的にカラーを選択するか、16 進数値を直接入力できます。

カラーが無効になっているときにピッカーに表示されるデフォルト値は、そのスロットの現在のグローバルテーマカラーです。

個別カラーの有効化と無効化

  • カラー名の横のチェックボックスをオンにして、このチームのオーバーライドを有効にします。

  • チェックボックスをオフにして、そのスロットのグローバルテーマカラーに戻します。

  • 任意の組み合わせを有効にできます。例えば、プライマリ背景色のみをオーバーライドして、他の 3 つはグローバルデフォルトのままにします。

保存

チーム編集画面で 更新 をクリックします。有効なカラーは sp_colors 投稿メタフィールドに、カラー名(primarybackgroundtextheadinglink)をキーとする連想配列として保存されます。無効なカラーは保存されません。

フロントエンドへの適用

チームカラーは option_themeboy フィルターを介して CSS 変数のオーバーライドとしてフロントエンドに適用されます。このモジュールは以下のページを訪問者が表示したときに、チームの有効なカラーをフロントエンドの CSS に挿入します。

  • チームページsp_team シングル)

  • 試合ページsp_event シングル)— 試合に記載されている最初のチームのカラーが使用されます

  • カレンダーページsp_calendar シングル)— カレンダーに割り当てられた最初のチームのカラー

  • 選手ページsp_player シングル)— 選手が所属する最初のチームのカラー

  • 選手リストページsp_list シングル)— リストに割り当てられた最初のチームのカラー

  • スタッフページsp_staff シングル)— スタッフメンバーに割り当てられた最初のチームのカラー

試合ページでは、SportsPress 設定でチームを逆順にする設定が有効な場合、どのチームのカラーを適用するかを選択する前にチームの順序が逆になります。

チーム一覧カラム

チームに少なくとも 1 つのカラーが有効になっている場合、チーム一覧画面のロゴカラム位置にロゴとともにカラーブロックが表示されます。各有効なカラーは小さな色付きの長方形として表示され、チームに割り当てられたカラーをひと目で確認できます。

こちらの回答で解決しましたか?