まず初めにこちらの画像をご覧いただこう。
＼フォローボタンにpixivが！／
筆者、pixivもアカウントを持っているので、どうにかしてフォローボタンを設置したいと思っていたのですが、いくら調べても方法が出てきませんでした。
そこで自分で調べてカスタムをしてみたら意外と出来たので、同じような境遇の方の助けになればと記事を書きました。
本記事はサーバー上のフォルダとPHPファイルを編集します。
サーバーとかPHPファイルとか聞いて「うわ、、」と思った方、筆者のPCレベルは「何もしてないのに動かなくなったぁ！」です。
そんなパソコン弱者でも秒で出来ます。安心してね。
・PHPファイルはサイトを構成している大事なファイルですので、編集をする前に必ずバックアップを取ってください。
・親テーマではなく子テーマを編集してください。
最初にバックアップを取る
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編集
①pixivアイコンのアップロード
WordPressの編集画面で『メディア→新規追加』で画像をアップロード。
『メディア→ライブラリ→アップロードした画像をクリック』で画像のURLをコピーしてください。
＼丸形アイコンが好みの場合はこちらの画像を使ってください／
＼四角アイコンが好みの場合はこちらの画像を使ってください／
画質が粗いですが、そのままコピーしてNO加工で使ってください。
②テーマエディター
WordPressの編集画面から『外観→テーマエディター→tmp→sns-follow-buttons.php』まで行って、sns-follow-buttons.phpをクリックしてください。
『編集するテーマを選択』はCocoon childを選択してください。
サーバーでの手順が上手くいっていればテーマエディターにtmpが表示されます。
※フォローボタンとシェアボタンの違い
チェックを入れるだけのシェアボタンと違い、フォローボタンは自分のSNSアカウントのURLを貼り付けることによってページにボタンが反映されます。
下記のサイトの中から今後絶対に使わないサイトとpixivを置き換えます。
今回はLinkedInをpixivに置き換えます。
ビジネスに特化したSNS。同業者や同僚、取引先と「つながり」、関係性を深めたり、最新の情報を入手したりできる。
組織に所属したくなくてブログ始めたんだから秒で消すよね。
③リンクの置き換え
置き換えたいリンクコード（今回はLinkedInフォローボタン）の青い範囲と下記のコードを書き換えてください。
<a href="自分のpixivのURL" target="_blank" style="background-color:#0096FA;" rel="nofollow noopener noreferrer" ><img src="自分でアップロードした画像のURL" /></a>「自分のpixivのURL」、「自分でアップロードした画像のURL」と自分のSNS、画像URLを入れ替えてください。
※青い範囲以外は変えないでください。
今回の場合は57番目を変更します。
置き換えたら『ファイルを更新』を押して、テーマエディターの編集は終了です。
Cocoon設定
①フォローボタンの表示設定
WordPressの編集画面で『Cocoon設定→SNSフォロー』に行きます。
「フォローボタンの表示」にチェックを入れて、変更をまとめて保存してください。
pixivのアイコンがすごいことになっているのですが、、、
スルー推奨。
②URLの入力
WordPressの編集画面で『ユーザー→プロフィール』に行きます。
置き換えたURL（今回はLinkedIn）の箇所にpixivのURLを入れて、プロフィールを更新してください。
以上です。お疲れさまでした！
まとめ
はい！自分好みのSNSフォローボタンを追加する方法をご紹介しました。
ぜひぜひ真似して設置したいフォローボタンを追加してみてください！
？？「ね、簡単でしょ？」
それでは今回はこの辺で。次もぜってぇ見てくれよな☆
コメント