新しいSNSフォローボタンを追加する方法

はじめに

以下の質問に回答します。

【Cocoon】SNSフォローボタンにpixivを追加する方法【カスタマイズ】

ブログ上に表示したいのに選択項目がないSNSアカウントの追加方法を解説しています。

www.funnyhome.net

Cocoon 2.9.4以降、ユーザー→プロフィールで入力フォームとSNSフォローボタンを簡単に追加できるようになりました。
今回は「Pixiv」を例に追加手順を紹介します。

この記事では、この方法について説明します。

完成イメージ

実装手順

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

// SNSフォローを追加
add_filter('cocoon_sns_follow_services', function ($services) {
  $services['pixiv_url'] = [
    'name'  => 'Pixiv',                               // 表示名
    'title' => 'Pixivをフォロー',                     // ツールチップなどのタイトル
    'class' => 'pixiv-button pixiv-follow-button-sq', // 適用するCSSクラス
    'icon'  => 'icon-pixiv-logo',                     // アイコンのCSSクラス
  ];

  return $services;
});


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  ob_start();
  ?>
  :root {
    --cocoon-pixiv-color: #0096fa;
  }

  .icon-pixiv-logo::before {
    background-color: var(--cocoon-pixiv-color);
    content: '';
    display: block;
    height: 1em;
    mask-image: url('アイコン画像URL');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 1em;

    /* プロフィール */
    .body .author-box & {
      background-color: #999;
    }

    /* 本文下 */
    .bc-monochrome &,
    .bc-brand-color & {
      background-color: #fff;
    }
  }

  [class*="bc-brand-color"] {
    .pixiv-button {
      --cocoon-sns-color: var(--cocoon-pixiv-color);
    }
  }
  <?php

  $handle = 'sns-pixiv';

  wp_register_style($handle, false);
  wp_enqueue_style($handle);
  wp_add_inline_style($handle, ob_get_clean());
});

注意点

Cocoon設定→SNSフォロー→プレビューは、admin.cssを参照しています。
そのため、style.cssに追記したアイコンや色の指定はプレビュー上には反映されません（図3参照）。

アイコンを作成する方法

mask-imageにアイコンとして表示するPNG形式などの画像を設定します。
その際、色を付けたい部分は「黒」、色を付けたくない部分は「透明」にして画像を作成してください（図4参照）。

さいごに

今回紹介した方法を使えば、標準ではサポートされていないSNSであっても、自由自在にフォローボタンを追加できます。
プロフィール画面からURLを入力するだけでプロフィールや記事下などに反映されるため、運用も非常にスムーズです。
ぜひ手元のアイコン画像を用意して、自分のサイトに合ったカスタマイズを試してみてください。