【Cocoon】Cocoon テーマに独自の SNS アイコンを追加する方法

【Cocoon】Cocoon テーマに独自の SNS アイコンを追加する方法

WordPress の人気テーマ「Cocoon」には、デフォルトで SNS アイコンを表示する機能がありますが、対応していないサービスのアイコンを追加したいこともあります。今回は、Cocoon の子テーマを利用して、独自の SNS アイコン（BOOTH、Patreon、マシュマロ）を追加してみたので、その方法を紹介します。

目次

前提条件

  • Cocoon の親テーマは編集せず、Cocoonの子テーマ (functions.php と style.css) のみを使用してカスタマイズを行います。

ユーザープロフィールにカスタム SNS リンクを追加

まず、WordPress のユーザープロフィールに BOOTH、Patreon、マシュマロの URL を入力できるカスタムフィールドを追加します。以下のコードを子テーマの functions.php に追加してください。

ユーザープロフィール編集画面に入力欄を追加

function add_custom_user_profile_field($user) {
    ?>
    <h3>カスタムSNSリンク</h3>
    <table class="form-table">
        <tr>
            <th><label for="patreon">Patreon URL</label></th>
            <td>
                <input type="text" name="patreon" id="patreon" value="<?php echo esc_attr(get_the_author_meta('patreon', $user->ID)); ?>" class="regular-text" />
                <br><span class="description">Patreon のプロフィール URL を入力してください。</span>
            </td>
        </tr>
        <tr>
            <th><label for="booth">BOOTH URL</label></th>
            <td>
                <input type="text" name="booth" id="booth" value="<?php echo esc_attr(get_the_author_meta('booth', $user->ID)); ?>" class="regular-text" />
                <br><span class="description">BOOTH のプロフィール URL を入力してください。</span>
            </td>
        </tr>
        <tr>
            <th><label for="marshmallow">マシュマロ URL</label></th>
            <td>
                <input type="text" name="marshmallow" id="marshmallow" value="<?php echo esc_attr(get_the_author_meta('marshmallow', $user->ID)); ?>" class="regular-text" />
                <br><span class="description">マシュマロ のプロフィール URL を入力してください。</span>
            </td>
        </tr>
    </table>
    <?php
}
add_action('show_user_profile', 'add_custom_user_profile_field');
add_action('edit_user_profile', 'add_custom_user_profile_field');

入力した URL を保存

function save_custom_user_profile_fields($user_id) {
    if (!current_user_can('edit_user', $user_id)) {
        return false;
    }
    if (isset($_POST['patreon'])) {
        update_user_meta($user_id, 'patreon', $_POST['patreon']);
    }
    if (isset($_POST['booth'])) {
        update_user_meta($user_id, 'booth', $_POST['booth']);
    }
    if (isset($_POST['marshmallow'])) {
        update_user_meta($user_id, 'marshmallow', $_POST['marshmallow']);
    }
}
add_action('personal_options_update', 'save_custom_user_profile_fields');
add_action('edit_user_profile_update', 'save_custom_user_profile_fields');

SNS アイコンを表示するカスタマイズ

次に、追加した SNS リンクをサイト上で表示し、アイコンとしてカスタム画像を適用します。

SNSアイコンのダウンロード

今回は BOOTH、Patreon、マシュマロの SNS アイコンを使用するので、それぞれの公式サイトからロゴをダウンロードしてください。ロゴの使用方法については、各サイトのガイドラインを熟読し、適切に利用してください。

SNS アイコンを表示するためのコード

子テーマの functions.php とstyle.cssにコードを追加し、独自の SNS アイコンを表示できるようにします。

SNS フォローボタンの追加

子テーマの functions.php に以下のコードを追加し、独自の SNS フォローボタンを表示できるようにします。

// SNSフォローボタンの出力をフィルタリングしてSNSフォローボタンを追加
function add_patreon_follow_button($content) {
    $user_id = get_the_posts_author_id();
    $patreon_url = get_the_author_meta('patreon', $user_id);
    $booth_url = get_the_author_meta('booth', $user_id);
    $marshmallow_url = get_the_author_meta('marshmallow', $user_id);

    $content .= '"><div class="sns-follow-buttons sns-buttons">';

    if ($patreon_url) {
        $button_html = '<a href="' . esc_url($patreon_url) . '" class="sns-button follow-button patreon-button patreon-follow-button-sq" target="_blank" title="Patreonをフォロー" rel="nofollow noopener noreferrer" aria-label="Patreonをフォロー"><span class="icon-patreon-logo"></span></a>';
        $content .= $button_html;
    }
    if($booth_url) {
        $button_html = '<a href="' . esc_url($booth_url) . '" class="sns-button follow-button booth-button booth-follow-button-sq" target="_blank" title="BOOTHをフォロー" rel="nofollow noopener noreferrer" aria-label="BOOTHをフォロー"><span class="icon-booth-logo"></span></a>';
        $content .= $button_html;
    }
    if ($marshmallow_url) {
        $button_html = '<a href="' . esc_url($marshmallow_url) . '" class="sns-button follow-button marshmallow-button marshmallow-follow-button-sq" target="_blank" title="マシュマロをフォロー" rel="nofollow noopener noreferrer" aria-label="マシュマロをフォロー"><span class="icon-marshmallow-logo"></span></a>';
        $content .= $button_html;
    }
    $content .= '</div "';
    return $content;
}
add_filter('get_additional_sns_follow_button_classes', 'add_patreon_follow_button');

この方法では、Cocoon の tmp/sns-follow-buttons.php のget_additional_sns_follow_button_classes 関数をフィルターフックして、独自の SNS ボタンを追加しています。しかし、この方法だと元々の <div class="sns-follow-buttons sns-buttons"> の上に新しい <div class="sns-follow-buttons sns-buttons"> が追加される形になってしまい、やや強引な方法と言えます。

CSS でアイコンをスタイル設定

style.css に以下を追加して、アイコン画像を適用します。

.icon-booth-logo {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url('<uploadしたロゴへのパス>') no-repeat center / contain !important;
}
[class*=bc-brand-color] .booth-button {
    --cocoon-sns-color: #FC4D50;
}

.icon-patreon-logo {
    display: inline-block;
    width: 27.4px;
    height: 30px;
    background: url('<uploadしたロゴへのパス>') no-repeat center / contain !important;
}
[class*=bc-brand-color] .patreon-button {
    --cocoon-sns-color: #f96854;
}

.icon-marshmallow-logo {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url('<uploadしたロゴへのパス>') no-repeat center / contain !important;
}
[class*=bc-brand-color] .marshmallow-button {
    --cocoon-sns-color: #F3969A;
}

注意: background-image で画像を指定すると background-size の要素が消えてしまうという問題が発生することがあります。この問題を回避するため、background プロパティのショートハンド記述を使用すると、background-size も正しく適用されます。

.使用方法

  1. プロフィールページの下部にできたカスタムSNSリンクにURLを入力し保存
  2. SNSフォローボタンを表示するページに行き確認
  3. 表示できていなければ、WordPress のキャッシュやブラウザのキャッシュを削除

まとめ

これで、Cocoon テーマに BOOTH、Patreon、マシュマロの SNS アイコンを追加することができました。ユーザープロフィールにカスタムフィールドを作成し、サイト上でアイコンを表示させることで、訪問者に各サービスのページを案内できます。

なお、SNS アイコンの追加やカスタムボタンの作成をより簡単にしてくれるプラグインや情報源があれば、ぜひ教えてください！
また、アイコンをうまく並列に並べられる方法があれば教えてください。

2025-04-30サーバ&テクノロジ

Posted by 納戸 工房