WordPress

コピペでOK!WordPressでオリジナルSNSボタンを設置する方法

各種SNSボタンは、マウスオーバーで沈むデザインです。 display:table-cellを使っているので、等間隔に並んでキレイです!

ボタンのアイコンフォントについて

SNSボタンのアイコンは、アイコンフォントの「Font Awesome」と「IcoMoon」を使用しています。

pocket・feedly・はてブ。この3つのアイコンは、IcoMoonを使用して表示。

IcoMoonの設定が面倒な場合は、Font Awesomeで似たようなアイコンを探して、設定してください。

あわせて読みたい
WordPressでアイコンフォントの「IcoMoon」を設定する方法IcoMoonのアイコンフォントを設定すると、FontAwesomeにはない、アイコンフォントを表示できるようになります。 あとで説明...

style.cssにコードを追加する

css

/*———————————————
記事下SNSボタン
———————————————*/
.original-sns {
display: table;
table-layout: fixed;
text-align: center;
width: 100%;
}

.original-sns li {
display: table-cell;
vertical-align: middle;
height: 30px;
border-collapse: separate;
}

.original-sns {
border-collapse: separate;
border-spacing: 3px;
}

.original-sns a {
color: #fff;
display: block;
font-size: 10px;
text-decoration: none;
padding: 10px 5px 2px 5px;
}

ul.original-sns {
margin: 0;
padding: 0;
}

/*——————————–
Twitterボタン
——————————–*/
.twi-btn {
padding: 5px 0 0;
}

.twi-btn a{
background-color: #00aced;
border-radius: 3px;
box-shadow: 0 4px 0 #02658B;
color: #FFFFFF;
display: block;
font-size: 90%;
font-weight: normal;
height: 30px;
margin: 0 auto;
text-decoration: none;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}

.twi-btn a:hover {
top:1px;
left:0px;
position:relative;
box-shadow: 0 1px 0 #02658B;
margin-bottom: -2px;
margin-top: 2px;
text-decoration: none;
}

/*——————————–
Facebookボタン
——————————–*/
.fb-btn {
padding: 5px 0 0;
}

.fb-btn a{
background-color: #3b5998;
border-radius: 3px;
box-shadow: 0 4px 0 #1D315C;
color: #FFFFFF;
display: block;
font-size: 90%;
font-weight: normal;
height: 30px;
margin: 0 auto;
text-decoration: none;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}

.fb-btn a:hover {
top:1px;
left:0px;
position:relative;
box-shadow: 0 1px 0 #1D315C;
margin-bottom: -2px;
margin-top: 2px;
text-decoration: none;
}

/*——————————–
Google+ボタン
——————————–*/
.google-btn {
padding: 5px 0 0;
}

.google-btn a{
background-color: #CC3732;
border-radius: 3px;
box-shadow: 0 4px 0 #B3291C;
color: #FFFFFF;
display: block;
font-size: 90%;
font-weight: normal;
height: 30px;
margin: 0 auto;
text-decoration: none;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}

.google-btn a:hover {
top:1px;
left:0px;
position:relative;
box-shadow: 0 1px 0 #B3291C;
margin-bottom: -2px;
margin-top: 2px;
text-decoration: none;
}

/*——————————–
はてブボタン
——————————–*/
.hatebu-btn {
padding: 5px 0 0;
}

.hatebu-btn a{
background-color: #008FDE;
border-radius: 3px;
box-shadow: 0 4px 0 #2A5684;
color: #FFFFFF;
display: block;
font-size: 90%;
font-weight: normal;
height: 30px;
margin: 0 auto;
text-decoration: none;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}

.hatebu-btn a:hover {
top:1px;
left:0px;
position:relative;
box-shadow: 0 1px 0 #2A5684;
margin-bottom: -2px;
margin-top: 2px;
text-decoration: none;
}

/*——————————–
pocketボタン
——————————–*/
.pocket-btn {
padding: 5px 0 0;
}

.pocket-btn a{
background-color: #DC3D50;
border-radius: 3px;
box-shadow: 0 4px 0 #BA2830;
color: #FFFFFF;
display: block;
font-size: 90%;
font-weight: normal;
height: 30px;
margin: 0 auto;
text-decoration: none;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}

.pocket-btn a:hover {
top:1px;
left:0px;
position:relative;
box-shadow: 0 1px 0 #BA2830;
margin-bottom: -2px;
margin-top: 2px;
text-decoration: none;
}

/*——————————–
購読ボタン
——————————–*/
.original-feed {
display: table;
table-layout: fixed;
text-align: center;
width: 100%;
}

.original-feed li {
display: table-cell;
vertical-align: middle;
height: 30px;
border-collapse: separate;
border-spacing: 3px;
}

.original-feed {
border-collapse: separate;
border-spacing: 3px;
}

.original-feed a {
color: #FFFFFF;
display: block;
font-size: 10px;
text-decoration: none;
padding: 10px 5px 0;
}

ul.original-feed {
padding: 0;
margin-bottom: 0;
}

/*——————————–
RSSボタン
——————————–*/
.rss-btn {
padding: 0px 0 0;
}

.rss-btn a{
background-color: #ffb53c;
border-radius: 3px;
box-shadow: 0 4px 0 #e09900;
color: #FFFFFF;
display: block;
font-size: 90%;
font-weight: normal;
height: 30px;
margin: 0 auto;
text-decoration: none;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}

.rss-btn a:hover {
top:1px;
left:0px;
position:relative;
box-shadow: 0 1px 0 #ffb53c;
margin-bottom: -2px;
margin-top: 2px;
text-decoration: none;
}

/*——————————–
feedlyボタン
——————————–*/
.feedly-btn {
padding: 0px 0 0;
}

.feedly-btn a{
background-color: #87c040;
border-radius: 3px;
box-shadow: 0 4px 0 #74a436;
color: #FFFFFF;
display: block;
font-size: 90%;
font-weight: normal;
height: 30px;
margin: 0 auto;
text-decoration: none;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}

.feedly-btn a:hover {
top:1px;
left:0px;
position:relative;
box-shadow: 0 1px 0 #87c040;
margin-bottom: -2px;
margin-top: 2px;
text-decoration: none;
}

single.phpにコードを追加する

以下の説明は、投稿記事のページにSNSボタンを追加する場合です。

single.php

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title());
?>
<div class=”original-sns” style=”margin: 0 padding: 0;”>
<ul class=”original-sns”>

<!– ポケットボタン –>
<li class=”pocket-btn”>
<a href=”http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>” target=”blank”><i class=”fa fa-chevron-down fa-2x”></i>
<?php if(function_exists(‘scc_get_share_pocket’)) echo (scc_get_share_pocket()==0)?”:scc_get_share_pocket(); ?></a>
</li>

<!– ツイートボタン –>
<li class=”twi-btn”>
<a href=”http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=◯◯&tw_p=tweetbutton”><i class=”fa fa-twitter fa-2x”></i><?php if(function_exists(‘scc_get_share_twitter’)) echo (scc_get_share_twitter()==0)?”:scc_get_share_twitter(); ?></a>
</li>

<!– Facebookボタン –>
<li class=”fb-btn”>
<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=”fa fa-facebook fa-2x”></i> <?php if(function_exists(‘scc_get_share_facebook’)) echo (scc_get_share_facebook()==0)?”:scc_get_share_facebook(); ?></a>
</li>

<!– はてブボタン –>
<li class=”hatebu-btn”>
<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-bold fa-2x”></i>
<?php if(function_exists(‘scc_get_share_hatebu’)) echo (scc_get_share_hatebu()==0)?”:scc_get_share_hatebu(); ?></a>
</li>

<!– Google+1ボタン –>
<li class=”google-btn”>
<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;”><i class=”fa fa-google-plus fa-2x”></i><?php if(function_exists(‘scc_get_share_gplus’)) echo (scc_get_share_gplus()==0)?”:scc_get_share_gplus(); ?></a>
</li>
</div>

SNSボタンを、表示させたい場所に貼り付けます。もし、いらないSNSボタンがあれば削除しましょう。

twitterのコードの◯◯の部分は、Twitterのアカウントを、@なしで入力してください。   

rssとfeedlyのボタンを表示する場合

single.php

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title());
?>

<div class=”original-feed” style=”margin: 0 padding: 0;”>
<ul class=”original-feed”>

<!–RSSボタン–>
<li class=”rss-btn”>
<a href=”<?php echo home_url(); ?>/?feed=rss2″><i class=”fa fa-rss”></i>RSS</a></li>

<!–feedlyボタン–>
<li class=”feedly-btn”>
<a href=”http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2Fnekonotesou.net%2Ffeed%2F” target=”blank”><i class=”fa fa-rss”></i>feedly<?php if(function_exists(‘scc_get_follow_feedly’)) echo (scc_get_follow_feedly()==0)?”:scc_get_follow_feedly(); ?></a></li>
</ul>
</div>

feedlyのコードの「nekonotesou.net」は、自分のサイトのアドレスに変更してください。

さいごに

single.phpのコードが汚くなった。もっとスッキリと管理したい時は、新しいphpファイルを作成すると便利です。

まずは、任意の名前のphpファイルを作成して、そこにSNSボタンのコードを追加して保存します。

あとは、single.phpに以下のコードを追加するだけで、作成したファイルの内容を呼び出すことができます。

php

<?php get_template_part(‘ファイル名.php’); ? >

ABOUT ME
ねこのてそう
ねこのてそう
超記憶力の悪い、30代の引きこもり父さん。 死ぬまで楽しく生きるがモットー。 元2ちゃんねる管理人、現4chan管理人、ひろゆきが好き。 尊敬する人は、絵を描ける人とピアノを弾ける人。嫌いなものはタバコ。 日本嫌煙党 千葉(引きこもり代表)
関連記事

POSTED COMMENT

  1. ライトニング2014 より:

    ありがたく
    そのままコピペで使わせて頂きました!
    ありがとうございます

COMMENT

メールアドレスが公開されることはありません。