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

2021年9月14日
ストーク
カスタマイズ

ストーク

ここあです。

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ボタンだけ追加したい場合は、カスタマイズする前にテーマのアップデートをお勧めします。

1 STORKのSNSシェアボタンを変更する手順
2 Webアイコンフォント「Font Awesome 5」を設置する
3 「Google+」と「LINE」のボタンを入れ替える
4 CSSで見た目を調整する
5 STORKのSNSシェアボタンをカスタマイズまとめ

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

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

以下の3ステップです。

WebアイコンフォントFont Awesome 5を設置し
LINEのアイコンを表示できるようにする
Google+とLINEのボタンを入れ替える
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つのファイル

parts_sns_short.php：ページ上部のSNSボタン
parts_sns.php：ページ下部のSNSボタン

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

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

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

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

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

parts_sns_short.php
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行目を書き換えます。

「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で共有">Google+<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a> </li>

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

「parts_sns_short.php」25行目にコピペ: <li class="line"> <a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank">LINE</a> </li>

↓ こんな感じに…

parts_sns_short.php

ここまで出来たら、一旦

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

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

30行目を書き換えます。

「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で共有">Google+<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a> </li>

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

「parts_sns.php」30行目にコピペ: <li class="line"> <a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank">LINE</a> </li>

↓ こんな感じに…

parts_sns.php

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

CSSで見た目を調整する

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

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

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

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

ダッシュボードメニュー

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

dropshadow

今回、SNSシェアボタンは

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

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

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

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

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

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

色ベタのSNSシェアボタン

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

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

色ベタのSNSボタンのCSSコード: .sns .line a {
background:#25af00;
box-shadow:0 3px 0 #219900;
}
.sns .line a:hover {
background:#219900;
}

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

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

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

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

めちゃくちゃ多いです＾＾；

白いSNSボタンのCSSコード

.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;
}

.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;
}

.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;
}

.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;
}

.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シェアボタンをカスタマイズまとめ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次のページビジネスに効果的なデザインの考え方と作り方を無料公開中！

WordPressテーマ「THE THOR」
一流の開発陣によって集客と収益に徹底的にこだわり開発された究極のテーマ「ザ・トール」。どのテーマよりも早く実装された革新的機能が詰まったこのテーマで、あなたもインターネットを活用したビジネスを始めませんか？

詳しくはこちら

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

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

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

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

CSSで見た目を調整する

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

【コピペだけ！】STORK（ストーク）のページャーをカスタマイズしよう！

WPテーマ「STORK」カスタマイズ！LINE風プロフィールの作り方！