ブックマーク

ワードプレスにソーシャルボタンを設置することのできるプラグインはいくつかありますが、賢威7ならプラグイン無しで設置することができます^^

 

賢威7で設定するソーシャルボタンは重くないため表示スピードが格段に早いので、賢威7を使っているなら是非ともこの方法でソーシャルボタンを設置することをオススメします!

ついでに(と言ってはなんですが)オシャレにカスタマイズする方法も紹介します☆

 

賢威7を使ってない方はこちらのプラグインがオススメです。

WP Social Bookmarking Lightプラグインの使い方&設定方法!

 

賢威7でプラグインを使わずにソーシャルボタンをWordPressに設置する方法を動画で解説!

動画内で、「コードをコピー」する場面が2回出てきます。

1回めはこちらのコード↓をコピーしてください☆(全部で33行あります)

***環境によってコードが見えないこともあるので、ベタ打ちでもコードを載せます***

<div class=”sns-wrap”>
<?php
if( function_exists( “enqueue_font_awesome”) ):
add_action( ‘wp_enqueue_scripts’, ‘enqueue_font_awesome’ );
function enqueue_font_awesome() {
wp_enqueue_style( ‘font-awesome’, ‘//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css’ );
}
endif;
$url_encode = urlencode( get_permalink() );
$title_encode = urlencode( get_the_title() );
$twitter_account = ‘【Twitterのアカウント名】’;
?>
<ul class=”sns clearfix”>
<li class=”twitter”>
<a href=”http://twitter.com/intent/tweet?url=<?php echo $url_encode; ?>&text=<?php echo $title_encode . urlencode( ‘ | ‘ ); echo urlencode( get_bloginfo(‘name’)); ?>&via=<?php echo $twitter_account; ?>&tw_p=tweetbutton&related=”<?php echo $twitter_account; ?>” onclick=”javascript:window.open(this.href, ”, ‘menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600’);return false;”><i class=”fa fa-twitter”></i><span class=”pc”>ツイート</span></a>
</li>
<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=600,width=600’);return false;”><i class=”fa fa-facebook”></i><span class=”pc”>シェア</span><span class=”share-count”><?php if(function_exists(‘get_scc_facebook’)) { echo scc_get_share_facebook();}?></span></a>
</li>
<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=600’);return false;”><i class=”fa fa-google-plus”></i><span class=”pc”>Google+</span><span class=”share-count”><?php if(function_exists(‘get_scc_gplus’)) { echo scc_get_share_gplus();}?></span></a>
</li>
<li class=”hatebu”>
<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=600,width=600’);return false;”><span class=”hatena-icon”>B!</span><span class=”pc”>はてブ</span><span class=”share-count”><?php if(function_exists(‘get_scc_hatebu’)) { echo scc_get_share_hatebu();}?></span></a>
</li>
<li class=”pocket”>
<a class=”no-deco” target=”_blank” href=”http://getpocket.com/edit?url=<?php echo $url_encode; ?>&title=<?php echo $title_encode; ?>” onclick=”javascript:window.open(this.href, ”, ‘menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600’);return false;”><i class=”fa fa-get-pocket”></i><span class=”pc”>Pocket</span><span class=”share-count”><?php if(function_exists(‘scc_get_share_pocket’)) echo scc_get_share_pocket(); ?></span></a>
</li>
<li class=”feedly”>
<a href=”http://feedly.com/i/subscription/feed/<?php bloginfo(‘rss2_url’); ?>” rel=”nofollow” 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>

こちらのコード↑(33行あります)を全てコピー

 

2回めはこちらのコード↓(全部で92行あります)をコピーしてください☆

***環境によってコードが見えないこともあるので、ベタ打ちでもコードを載せます***

/* —————————————————-
SNSボタン
—————————————————–*/
.snswrap {
    width: 100%;
    margintop: 1em;
    marginbottom: 1%;
}
 
.sns {
    margin: 0 auto;
    liststyle: none;
}
 
.sns a {
    textdecoration: none;
    fontsize: 15px;
}
 
.sns {
    textalign: center;
}
 
.sns li {
    float: left;
    width: 32.3%;
    margin: 0 .5% 2%;
}
 
.sns a {
    position: relative;
    display: block;
    padding: 10px 5px;
    color: #fff;
    borderradius: 5px;
    textalign: center;
}
 
.sns span,
.sns .fa {
    marginright: .4em;
    color: #fff;
}
 
.sns li a:hover {
    webkittransform: translate3d(0px,5px,1px);
    moztransform: translate3d(0px,5px,1px);
    transform: translate3d(0px,5px,1px);
    boxshadow: none;
}
 
.sns .twitter a {
    background: #55acee;
    boxshadow: 0 5px 0 #0092ca;
}
 
.sns .facebook a {
    background: #315096;
    boxshadow: 0 5px 0 #2c4373;
}
 
.sns .googleplus a {
    background: #dd4b39;
    boxshadow: 0 5px 0 #ad3a2d;
}
 
.sns .hatebu a {
    background: #008fde;
    boxshadow: 0 5px 0 #016DA9;
}
 
.sns .pocket a {
    background: #f03e51;
    boxshadow: 0 5px 0 #c0392b;
}
 
.sns .feedly a {
    background: #87c040;
    boxshadow: 0 5px 0 #74a436;
}
 
@media only screen and ( maxwidth: 736px ) {
    .sns li {
        width: 32.3%;
        margin: 0 .5% 4%;
    }
    
    .sns a {
        fontsize: 13px;
        padding: 6px 3px;
    }
}
2回めはこちらのコード↑(全部で92行あります)をコピーしてください☆
 

賢威7でプラグインを使わずにソーシャルボタンをWordPressに設置する方法を画像で解説!

まずはシンプルなボタン(というかテキストリンク)を設置する

WordPressダッシュボードの

「外観」→「テーマの編集」を順にクリック。

 

画面右下の

ソーシャルボタンを賢威7で設置する方法

「social-button2.php」をクリック

すぐ上に2がついてない「social-button.php」がありますが、そちらではなく2のついた方をクリックしてください。

 


ソーシャルボタンを賢威7で設置する方法

枠の中のソースコードを全て選択 → カット(コピーではなく)し、メモ帳やワードパッドなどに貼り付けて保存しておくことをオススメします。

理由としては、完全にDeleteしてしまわずに保存しておくことで、万が一ソーシャルボタンを元に戻したい場合などに役立つからです。

枠の中が空っぽになったところで

こちらのコード↓(33行あります)を全てコピー

***環境によってコードが見えないこともあるので、ベタ打ちでもコードを載せます***

<div class=”sns-wrap”>
<?php
if( function_exists( “enqueue_font_awesome”) ):
add_action( ‘wp_enqueue_scripts’, ‘enqueue_font_awesome’ );
function enqueue_font_awesome() {
wp_enqueue_style( ‘font-awesome’, ‘//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css’ );
}
endif;
$url_encode = urlencode( get_permalink() );
$title_encode = urlencode( get_the_title() );
$twitter_account = ‘【Twitterのアカウント名】’;
?>
<ul class=”sns clearfix”>
<li class=”twitter”>
<a href=”http://twitter.com/intent/tweet?url=<?php echo $url_encode; ?>&text=<?php echo $title_encode . urlencode( ‘ | ‘ ); echo urlencode( get_bloginfo(‘name’)); ?>&via=<?php echo $twitter_account; ?>&tw_p=tweetbutton&related=”<?php echo $twitter_account; ?>” onclick=”javascript:window.open(this.href, ”, ‘menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600’);return false;”><i class=”fa fa-twitter”></i><span class=”pc”>ツイート</span></a>
</li>
<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=600,width=600’);return false;”><i class=”fa fa-facebook”></i><span class=”pc”>シェア</span><span class=”share-count”><?php if(function_exists(‘get_scc_facebook’)) { echo scc_get_share_facebook();}?></span></a>
</li>
<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=600’);return false;”><i class=”fa fa-google-plus”></i><span class=”pc”>Google+</span><span class=”share-count”><?php if(function_exists(‘get_scc_gplus’)) { echo scc_get_share_gplus();}?></span></a>
</li>
<li class=”hatebu”>
<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=600,width=600’);return false;”><span class=”hatena-icon”>B!</span><span class=”pc”>はてブ</span><span class=”share-count”><?php if(function_exists(‘get_scc_hatebu’)) { echo scc_get_share_hatebu();}?></span></a>
</li>
<li class=”pocket”>
<a class=”no-deco” target=”_blank” href=”http://getpocket.com/edit?url=<?php echo $url_encode; ?>&title=<?php echo $title_encode; ?>” onclick=”javascript:window.open(this.href, ”, ‘menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600’);return false;”><i class=”fa fa-get-pocket”></i><span class=”pc”>Pocket</span><span class=”share-count”><?php if(function_exists(‘scc_get_share_pocket’)) echo scc_get_share_pocket(); ?></span></a>
</li>
<li class=”feedly”>
<a href=”http://feedly.com/i/subscription/feed/<?php bloginfo(‘rss2_url’); ?>” rel=”nofollow” 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>

こちらのコード↑(33行あります)を全てコピー

空っぽの枠内にコピーしたコードをペースト

 

コードの上から11行目の’【Twitterのアカウント名】’というところに注目

ソーシャルボタンを賢威7で設置する方法

ここを自分のツイッターアカウントに変更!

 

念のため私のツイッターアカウント@Miki_gourmetで説明しますと

【Twitterのアカウント名】
の部分を
Miki_gourmet
に変更する

 

という手順です☆

 

続いてダッシュボードから

ソーシャルボタンを賢威7で設置する方法

「賢威の設定」→「SNSの設定」をクリック

 

ソーシャルボタンの表示のところの

ソーシャルボタンを賢威7で設置する方法

投稿ページの□表示しないのチェックを外す

 変更を保存  をクリック

 

これで、最もシンプルなソーシャルボタンを設置することが出来ました。

 

任意の記事をプレビューしてみると、このように↓

ソーシャルボタンを賢威7で設置する方法

ソーシャル拡散の「リンク」が出来上がっています。

この状態では、とてもボタンとは呼べないですね(^_^;)

かっこいいソーシャルボタンにカスタマイズする

Simple Custom CSSプラグインをインストールしていない方はプラグインをインストールして有効化してください☆

もしインストールしてあれば

ソーシャルボタンを賢威7で設置する方法

「外観」に「カスタムCSS」というメニューが表示されています。

 

有効化までを画像で解説したページはこちら→WordPressにプラグインをインストールし有効化する方法

 

ちなみに、検索をかけると似た名前のプラグインがこちら↓よりも上位に上がってきますが、間違えずにこのプラグインをインストールしてくださいね^^

ソーシャルボタンを賢威7で設置する方法

 

こちらのコード↓(92行あります)を全てコピー☆

***環境によってコードが見えないこともあるので、ベタ打ちでもコードを載せます***

/* —————————————————-
SNSボタン
—————————————————–*/
.snswrap {
    width: 100%;
    margintop: 1em;
    marginbottom: 1%;
}
 
.sns {
    margin: 0 auto;
    liststyle: none;
}
 
.sns a {
    textdecoration: none;
    fontsize: 15px;
}
 
.sns {
    textalign: center;
}
 
.sns li {
    float: left;
    width: 32.3%;
    margin: 0 .5% 2%;
}
 
.sns a {
    position: relative;
    display: block;
    padding: 10px 5px;
    color: #fff;
    borderradius: 5px;
    textalign: center;
}
 
.sns span,
.sns .fa {
    marginright: .4em;
    color: #fff;
}
 
.sns li a:hover {
    webkittransform: translate3d(0px,5px,1px);
    moztransform: translate3d(0px,5px,1px);
    transform: translate3d(0px,5px,1px);
    boxshadow: none;
}
 
.sns .twitter a {
    background: #55acee;
    boxshadow: 0 5px 0 #0092ca;
}
 
.sns .facebook a {
    background: #315096;
    boxshadow: 0 5px 0 #2c4373;
}
 
.sns .googleplus a {
    background: #dd4b39;
    boxshadow: 0 5px 0 #ad3a2d;
}
 
.sns .hatebu a {
    background: #008fde;
    boxshadow: 0 5px 0 #016DA9;
}
 
.sns .pocket a {
    background: #f03e51;
    boxshadow: 0 5px 0 #c0392b;
}
 
.sns .feedly a {
    background: #87c040;
    boxshadow: 0 5px 0 #74a436;
}
 
@media only screen and ( maxwidth: 736px ) {
    .sns li {
        width: 32.3%;
        margin: 0 .5% 4%;
    }
    
    .sns a {
        fontsize: 13px;
        padding: 6px 3px;
    }
}
2回めはこちらのコード↑(全部で92行あります)をコピーしてください☆

ソーシャルボタンを賢威7で設置する方法

「外観」→「カスタムCSS」をクリック

 

ソーシャルボタンを賢威7で設置する方法

枠内に、コードをペースト

「カスタムCSSの更新」をクリック

 

これで、ソーシャルボタンをかっこよくカスタマイズすることができました^^

 

任意の記事をプレビューしてみると

ソーシャルボタンを賢威7で設置する方法

こんな感じにボタンが出来上がっています☆

さいごに

ワードプレスにソーシャルボタンを設置することでSNS拡散が期待できます^^

 

賢威7で設定したボタンはプラグインで設定するボタンよりもサクサク表示されますし、かっこよくカスタマイズされていて訪問者の方が押したくなること間違い無しです^^