プロフィールのSNSフォローボタンを色付きに変更する方法

以下のコードをfunctions.phpに追加します。

add_filter('cocoon_part__tmp/sns-follow-buttons', function ($content) {
  $option = get_query_var('option');

  if ($option === SF_PROFILE) {
    $content = str_replace(['bc-brand-color-white', 'bc-monochrome'], 'bc-brand-color', $content);
  }

  return $content;
});

以下のコードをstyle.cssに追加します。

.author-box .bc-brand-color .sns-follow-buttons {
  a {
    background: var(--cocoon-sns-color);
    border: 0;
    color: var(--cocoon-white-color);
  }

  /* インスタをグラデーションに変更 */
  .instagram-button {
    --cocoon-sns-color: linear-gradient(165deg, #427eff 5%, #f13f79 50%) no-repeat;
  }
}

以下のコードをfunctions.phpに追加します。

add_filter('cocoon_part__tmp/sns-follow-buttons', function ($content) {
  $class_map = [
    'brand_color'       => 'bc-brand-color ',
    'brand_color_white' => 'bc-brand-color-white ',
    'monochrome'        => 'bc-monochrome ',
  ];

  $option = get_query_var('option');

  if ($option === SF_PROFILE) {
    $new_class = $class_map[get_sns_follow_button_color()];
    $content = str_replace(array_values($class_map), $new_class, $content);
  }

  return $content;
});

以下のコードをstyle.cssに追加します。

.author-box {
  .bc-monochrome .sns-follow-buttons a,
  .bc-brand-color .sns-follow-buttons a {
    background: var(--cocoon-sns-color);
    border: 0;
    color: var(--cocoon-white-color);
  }

  .bc-brand-color-white .sns-follow-buttons a {
    background: var(--cocoon-white-color);
    border: 1px solid var(--cocoon-sns-color);
    color: var(--cocoon-sns-color);
  }

  /* インスタをグラデーションに変更する場合 */
  .bc-brand-color .sns-follow-buttons .instagram-button {
    --cocoon-sns-color: linear-gradient(165deg, #427eff 5%, #f13f79 50%) no-repeat;
  }
}