【WordPress】インスタグラムのSNSフォローボタン色を変更

こんにちは、ナカムです。

この記事は、インスタグラムのSNSフォローボタン色を変更する方法について解説します。
SNSボタンを好きなデザインへ変えた後、インスタグラムの色だけ公式と違う方が多いでしょう。

変更方法を少しづつ説明していきます。

※本ページはプロモーションが含まれています。

色の変更前と変更後

変更前です。

変更後です。

変更後の方が一瞬でインスタグラムだと分かります。

大きく分けると、次の作業をします。

サーバー内のPHPファイルをコピペ

スタイルシート (style.css）コードの書き換え

ほとんどがコピペなので簡単です。

順番に説明をします。

サーバー内のPHPファイルを編集

まずは、PHPファイルの編集をします。

編集と言っても、コピペです。

要注意

PHPファイルはご自身のサイト全体に関するファイルが多数ありますので、事前にバックアップを取ってから編集しましょう。

契約しているサーバーへログイン

契約しているサーバーへログインします。

わたくしはXサーバーを契約しているので、このようなログイン画面です。

Xサーバー以外にも、様々なサーバーがありますので、まずはログイン。

サーバーのファイル管理へ入る

次に、サーバーのファイル管理へ入ります。

親テーマの階層からtmpフォルダへ入る

「ドメイン名ファイル」→「public _ html」→「wp-content」→「themes」→「cocoon-master」→「tmp」→「sns-follow-buttons.php」

「sns-follow-buttons.php」ファイルをコピぺ

この「sns-follow-buttons.php」ファイルを選んでコピぺ。

コピペの方法は、各サーバーによって違う為、それぞれの方法で行ってください。

マウスを使ってのコピペも後ほど、載せておきます。

Xサーバーのコピペ方法

Xサーバーのコピペ方法です。

まず、ファイルを選ぶ。

サーバー上部のコピーをクリック。

コピー先を指定

「コピー先を変更」クリック。

保存先を指定

子テーマの保存先「tmp」を選ぶ。

「tmp」フォルダが無い場合は、新規の「tmp」フォルダを作成をする。

フォルダの階層からコピペ

マウスなどでコピーする場合は、階層から子テーマ先の「tmp」フォルダへ、ペーストします。

「ドメイン名ファイル」→「public _ html」→「wp-content」→「themes」→「cocoon-child-master」→「tmp」→ファイルの「sns-follow-buttons.php」をペースト。

「tmp」フォルダが無い場合は、新規の「tmp」フォルダを作成をする。

「sns-follow-buttons.php」ファイルのコピー完了

サーバー内の、PHPファイル「sns-follow-buttons.php」が子テーマ先のフォルダへ、コピペ完了です。

WordPressのコード書き換え

PHPファイル「sns-follow-buttons.php」を親テーマから子テーマへ、コピぺが終わると、次にWordPressのコード書き換え作業に入ります。

作業としては、子テーマのスタイルシート (style.css）指定場所を消去後にコードのコピペです。

コードは、下記へ載せています。

順序としては、WordPressの外観→テーマエディター→子テーマのスタイルシート (style.css）選ぶ→スタイルシート (style.css）の「tmp」クリック→「sns-follow-buttons.php」クリック→検索で「Instagram」探す→「48」「49」「50」のコードを消去→「48」「49」「50」へ新しいコードをコピペ。

style.cssテーマエディター

WordPressの外観→テーマエディターを選ぶ。

子テーマのスタイルシート (style.css）選ぶ

WordPress、上部に表示されている「編集するテーマ選択」で子テーマを選択する。

スタイルシート (style.css）のtmpをクリック

スタイルシート (style.css）のtmpをクリックします。

sns-follow-buttons.phpをクリック

「tmp」の「sns-follow-buttons.php」をクリックして中へ入る。

「sns-follow-buttons.php」のコードを書き換え

「sns-follow-buttons.php」の中へ入り、コードを書き換えます。

書き換えるコードを早く探すために、検索バーの表示を出します。

iMacは「command +F」、「Windowsは「ctrl +F」を押すと、検索バーが出てくるので「Instagram」と入力する。

書き換えるコードの列は、「48」「49」「50」です。

選択のコードを消去。

要注意

PHPファイル内は、ご自身のサイト全体に関するファイルが多数ありますので、間違って他のコードを消さないでください。

慌てずに落ちついて作業しましょう。

コード記載

下記のコード「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; ?>