《1/7まで》XServerで最大30%オフキャンペーン実施中!

WordPressにSNSアイコンを表示する4つの方法

WordPressにSNSアイコンを表示する4つの方法

当サイトはアフィリエイト広告を利用しています。

WordPressサイトにSNSアイコンを設置しておくと、SNSアカウントのフォロワー増加や記事の拡散につながりやすくなります。

そこで今回は、WordPressにSNSアイコンを表示する方法をご紹介します。

WordPressのヘッダーやフッターにフォロー用のSNSアイコンを表示する2つの方法

WordPressのヘッダーやフッターにフォロー用のSNSアイコンを表示する方法には、以下のようなものがあります。

  • ソーシャルアイコンブロックを使う
  • Webフォント「Font Awesome」を使う

方法1:ソーシャルアイコンブロックを使う

ウィジェットを使ってヘッダーやフッターにSNSアイコンを表示したい場合は、WordPressの標準ブロックである「ソーシャルアイコン」というブロックを使うと良いでしょう。

ソーシャルアイコンブロックを使ってSNSアイコンを表示するには、まずWordPress管理メニューの「外観」⇒「ウィジェット」をクリックします。

WordPressのウィジェット画面を開く

ウィジェット画面が表示されたら、SNSアイコンを表示したい場所のウィジェット(例:フッター左)を開いて「+」をクリックし、「ソーシャルアイコン」で検索して表示されたブロックをクリックします。

WordPressのウィジェット画面でソーシャルアイコンブロックを追加する

ウィジェットにソーシャルアイコンブロックが追加されたら、「+」をクリックして表示したいSNS名(例:X)で検索し、当該ブロックをクリックします。

ソーシャルアイコンブロック内にXブロックを追加する

SNSアイコンをクリックし、入力ボックスに自分のSNSアカウントページのURLを入力して矢印をクリックします。

XブロックにURLを設定する

ほかにも表示したいSNSアイコンがあれば「+」から追加し、設定が完了したら「更新」をクリックします。

WordPressのウィジェット画面での設定を更新する

これでソーシャルアイコンブロックを追加したウィジェットの場所(例:フッター左)にフォロー用のSNSアイコンが表示されます。

フッター左ウィジェットにソーシャルアイコンブロックを追加した結果

SNSアイコンの細かい設定は、ソーシャルブロックアイコンの設定サイドバーの「設定」タブや「スタイル」タブからおこなえます。

ソーシャルアイコンブロックの設定タブ
ソーシャルアイコンブロックのスタイルタブ

なお、検索しても表示されないSNSは「Link」というブロックを使うことで表示できます。アイコンは汎用的なチェーンですが、CSSをカスタマイズすることで任意のアイコンに変更することも可能です。

ソーシャルアイコンブロックのLinkブロック

方法2:Webフォント「Font Awesome」を使う

メニューを使ってヘッダーやフッターにSNSアイコンを表示したい場合は、「Font Awesome」というWebフォントを使う方法がおすすめです。

Font Awesomeを使ってSNSアイコンを表示するには、まずFont Awesomeを使える状態にするためプラグイン「Font Awesome」をインストール・有効化します。すでにFont Awesomeが使える状態の場合は不要です。

プラグインをインストール・有効化したら、WordPress管理メニューの「設定」⇒「Font Awesome」をクリックします。

WordPressのFont Awesome画面を開く

Font Awesomeの設定画面が表示されたら、以下のように設定して「Save Changes」をクリックします。

WordPressのFont Awesome画面で基本設定をおこなう
How are you using Font Awesome?Use CDN(CDNで利用する)
IconsFree(無料のアイコンを利用する)
TechnologyWeb Font(Unicodeでアイコンを指定する)
Versionlatest(最新バージョンのアイコンを利用する)
Older Version CompatibilityOff(旧バージョンのアイコンを利用するためのフォント読み込みを停止する)

設定が完了したら、WordPress管理メニューの「外観」⇒「メニュー」をクリックします。

WordPressのメニュー画面を開く

メニュー画面が表示されたら、「新しいメニューを作成しましょう」をクリックします。

WordPressのメニュー画面で新しいメニューを作成する

メニュー名(例:ヘッダーメニュー)を入力し、メニューの位置(例:グローバルナビゲーション)にチェックを付け、「メニューを作成」をクリックします。

ヘッダーメニューを作成する

「カスタムリンク」を開き、「URL」に自分のSNSアカウントページのURLを、「リンク文字列」にFont AwesomeにあるSNSアイコンのiタグを入力し、「メニューに追加」をクリックします。

カスタムリンクをメニューに追加する

SNSアイコンのiタグを入力するには、まずFont AwesomeにてSNS名(例:X)で検索し、当該アイコンをクリックします。

Font AwesomeでXのアイコンを探す

すると「HTML」タブにiタグが表示されるので、このタグをクリックします。これでiタグがコピーされるので、WordPress管理画面に戻って「リンク文字列」の部分に貼り付けましょう。

iタグをクリックしてコピーする

ほかにも表示したいSNSアイコンがあれば同様の手順でメニューに追加し、設定が完了したら「メニューを保存」をクリックします。

メニューを保存する

これで設定したメニューの位置(例:グローバルナビゲーション)にフォロー用のSNSアイコンが表示されます。

ヘッダーメニューにFont AwesomeでSNSアイコンを追加した結果
MEMO

無料テーマ「yStandard」の場合は下線が表示されますが、style.cssに以下のコードを追加することで下線を非表示にできます。

.global-nav__menu > .menu-item > a::after {
  background-color: transparent !important;
}

WordPressの記事内にシェア用のSNSアイコンを表示する2つの方法

WordPressの記事内にシェア用のSNSアイコンを表示する方法には、以下のようなものがあります。

  • SNSのシェアボタンが表示されるテーマを使う
  • プラグイン「AddToAny Share Buttons」を使う

方法1:SNSのシェアボタンが表示されるテーマを使う

テーマによっては特に設定をおこなわなくても自動で記事内にシェアボタンが表示されるようになっています。ちなみに当サイトが利用しているテーマ「SANGO」は、「X」「Facebook」「はてなブックマーク」「LINE」のシェアボタンが表示されるようになっています。

方法2:プラグイン「AddToAny Share Buttons」を使う

SNSのシェアボタンは、以下のようなプラグインを使って表示することもできます。

  • AddToAny Share Buttons
  • WeShare Buttons
  • Professional Social Sharing Buttons, Icons & Related Posts – Shareaholic

今回は例として「AddToAny Share Buttons」を使ったシェアボタンの表示方法をご紹介します。AddToAny Share Buttonsを使うと、以下のようなデザインのシェアボタンを表示することができます。

まずは「AddToAny Share Buttons」をインストール・有効化します。

プラグインをインストール・有効化したら、WordPress管理メニューの「設定」⇒「AddToAny」をクリックします。

WordPressのAddToAny画面を開く

AddToAny 共有設定画面が表示されたら、「標準」タブでSNSアイコンのスタイルや表示するSNSアイコンについて設定をおこないます。

「アイコンスタイル」では、SNSアイコンのサイズ、背景色、アイコンの色を設定します。ここはデフォルトのままで良いでしょう。

AddToAny Share Buttonsのアイコンスタイルの設定をおこなう

「シェアボタン」では、「サービスの追加/削除」から表示したいSNSアイコンの選択・解除ができます。多くても5~6個程度が良いでしょう。

AddToAny Share Buttonsのシェアボタンの設定をおこなう
AddToAny Share Buttonsのシェアボタンの設定をおこなう

「ユニバーサルボタン」では、複数のSNSアイコンを格納できるユニバーサルボタン(「+」アイコン)の設定をおこないます。ユニバーサルボタンを非表示にしたい場合は「なし」を選択しましょう。

AddToAny Share Buttonsのユニバーサルボタンの設定をおこなう
AddToAny Share Buttonsのユニバーサルボタンの設定をおこなう

「シェア・ヘッダー」では、SNSボタンの上に表示する文言の設定をおこないます。

AddToAny Share Buttonsのシェア・ヘッダーの設定をおこなう
AddToAny Share Buttonsのシェア・ヘッダーの設定をおこなう

「ブックマークボタンの場所」では、SNSアイコンを表示する場所の設定をおこないます。「投稿の下部にボタンを表示」にのみチェックを付けると、記事の最下部にシェアボタンが表示されます。

AddToAny Share Buttonsのブックマークボタンの場所の設定をおこなう

「追加JavaScript」「追加CSS」「追加オプション」は設定不要です。設定が完了したら「変更を保存」をクリックしましょう。

AddToAny Share Buttonsの設定を保存する

これで記事内にシェアボタンが表示されます。

AddToAny Share Buttonsでシェアボタンを設定した結果

なお、「フロート」タブでは画面のサイドに固定されるタイプのシェアボタンの設定が可能です。ここでは設定方法は割愛します。

WordPressにLINE公式アカウントの友だち追加ボタンを表示する方法

WordPressにLINE公式アカウントの友だち追加ボタンを表示したい場合は、LINEヤフー for Businessにて友だち追加ボタン表示用のコードをコピーし、ボタンを表示したい場所にそのコードを貼り付けます。具体的な手順は以下のとおりです。

  1. LINEヤフー for Businessにアクセスする
  2. LINE公式アカウントの管理画面にログインする
  3. 「友だち追加ガイド」をクリックする
  4. 「ボタンを作成」をクリックする
  5. 「コピー」をクリックする
  6. カスタムHTMLブロックなどにコードを貼り付ける

まとめ

今回は、WordPressにSNSアイコンを表示する方法をご紹介しました。

ヘッダーやフッターにフォロー用のSNSアイコンを表示したい場合は、ソーシャルアイコンブロックやFont Awesomeを使うと良いでしょう。LINE公式アカウントの友だち追加ボタンについては、LINE公式アカウントの管理画面にあるコードをコピペすることで表示できますよ。

記事内にシェア用のSNSアイコンを表示したい場合は、自動で表示されるようになっているテーマを使うか、AddToAny Share Buttonsなどのプラグインを使ってみてくださいね。