WordPressで作ったWEBサイトにテキストのソーシャルボタンを設置する方法

WordPressで作ったWEBサイトにテキストのソーシャルボタンを設置する方法を説明します。
SNS(ソーシャルネットワークサービス)で記事をシェアしてもらうためのボタンを設置すると、読者が記事をより簡単に共有できるようになります。
記事が拡散することで、より多くの方に読んでもらえるので、WEBサイトを作ったらぜひ設置しておきましょう!
SNSでのシェアの他に、「はてなブックマーク」や「LINEに送る」「Feedly(RSSリーダー)への登録」のボタンも設置しておくとより親切ですよね。
テキストだと画像より読み込みも早くて、ボタンのサイズを大きく出来るのでスマホでの押しやすさという点でも優れています。
正規のロゴマークに手を加えられない場合もテキストリンクなら大丈夫です。

作業に入る前に、バックアップを忘れずとりましょう!
また、この作業はローカル環境(XAMMPなど)で作成、テストしてから本番環境へアップロードすることをお勧めします。

ワードプレスで作ったサイトにフラットデザインのソーシャルボタンを設置する方法

ここでは子テーマのcontent.phpを編集する方法をご紹介します。使っているテーマによってファイル名が違うかもしれません。
記事を表示するファイルのことです。<div class=”entry-content”>のタグが目印になるかと思います。

この記事は、
『営業と集客のコツがみるみるわかるブログ!』
今どきのフラットなソーシャルボタンをWordPressに実装したのでソースコードを公開!
http://value-innovator.biz/marketing/buzzbutton/

を参考にさせていただきました!とても分かりやすかったです!
子テーマのcontent.phpを編集する方法以外を知りたい方は、ページ最下部の追記をご覧ください!

1.Font Awesomeの設定

ボタンに入れるテキストの横に Font Awesome のアイコンフォントを入れたいので、自分のWEBサイトでFont Awesomeが使えるように設定します。

子テーマのheader.phpの<head>~</head>に以下のコードを入れます。

これだけで、自分のWEBサイトでFont Awesomeが使えます。

FONT AWSOMEの公式サイト
http://fortawesome.github.io/Font-Awesome/

2.ボタンのHTMLタグを作成

子テーマのcontent.phpの<div class=”entry-content”>~<div><!–entry-contentのおわり–>のソーシャルボタンを設置したい位置にソーシャルボタンのHTMLを追加します。

文字コードはUTF-8で保存してください。SJISだとサイトにアップロードした時に文字化けして表示されます。

以下、各シェアボタンのHTMLです。
○○○にはCSS用のクラス名を入れて下さい。
<i></i>のタグはFont Awesomeの呼び出しタグです。

・FaceBookでシェア

○○○にはCSS用のクラス名を入れて下さい。

・Twitterでシェア

○○○にはCSS用のクラス名を入れて下さい。

・google+でシェア

○○○にはCSS用のクラス名を入れて下さい。

・Lineで送る

○○○にはCSS用のクラス名を入れて下さい。

・Pocketに保存

○○○にはCSS用のクラス名を入れて下さい。

・Feedlyに登録

○○○にはCSS用のクラス名を入れて下さい。
△△△には自分のサイトのfeedURLを入れて下さい。

feedURLの取得はhttp://berss.com/feed/Find.aspx
で簡単に出来ます。

3.ボタンのCSSを作成

子テーマのstyle.cssに追加します。

設置するボタンの分それぞれ作成してください。

○○○は1.で決めたCSS用のクラス名です。

参考までに、他のボタンで使っている背景色一覧です。

『twitter』
背景色

マウスオーバー時の背景の色
『pocket』
背景色

マウスオーバー時の背景の色
『はてなブログ』
背景色

マウスオーバー時の背景の色
『google+』
背景色

マウスオーバー時の背景の色
『feedly』
背景色

マウスオーバー時の背景の色
『LINE』
背景色

マウスオーバー時の背景の色

こんな感じに仕上がります。
フラットデザインシェアボタン

参考

こちらのサイトでは、ソーシャルボタンを別ファイルで作成してcontent.phpに呼び出す方法が書かれていてとても参考になりました。
『ドキドメ!』
ソーシャルボタンを自作してWordPressの高速化
http://dokidome.com/pege-speed/1178/

追記

シェアボタンはプラグインを使えば手軽に設置できます。

シンプルで設定も簡単な Simple Share Buttons がおすすめです。
https://simplesharebuttons.com/

当ブログでも記事の上方に使っています。

Simple Share Buttonsの設定方法はこちらのサイトでの説明がとても分かりやすかったです!
『WordPress神推しブログのネタワン』
Simple Share Buttons Adder – 8種類のシェアボタンを利用できるWordPressプラグイン
http://netaone.com/wp/simple-share-buttons-adder/

 Google+ B はてブ  LINE  Feedly

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください