↑ このようなボタンを作成します。必要な作業は次の通りです。

・sns.phpの作成
・cssの編集その1
・webフォントの追加
・cssの編集その2

sns.phpの作成

テキストエディタで、次のコードを作成し、phpで保存します。ファイル名は sns.php とします。

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name');
?>
  
<div class="share">
    <ul>
  
<!--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;">
        <span class="icon-facebook2"></span> facebook <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>
</li>
  
<!--ツイートボタン-->
<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;">
        <span class="icon-twitter"></span> tweet <?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>
</li>
  
<!--Google+ボタン-->
<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">
        <span class="icon-google-plus3"></span> Google+ <?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a>
</li>
 
<!--LINEボタン-->   
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"><span class="icon-line"></span> LINE</a>
</li>

<!--mixiボタン-->
<li class="rss">
<a href="javascript:void(0);" onclick="window.open('http://mixi.jp/share.pl?u=<?php the_permalink() ?>&k=822226b8cc50c1161659e9bdab03412a1aad6206','share',['width=632','height=456','location=yes','resizable=yes','toolbar=no','menubar=no','scrollbars=no','status=no'].join(','));"><span class="icon-mixi"></span> mixi</a></li>
 
<!--feedlyボタン-->
<li class="feedly">
<a href="http://feedly.com/i/subscription/feed/http://自分のドメイン/feed" target="blank"><span class="icon-feedly"></span> feedly <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>   
</ul>
</div>

 

cssの編集

style.css に下記のコードを追記します。

/* フラットSNSボタン */
.share {
	margin: 0px 0px 0px 0px;
}
.share ul {margin : 0;
    padding : 0;
    list-style : none;}
.share li a {display : block;
    padding : 3px;
    color : #fff;
    font-size : 14px;
    text-decoration : none;
    text-align : center;}
.share li a:hover {opacity :0.8;
    color : #fff;}
.share li a:visited{ color: #fff;}
.share ul:after {content : "";
    display : block;
    clear : both;}
.tweet a{background-color : #55acee;}
.facebook a{background-color : #315096;}
.googleplus a{background-color : #dd4b39;}
.hatena a{background-color : #008fde;}
.line a{background-color: #00c300;}
.pocket a{background-color :#f03e51;}
.rss a{background-color: #f5a51c;}
.feedly a{background-color: #6cc655;}

@media screen and (min-width: 768px) { /* 画面幅768px以上の端末 */
.share li {
	float : left;
	width : 25%;
	margin : 0;
	margin : 0px 0px 9px 0px;
}
}

@media screen and (max-width: 767px) { /* 画面幅767pxまでの端末 */
.share li {float : left;
	width : 33%;
	margin : 0;
	margin : 0px 0px 9px 0px;
}
}

 

WEBフォントの追加

こちらからSNSロゴのフォントをダウンロードします。

解凍してできた “fonts” というフォルダをそのままテーマ内にアップロードします。

テーマフォルダ内はこのような構造となります。

style.css に下記のコードを追記します。

/* WEBフォント */
@font-face {
    font-family: 'icomoon';
    src:    url('./fonts/icomoon.eot?iv469e');
    src:    url('./fonts/icomoon.eot?iv469e#iefix') format('embedded-opentype'),
        url('./fonts/icomoon.ttf?iv469e') format('truetype'),
        url('./fonts/icomoon.woff?iv469e') format('woff'),
        url('./fonts/icomoon.svg?iv469e#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-mixi:before {
    content: "\e906";
}
.icon-feedly:before {
    content: "\e900";
}
.icon-line:before {
    content: "\e901";
}
.icon-google-plus3:before {
    content: "\e902";
}
.icon-facebook2:before {
    content: "\e903";
}
.icon-twitter:before {
    content: "\e904";
}
.icon-rss2:before {
    content: "\e905";
}

 

最後に、下記のコードを”content.php”の任意の場所に挿入します。

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

 

↑ このような表示となれば成功です。

いいねやツイート数などをカウントするには SNS Count Cache というプラグインを有効化します。