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

ブログ

 

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

そう、Instagramです!

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

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

絶対編集後の方が可愛いですよね!!?(個人の感想です)

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

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

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

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

注意

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

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

 

Sponsored Links

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

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

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

 

サーバー上でやること

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

ConoHa WINGで説明をします。

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

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

進んだら『****@localhost→public_html→自分のサイトURL→wp-content→themes→cocoon-mastertmp』の順で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』で。

 

Sponsored Links

 

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);”

 

おまけ

上の記事を参考にすればインスタグラムのロゴをそのまま貼り付けることもできますが、見栄えが悪いので、本記事で紹介した背景の色を変える方法をおすすめします。

 

参考にさせていただきました

 

Sponsored Links

 

まとめ

 

はい!誰でも簡単にインスタボタンの色を変える方法を解説しました。

ただ真っ青なだけよりも断然こちらの方が可愛いですよね?(個人の感想です)

簡単に変更できるので、ぜひぜひ試してオリジナリティあふれたブログを作ってみてください!

 

本記事のまとめ
  • バックアップを取る
  • サーバー上でファイルをコピーする
  • WordPressでコードを追加する

 

ゾムビット
ゾムビット

ここだけの話、ブログバグらせながらめっちゃ試行錯誤して色変えたぞ

 

それでは今回はこの辺で。もぜってぇ見てくれよな☆

コメント