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

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

ここあです。

 

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

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

設置されている点です。

 

これからネットビジネスで情報提供が

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

 

SNSのシェアボタンは

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

 

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

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

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

 

ただ…

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

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

 

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

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

 

なので…

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

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

変更してみました。

 

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

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

 

今回はそのやり方をご紹介致します。

 

順を追って説明していくので

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

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

 

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">

 

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

テーマヘッダー

 

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

 

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

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

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

 

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

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

 

こちらが検証結果です。

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

テーマヘッダー

 

こうなります。

SNSシェアボタン

 

つまり、「STORK」はもともと

Font Awesome」が使える仕様になっているんですね。

※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

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

 

ファイルの場所は…

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

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

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

 

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

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

 

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

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

 

今回は少し設定がややこしく

初心者向け」というよりは「中級者向け」だったかもしれませんが

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

 

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

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

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

 

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

 

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

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

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

 

合わせて読みたい!

 

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

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


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

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


ABOUTこの記事をかいた人

ここあ

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