プラグインなし!ソーシャルボタンを設置する方法 | WordPress カスタマイズ

プラグインなし!ソーシャルボタンを設置する方法 | WordPress カスタマイズのイメージ

プラグインを使用しないでソーシャルボタンをWordPressに設置する方法についてのメモです。Twitterやfacebookなど、ひとつひとつ設定してコードを取得するのが大変なので、ひとくくりにして単純にコピペで使えるようにしました。このサイトについてるソーシャルボタンのようにオーソドックスな仕上がりになっています(2015/05月時点)。
【 環境 】WordPress : Twenty Fourteen

スポンサーリンク

function.phpに追記しよう!

やることとしては、上にある目次のような内容になってます。
まずfunction.php(子テーマ)ファイルに下記を追加します。

// ソーシャルボタン(Vertical)
function SocialButtonVertical()
{ ?>
<ul>
    <li>
        <div class="fb-like" data-href="<?php the_permalink(); ?>" data-width="100" data-layout="button_count" data-show-faces="false" data-send="false">&nbsp;
        </div>
    </li>
    <li>
        <a href="https://twitter.com/share" data-count="horizontal" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-lang="en">&nbsp;</a>
    </li>
    <li>
        <div class="wsbl_hatena_button"><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="standard" title="はてなブックマークに追加"> <img src="//b.hatena.ne.jp/images/entry-button/button-only@2x.png" alt="はてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
        </div>
    </li>
    <li>
        <div class="g-plusone" data-size="medium" data-href="<?php the_permalink(); ?>">&nbsp;
        </div>
    </li>
</ul>
<?php }

※functions.phpファイルの扱いにはバックアップをとって、十分にご注意ください。詳細については「WordPress functions.php 子テーマ作成~編集、追記方法について エラーを防ぐ!|WP カスタマイズ」をご参考に。

もしWordPressを絶対リンクではなく意図的に相対リンクにしている場合は、Tweetボタンのバルーンが表示されずキチンと機能しません。
6行目のリンク
data-url="<?php the_permalink(); ?>"
を↓
data-url="http://example.com<?php the_permalink(); ?>"
のようにURLを追加しておくことで、不具合を防ぐことができます。
※WordPressが絶対リンクの場合は何もしないで大丈夫です。

content.phpに追記しよう!

content.php(子テーマ)のソーシャルボタンを配置したい場所、例えばTwenty Fourteenの記事下に挿入する場合は…

) );
		?>
	</div><!-- .entry-content -->
	<?php endif; ?>

	<?php the_tags( '<footer class="entry-meta"><span class="tag-links">', '', '</span></footer>' ); ?>
</article><!-- #post-## -->

46行目と47行目の間に下記のコードを挿入して、function.phpのコードを呼び出します。

参考サイト:プラグインを使わずソーシャルボタンを設置する方法

footer.phpに追記しよう!

footer.php(子テーマ)ファイルの</body>タグのすぐ上に下記を追加してJava Scriptを読み込みます。


ソーシャルボタンのJavaScriptはページの読み込み時間を高速にする為に、「非同期読み込み」が可能です。
FacebookやGoogle+1では、非同期の読み込み方法が推奨されているようです。
例えばFacebookやTwitterの場合、js.async = true; を追加、はてなとgoogle+1は、async=”async”を追加することで非同期化します。

style.cssに追記しよう!

各ソーシャルボタンの配置などのレイアウトはstyle.cssに追記して調整します。
下記はご参考まで。幅やマージンなどはブログなどのデザインに合うように編集してください。

/*social button******************/
.scl_btn {
    max-width:652px;
    margin:0 30px;
    padding:8px 0 5px 0 !important;
    border-top:1px dashed #ddd;
    border-bottom:1px dashed #ddd;
}
.scl_btn ul {
    list-style-type:none;
    margin-left:0px;
}
.scl_btn li {
    float:left;
    margin-right:10px;
}

.fb_iframe_widget span {
    vertical-align: baseline !important;
    margin-left:0 !important; 
}

ひとこと

ソーシャルボタンの設置については新旧いろいろな方法があって、どうしたものかと混乱した結果、コピペですぐできる方法を備忘録として残すことにしました。

自分の場合は「すぐ貼ってCSSで整えて完成!」が理想なので、各ソーシャルボタンのバルーンの位置など、表示するデザインにあきた場合は、またひとつひとつ設定することになると思います。

あと、メンテナンスは自分ですることになるので、Facebook などの仕様変更の情報はキャッチできるようにして対応します。

  • スポンサーリンク
  •  

関連記事

コメントを残す

メールアドレスが公開されることはありません。名前・コメント・画像認証が必須となっています。


*