公開日:2017年9月6日PlusersSNSでの拡散力は、ブログを運営していく上で無視できません。SNSでユーザーにシェアしてもらうことで、新しいユーザーを獲得できる機会も大きく増やすことができます。WordPressの中の記事やサイドバーにSNSボタンを設置して、ユーザーがSNSでシェアしやすいような導線作りをしておくことは必須と言っても過言ではないでしょう。今回は、WordPrssの記事の中やサイドバーにプラグインなしでSNSボタンを設置する方法をご紹介します。CONTENTS各SNSへのリンクをまとめたsns.phpを作成する記事の中にSNSボタンを出力するSNSボタンのデザインを整えるウィジェットにSNSボタンを追加するSNSボタンウィジェットのデザインを整える各SNSへのリンクをまとめたsns.phpを作成するまずはクリックやタップすることで、各SNSで簡単にシェアできるリンクをまとめたテンプレートをテーマ内に作成しましょう。手軽に呼び出すことができるように、『sns.php』というテンプレートをWordPressテーマ内に新たに作成します。※ウィジェット以外に設置する場合は、SNSボタンを追加したいテンプレートに直接記述しても問題ありません。今回は、『facebook』『twitter』『Google+』『はてなブックマーク』の4つのSNS共有ボタンを設置します。sns.phpまたはsnsボタンを追加する箇所に下記のソースコードを追加してください。</ul></div>個別に設定が必要なコードなどは特に入っていないので、そのままコピーしてsns.phpに貼り付けても問題ありません。共有先のSNS名(<span>SNS名</span>)で表示されるようになります。※アイコンを表示しているFontAwesomeを使用する設定をしていない場合は、Webアイコンを利用するための設定を行なってください。WordPressでFontAwesomeのWebフォントを自由に利用する方法sns.phpを作成しただけでは、サイト内にはボタンが表示されませんのでサイト内にsns.phpを出力するための設定を追加していきましょう。記事の中にSNSボタンを出力する記事の中にSNSボタンを出力するためには、single.phpのボタンを設置したい箇所にsns.phpを呼び出すためのコードを追加します。?>上記のsns.phpを呼び出すためのコードを記述することで、自分の好きな位置にSNSボタンを追加することができます。SNSボタンのデザインを整える各SNSへのリンクが出力されたら、レスポンシブデザインに対応したボタンになるようにCSSでデザインを整えていきましょう。下記にデモCSSを載せておきますので、自分好みにカスタムして使用してください。}}はてなブックマークのロゴは、FontAwesomeの中にアイコン設定されていないので似ているフォントで代用しアイコンをCSSで作成しています。none;』でSNS名を非表示にし、アイコンのみ表示されるようにしています。上記のCSSを反映すると、下の画像のようなデザインで表示されます。PC用表示スマートフォン用表示デザインの作成が完了したら、記事の中へのSNSボタンのは設置完了です。ウィジェットにSNSボタンを追加する記事へのSNSボタンが完成したら、WordPressのウィジェット機能でSNSボタンが設置できるように、新しくSNS用のウィジェットを作成しましょう。ウィジェットにSNSボタンの機能を追加するために、functions.phpでウィジェット用の関数を定義します。functions.phpを編集する際は、必ずバックアップをとって慎重に編集してください。$after_widget;}}register_widget('SNS');上記のコードでは、ウィジェット管理画面でタイトルを記入した場合は『<h4>』でタイトルが出力され、無記入の場合は何も表示しないように設定しています。?>』の部分を削除し、直接ソースコードを記述してください。上記の記述が完了したら、WordPressの管理画面のウィジェット設定画面に、SNSウィジェットが追加されるのでサイドバーなどに追加しましょう。ウィジェットを有効化すると、サイドバーにウィジェットが追加されます。SNSボタンウィジェットのデザインを整えるウィジェットエリアにSNSボタンが表示されたら、サイドバー用デザインを整えます。サイドバー用のSNSボタンのデザインは、スマホ用のデザインを流用すると簡単に調整できます。先程記述した、SNS用のCSSの下に追加してください。none;}CSSを反映するとの画像のように、サイドバーウィジェットにSNSボタンのデザインが反映されます。設置が終わったら、各ボタンをクリックして動作確認を行ってみてください。SNSボタンをクリックしたときに、自動で新しいウィンドウが開きいてSNSの共有画面が出力されれば問題ありません。※WordPressがローカル環境の場合は、エラーで確認できません!必ず本番環境で行ってください!!以上でSNSボタンの設置は完了です。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のディスクリプションの出力方法を変更しました。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のコードを修正しました。2019年9月21日WordPressテーマ作成の記事の内容をリニューアルしました。