【SANGOカスタマイズ】SANGO特有のSNSシェアボタンをカスタマイズする方法

このブログではサルワカさんが制作したWordpressテーマSANGOを使用しています。

SANGOではブログのレイアウトを変えるショートコードがたくさん用意されています。

そこでSNSシェアボタンのデザインを変えようといじってみましたが

SANGO特有の柔らかみのあるやさしいデザインは変わりませんでした。

機能的にはそのままでも十分問題ないのですが、

どうしてもゴツゴツとしたボタンに変えたかったので色々調べていたところ

マクリンさんのSANGOカスタマイズの記事にたどり着きました。

参考 【SANGOカスタマイズ】おしゃれな自作SNSシェアボタンを作成&設置する方法マクリン

上記記事を参考にいじってみましたが、

いくつかつまづいたところがあったので、そこを解説していきます!

この記事をみながら作業していただければ、SANGO特有のSNSシェアボタンを

↑こんな感じにカスタマイズすることができます!

SANGO子テーマを用意

親テーマを直接いじるのはリスクが大きいので、

カスタマイズするときは子テーマを用意しましょう。

詳しくはサルワカさんの記事を参考にしてください。

参考 WordPressで子テーマを活用して安全にカスタマイズを行う方法SANGO

はてなブックマークのアイコンを追加

SANGOではフリーWebアイコンのFont Awesomeが使えますが、

はてなブックマークのアイコンはないので別途CSSを追加して用意します。

ダッシュボード→外観→テーマの編集から子テーマ(SANGO-Child)を選択

style.cssに以下をコピペしてください

(初めての追加なら11行目)

style.cssに追加

/* Font Awesome hatena bookmark */
.fa-hatena:before {
content: "B!";
font-family: Verdana;
font-weight: bold
}

SNSシェアボタンを追加

はてなブックマークのアイコンと同じようにstyle.cssに以下をコピペしてください

(はてブのあとに追加なら17行目)

style.cssに追加

/* SNSボタン */
.share {margin-top : 5px;
}
.share ul {margin : 0 auto;
padding : 0;
list-style : none;}
.share li a {display : block;
padding : 0;
color : #fff;
font-size : 24px;
text-decoration : none;
text-align:center;
border-radius:3.5px;
}
/*マウスオーバー時の挙動*/
.share li a:hover {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
border-bottom: none;
box-shadow: none;
filter:brightness(80%);
}
.share li a:visited{ color: #fff;}
.share ul:after {content : "";
display : block;
clear : both;
}
/*各SNSボタンの色設定*/
.tweet a{background-color: #00acee;
box-shadow: 0 4px #0092ca;}
.facebook a{background-color : #4555ab;
box-shadow: 0 4px #3b4892;}
.hatena a{background-color : #008be2;
box-shadow: 0 4px #2f70be;}
.lines a{background-color: #00c030;
box-shadow: 0 4px #219900;}
.pocket a{background-color :#ec2136;
box-shadow: 0 4px #c0392b;}
.feedly a{background-color: #6cc655;
box-shadow: 0 4px #57b93e;
}
/*各SNSボタンの配列*/
.share li {float : left;
width : 15.6%;
margin:0.5% 0.5% 0.5% 0.5%;
margin-top:5px;
}
/*Font Awesomeのサイズ変更*/
.fa-big {
font-size: 24px !important;
}
@media screen and (max-width:480px){
.share li {
width : 30%;
margin:1.2% 1.2% 1.2% 1.6%;}
}

@media screen以下も追加しているので

PCでは1列表示、スマホでは2列表示になります

子テーマ(SANGO-Child)内にsns.phpファイルを作成

ここまででSNSシェアボタンの外側は完成ですが

中身をつくらないとボタンを押しても反応しないので、

ここから新たに子テーマ(SANGO-Child)内にsns.phpファイルを作っていきます

ここらへんからが少し複雑でつまづいた所になります。

順を追って解説していきます。

なおこのブログはミックスホストを使っているので

説明している画像等はミックスホストのファイルマネージャーになりますが

他のサーバーでも画面は違えど作成のしかたは同じです。

まずは管理画面からファイルマネージャーをクリック

ファイルマネージャーのページから

public_html→ドメイン→wp_content→themes→sango-theme-childと進んでいきます。

sango-theme-childのところまできたら

ファイルマネージャーの左上、+ファイルをクリック

ここで新たにsns.phpファイルを作成します。

子テーマ(SANGO-Child)のsns.phpにコードを追加

ファイルマネージャーでsns.phpファイルを作成したらダッシュボードに戻り

外観→テーマの編集と進んでいくと

新たにsns.phpが追加されているはずです。

sns.phpに以下をコピペしてください

sns.phpに追加

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'|'.get_bloginfo('name');
?>

<div class="share">
<ul>

<!--ツイートボタン-->
<li class="tweet"><a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
<i class="fab fa-twitter"></i></i> <?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>
</li>

<!--Facebookボタン-->
<li class="facebook"><a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
<i class="fab fa-facebook-f"></i></i> <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>
</li>

<!--はてなボタン-->
<li class="hatena"><a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;"><i class="fa fa-hatena fa-big"></i> <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
</li>

<!--LINEボタン-->
<li class="lines">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"><i class="fab fa-line"></i></a></li>

<!--ポケットボタン-->
<li class="pocket">
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>"><i class="fab fa-get-pocket"></i></i> <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a></li>

<!--feedlyボタン-->
<li class="feedly">
<a href="http://feedly.com/i/subscription/feed/https://vagabond-blog.net/feed" target="blank"><i class="fa fa-rss fa-big"></i> <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>
</ul>
</div>

feedlyのドメイン以外の赤文字部分はFont Awesomeのアイコン名です。

上記のままコピペすると

↑このアイコンになります。

僕はこのアイコンで気に入っていますが、

他のアイコンを使用したい方はFont Awesomeで探して赤文字部分を変更してください。

feedlyの赤文字のドメイン部分はこのブログのドメインになっているので

ご自身のブログのドメインに変更してください。

子テーマ(SANGO-Child)にentry-header.phpとentry-footer.phpを作成

最後にSNSシェアボタンの設置場所をつくれば完成です!

またファイルマネージャーをいじりますが、

これが終わればかっこいいSNSシェアボタンのできあがりです

あと2ステップです!頑張っていきましょー!

まずsns.phpファイルを作成した時と同じようにファイルマネージャーのページにいきます

以前と同じく

public_html→ドメイン→wp_content→themes→sango-theme-childと進んでいきます。

sango-theme-childのところまできたら今度はpartsフォルダーを作成します。

作成できたらsango-theme-child内にpartsフォルダーができているはずです。

次はpartsフォルダの中にsingleフォルダーを作成します。

sango-theme-child→partsまできたら+フォルダーです。

少しややこしいので注意してください。

singleフォルダーが作成できたら次は親テーマ(sango-theme)から

SNSシェアボタンを設置したい箇所のPHPファイルを選択して

子テーマ(sango-theme-child)のsingleフォルダーにコピーします。

記事タイトル下にSNSシェアボタンを設置するならentry-header.phpコピー

記事コンテンツ後にSNSシェアボタンを設置するならentry-footer.phpコピー

二か所ともに設置したい場合は両方コピー

 

(※このブログでは記事コンテンツ後のみ設置しています)

まずsango-theme→parts→singleまで進みます。

singleフォルダの中に上記4つのPHPファイルがあるはずです。

SNSシェアボタンを設置したい箇所のPHPファイルを選択してコピーします。

コピー先のファイルパスは/sango-theme/の最後に-childを追加すればOKです。

ファイルパスを書き加えてコピーする方が簡単だったので、こっちを解説していますが

親テーマ(sango-theme)からPHPファイルをアップロード

子テーマ(sango-theme-child)にダウンロードでも追加できます。

SANGOオリジナルコードをsns.phpを呼び出すコードに変更

ここまで順調にできましたでしょうか?

いよいよこれが最後のステップになります!

SNSシェアボタンをつくり、ファイルマネージャーをいじって設置場所も決めました。

あとは設置場所のSANGOオリジナルコードを

sns.phpを呼び出すコードに変更すれば完成です!

ダッシュボードに戻り外観→テーマの編集から

子テーマ(sango-child)のparts→single内にいくと

entry-header.phpentry-footer.phpがコピーされているはずです。

それぞれファイルを開いてSANGOオリジナルコードの部分↓を

entry-header.php(36行目)

<?php if(get_option('open_fab')) insert_social_buttons('belowtitle');//通常のボタン ?>

entry-footer.php(4行目)

<?php insert_social_buttons(); //シェアボタン?>

作成したsns.phpを呼び出すコード↓に変更します。

sns.phpを呼び出すコード

<?php get_template_part( 'sns' ); ?>

ファイルを更新っと

ついに、ついに完成しました!

早速、ブログにアクセスしてシェアボタンを確認してみてください。

カスタマイズ後はキャッシュの削除を忘れないで

よーし、できたぞ!ポチッ

あ、あれちゃんとやったはずなのにアイコンが化けて反映されてない・・・

となるはずです(僕もここでつまづきました笑)

数日したら反映されるのかな・・・とか思って放置していたんですが一向に変わらず

いろいろ調べたら「キャッシュの削除をしろ」とのことで

早速キャッシュを削除してみたところ

どどーんと反映されました!

か、かっこええ~

ということでSANGOシェアボタンのカスタマイズは以上となります

お疲れさまでした!

 

キャッシュの削除の仕方がわからないという方がおられましたら

↓以下ヘルプを参考にしてください。

参考 キャッシュ(インターネット一時ファイル)の削除方法Yahoo! JAPANヘルプセンター

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です