WPテーマ「STORK」カスタマイズ!SNSボタンにLINEを入れよう!

【コピペだけ!】STORK(ストーク)のSNSボタンをカスタマイズ!

 

ここあです。

 

WordPressテーマSTORK(ストーク)の良いところは

デフォルトでSNSのシェアボタンが

設置されている点です。

 

これからネットビジネスで情報発信が

ますます大事になる世の中で

 

SNSのシェアボタンは

欠かすことができないアイテムの1つとなってきます。

 

私もSTORKのSNSシェアボタンは

シンプルで分かりやすいし

非常に気に入っています。

 

ただ…

  • SNSシェアボタンの主張が強すぎる
  • Google+を使っている人が少ない

という部分においては少し残念に思います。

 

↓ デフォルトで設定されているSNSシェアボタン

ストーク:SNSシェアボタン

 

 

なので…

そんな気になる部分を解消すべく

  • Google+のボタンをLINEに
  • SNSシェアボタンを白ベースに

変更してみました。

 

↓ カスタマイズ後のSNSシェアボタン

ストーク:SNSシェアボタン

 

 

今回はその両方

  • SNSシェアボタンをシンプルにする
  • SNSシェアボタンのGoogle+をLINEを変える

2つの方法をご紹介致します。

 

SNSのシェアボタンの変更手順は順番に説明して行きます。

少しややこしく思うかもしれませんが

「やってみよう!」と思う方はぜひ挑戦してみてください。

 

かなりおすすめです^^

 

2018年10月現在。親テーマのバージョン1.2.2からgoogle+の代わりにLINEが入るようにアップデートされました。
※LINEボタンだけ追加したい場合は、カスタマイズする前にテーマのアップデートをお勧めします。

 

STORKのSNSシェアボタンを変更する手順

STORKのSNSシェアボタンの変更手順は

以下の3ステップです。

 

  1. WebアイコンフォントFont Awesome 5を設置し
    LINEのアイコンを表示できるようにする
  2. Google+とLINEのボタンを入れ替える
  3. CSSで調整する(コピーするだけ)

設定の作業としてはそれほど多くありません。

 

Webアイコンフォント「Font Awesome 5」を設置する

Webアイコンフォント

Font Awesome 5を設定すれば

LINEのアイコンが表示できるようになります。
※LINEのアイコンはFont Awesome 5にしかありません。

 

ということで、順番に進めていきましょう。

まずは、Webアイコンフォント

Font Awesome 5を読み込むためのコードを設置します。

 

ダッシュボードメニューから

外観 → テーマの編集をクリックし

ダッシュボードメニュー

 

 

テーマヘッダーを選びます。

テーマヘッダー

 

 

テーマヘッダーの編集は必ず子テーマでしてください。

子テーマにテーマヘッダーがないという場合は…

 

こちらの記事を参考にテーマヘッダーが編集できるよう

先に設定してくださいね。

「親テーマ」のファイルを「子テーマ」で編集する方法

 

テーマヘッダーを選択したら…

<head>〜</head>タグの間に以下のコードをコピーします。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

※表示上の問題でスペース等崩れていますが、コピペすると1行で貼り付けできます。

 

↓ こんな感じにしてください。

テーマヘッダー

 

 

コードを設置する時の注意点としては…

 

STORKの場合、</head>のすぐ上に上記コードを貼り付けると

他のSNSシェアボタンのアイコン表示が消えてしまいます。

なので、程よく上部の方に設置しましょう。

 

万が一、他のアイコンが表示されなくなった場合は

コードを貼る位置を調整してみてください。

 

こちらが検証結果です。

</head>のすぐ上に上記コードを貼り付けると…

テーマヘッダー

 

 

↓ こうなります。

SNSシェアボタン

 

 

つまり、STORKはもともと

Font Awesome4.7が使える仕様になっているんですね。

※SNSシェアボタンのアイコンはFont Awesomeのアイコン

 

コードの場所を間違えると相互干渉してしまい

旧Font Awesomeのアイコンが消えてしまうみたいです。

 

なお、WebアイコンフォントFont Awesomeの使い方は

こちらの記事に詳しくまとめています。

「Font Awesome」の使い方をやさしく解説

 

Font Awesome 5のコードがテーマヘッダーに設置できたら

Google+とLINEのボタンを入れ替えます。

 

Google+」と「LINE」のボタンを入れ替える

Google+とLINEのボタンを入れ替えるには

子テーマのテーマヘッダー同様

 

以下、2つのファイル

  1. parts_sns_short.php:ページ上部のSNSボタン
  2. parts_sns.php:ページ下部のSNSボタン

それぞれを親テーマのファイルから子テーマにコピーし

編集できるようにしなければなりません。

 

やり方は、テーマヘッダーのファイルと同じです。

 

サーバーに接続するためのFTPソフトを使い

STORKの親テーマにある2つのファイル

  1. parts_sns_short.php
  2. parts_sns.php

を一旦、任意の場所にダウンロードして

 

その2つのファイルを

子テーマであるjstork_custom

アップロードしてコピーします。

 

※FTPソフトのインストール方法と使い方は

 以下の記事を参考にしてください。

FTPソフトFileZilla(ファイルジラ)のインストール方法と使い方

 

ファイルの場所は…

public_html → wp-content → themes → jstorkと辿り

2つのファイルをダウンロードしたら…

ファイルの場所

 

 

今度は、その2つのファイルを

public_html → wp-content → themes → jstork_customと辿って

jstork_customのフォルダにアップロードしてください。

 

↓ こんな感じでコピーできていればOKです。

「jstork_custom」のフォルダ

 

 

無事にアップロードが完了していれば

ダッシュボードメニューから

外観 → テーマの編集画面に移動すると

 

先ほど追加した2つのファイルが編集できるように

表示されているはずです。

STORKテーマ編集画面

 

 

2つの設定ファイルが無事に表示されたら

各編集画面で以下のコードに書き換えましょう。

 

まずは1つ目、parts_sns_short.phpのコード

25行目を書き換えます。

<li class="googleplus">
<a href="https://plusone.google.com/_/+1/confirm?hl=ja&url=<?php echo get_permalink() ?>" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;" rel="tooltip" data-toggle="tooltip" data-placement="top" title="GooglePlusで共有"><i class="fa fa-google-plus"></i><span class="text">Google+</span><span class="count"><?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></span></a>
</li>

 

このコードを以下に置き換えます(コピペでOK!)

<li class="line">
<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank"><i class="fab fa-line"></i><span class="text">LINE</span></a>
</li>

↓ こんな感じに…

parts_sns_short.php

 

ここまで出来たら、一旦

parts_sns.phpのコード編集画面に切り替えましょう。

 

続いて2つ目、parts_sns.phpのコード

30行目を書き換えます。

<li class="googleplus">
<a href="https://plusone.google.com/_/+1/confirm?hl=ja&url=<?php echo get_permalink() ?>" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;" rel="tooltip" data-toggle="tooltip" data-placement="top" title="GooglePlusで共有"><i class="fa fa-google-plus"></i><span class="text">Google+</span><span class="count"><?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></span></a>
</li>

 

このコードを以下に置き換えます(コピペでOK!)

<li class="line">
<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank"><i class="fab fa-line"></i><span class="text">LINE</span></a>
</li>

↓ こんな感じに…

parts_sns.php

 

ここまで出来たら最後の仕上げです!

 

CSSで見た目を調整する

最後にCSSで見た目の調整を行います。

CSSコードを記述する場所は、いつものあそこ…

 

ダッシュボードメニューから

外観 → カスタマイズをクリック。

ダッシュボードメニュー

 

 

追加CSSにCSSコードを記述してください。

dropshadow

 

 

今回、SNSシェアボタンは

私と同じように白いボタンに変更する方法だけを

ご紹介しようと思いましたが…

 

別に白いボタンでなくても良いという人もいると思うので

色味だけ変更するコードも記載しておきます。

あなたのお好みでセレクトしてくださいね。

 

★色ベタのSNSシェアボタンが良いという場合…

色ベタのSNSシェアボタン

 

 

以下のコードをコピーしてください(コピペでOK!)

Google+の色の設定をLINEカラーに変更します。

/* LINE */
.sns .line a {
background:#25af00;
box-shadow:0 3px 0 #219900;
}
.sns .line a:hover {
background:#219900;
}

 

 

★白いSNSシェアボタンが良いという場合…

SNSシェアボタンカスタマイズ

 

 

以下のコードをコピーしましょう(コピペでOK!)

こちらは全ての見た目を変更するコードなので

めちゃくちゃ多いです^^;

/*SNSシェアアイコンの変更*/
.sns li a{
font-size: 80%;
position: relative;
display: block;
padding: 10px;
color: #fff;
border-radius: 2px;
text-align: center;
text-decoration: none;
text-shadow: none;
}

.sns li a:hover{
-webkit-transform: none;
-moz-transform: none;
transform: none;
box-shadow: none;
}

.sns li a .text{
font-weight: bold;
}

/*ツイッター*/
.sns .twitter a{
color: #22b8ff !important;
border: solid 1px #22b8ff !important;
background: #fff !important;
box-shadow: none;
}

.sns .twitter a:hover{
color: #fff !important;
border: solid 1px #22b8ff !important;
background: #22b8ff !important;
}

/*Facebook*/
.sns .facebook a{
color: #6680d8 !important;
border: solid 1px #6680d8 !important;
background: #fff !important;
box-shadow: none;
}

.sns .facebook a:hover{
color: #fff !important;
border: solid 1px #6680d8 !important;
background: #6680d8 !important;
}

/*はてブ*/
.sns .hatebu a{
color: #5d8ac1 !important;
border: solid 1px #5d8ac1 !important;
background: #fff !important;
box-shadow: none;
}

.sns .hatebu a:hover{
color: #fff !important;
border: solid 1px #5d8ac1 !important;
background: #5d8ac1 !important;
}

/*Pocket*/
.sns .pocket a{
color: #ff6d82 !important;
border: solid 1px #ff6d82 !important;
background: #fff !important;
box-shadow: none;
}

.sns .pocket a:hover{
color: #fff !important;
border: solid 1px #ff6d82 !important;
background: #ff6d82 !important;
}

/*Feedly*/
.sns .feedly a{
color: #6cc655 !important;
border: solid 1px #6cc655 !important;
background: #fff !important;
box-shadow: none;
}

.sns .feedly a:hover{
color: #fff !important;
border: solid 1px #6cc655 !important;
background: #6cc655 !important;
}

/*Line*/
.sns .line a{
color: #25af00 !important;
border: solid 1px #25af00 !important;
background: #fff !important;
box-shadow: none;
}

.sns .line a:hover{
color: #fff !important;
border: solid 1px #25af00 !important;
background: #25af00 !important;
}

 

無事にコピーが完了し

全て正常に表示されたら公開ボタンをクリックし

設定を保存してくださいね。

 

STORKのSNSシェアボタンをカスタマイズまとめ

STORKのSNSシェアボタンをカスタマイズまとめ

 

全ての設定ができてもまだ終わりではありません。

作業が全て完了したらLINEのシェアボタンをクリックし

 

LINEでちゃんとシェアできるか

あなた自身の手で確かめてみましょう。

 

せっかくボタンが設置できても

肝心のシェアができなければ意味がありませんからね…^^;

なので、確認作業は必ず行ってくださいね。

 

今回は少し設定がややこしく、初心者向けというよりは

中級者向けのカスタマイズだったかもしれませんが

設定ファイルのコピーさえ上手くできれば

 

あとの作業は全てコピペのみでできるものばかりです。

なので、この記事を読んで「やってみよう!」と思った方は

ぜひ挑戦してみてくださいね。

 

最後までお読みいただきありがとうございました!

 

設定でよく分からないことがあれば

気軽にご相談くださいね!

「ここあ」に問い合わせをする

 

合わせて読みたい!

 

【コピペだけ!】STORK(ストーク)のSNSボタンをカスタマイズ!

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。