【Cocoon】SNSボタンのインスタグラムの色の変え方【カスタマイズ】

ゾムビット

ドーモ、僕(@zomubbit)です。ぞむぅ。

前回の記事はここからどうぞ☆

【Cocoon】おでかけスキンのSNSボタンの色の変え方【カスタマイズ】

SNSボタンの色が白抜きで固定化されているCocoonスキンのおでかけシリーズ。本記事はこの白抜きを色付きに変える方法を解説しています。

こちらのアイコンをご存じですか？

そう、Instagramです！

ゾムビットのインスタフォローボタンもインスタ公式のアイコンと同じような色合いをしています。

これはPHPファイルを編集しているからで、何も編集しないとこんな感じになります。

絶対編集後の方が可愛いですよね！！？（個人の感想です）

今回は誰でも簡単にインスタボタンの色を変える方法を解説していきます。

本記事はサーバー上のフォルダとPHPファイルを編集します。

サーバーとかPHPファイルとか聞いて「うわ、、」と思った方、筆者のPCレベルは「何もしてないのに動かなくなったぁ！」です。

そんなパソコン弱者でも秒で出来ます。安心してね。

注意

・PHPファイルはサイトを構成している大事なファイルですので、編集をする前に必ずバックアップを取ってください。

・親テーマではなく子テーマを編集してください。

Contents

最初にバックアップを取る
サーバー上でやること
WordPress編集
1. おまけ
まとめ

最初にバックアップを取る

WordPressの編集画面で『Cocoon設定→バックアップ→バックアップファイルの取得』。テキストファイルを保存して終了。

因みに復元するときは、リストアで保存したテキストファイルをアップロードするだけです。

サーバー上でやること

①親テーマからフォローボタンファイルをコピーする

ConoHa WINGで説明をします。

お使いのサーバー（エックスサーバー、ロリポップ、さくらインターネット、ConoHa WING 等）にログイン後、Cocoon親テーマの『tmp』フォルダを目指してください。

ConoHa WINGの場合は、まず『サイト管理→ファイルマネージャー』の手順で進んでください。

進んだら『＊＊＊＊@localhost→public_html→自分のサイトURL→wp-content→themes→cocoon-master→tmp』の順でtmpフォルダまで行ってください。

cocoon-child-masterフォルダと間違えないよう注意！

『sns-follow-buttons.php』ファイル上で右クリック＆コピーで、ファイルをコピーしてください。

sns-share-buttons.phpファイルと間違えないよう注意！

②子テーマにフォローボタンファイルを貼り付ける

『wp-content→themes→cocoon-child-master→tmp』の順でtmpフォルダまで行き、先ほどコピーしたファイルを貼り付けてください。

※画面の何もないところで右クリックをするとメニューが出てくるので『ペースト』を選んで下さい。

※tmpフォルダがない時は、、、

cocoon-child-masterフォルダ内で新規フォルダをクリックしてフォルダを作ってください。フォルダ名は『tmp』で。

WordPress編集

①テーマエディター

WordPressの編集画面から『外観→テーマエディター→tmp→sns-follow-buttons.php』まで行って、sns-follow-buttons.phpをクリックしてください。

『編集するテーマを選択』はCocoon childを選択してください。

サーバーでの手順が上手くいっていればテーマエディターにtmpが表示されます。

②ソースコードの置き換え

『ctrl+F』で出てきた検索バーに『Instagram』と入力してください。

上記の検索で出てきた列（上の画像の場合だと48、49、50）と以下のソースコードを置き換えてください。

<?php if ( get_the_author_instagram_url($user_id) )://Instagramフォローボタンを表示するか ?>
    <a href="<?php echo esc_url(get_the_author_instagram_url($user_id)); //InstagramフォローIDの取得 ?>" class="follow-button instagram-button instagram-follow-button-sq" target="_blank" style="background: linear-gradient(45deg,#FFDD83, #F26939 30%, #CF2E92 60%, #4C64D3);"  title="<?php _e( 'Instagramをフォロー', THEME_NAME ) ?>" rel="nofollow noopener noreferrer"><span class="icon-instagram-logo"></span></a>
  <?php endif; ?>

「ファイルを更新」を押して終了です。お疲れさまでした！

変更点

targetとtitleの間に以下のコードを追加しただけです。

style=”background: linear-gradient(45deg,#FFDD83, #F26939 30%, #CF2E92 60%, #4C64D3);”