WordPressサイトにソーシャルメディアのアイコンを追加したいですか？適切なツールを使えば、ヘッダー、フッター、サイドバー、あるいはランディングページにフォローボタンを配置できます。Threads、Mastodon、Blueskyといった新しいプラットフォームにも対応しています。
このガイドでは、SeedProdを使った私のお気に入りの方法を含む3つの簡単な方法を紹介します。
なぜWordPressサイトにソーシャルメディア・アイコンを追加するのか？
ソーシャルメディアのアイコンは、訪問者が他のプラットフォームであなたをフォローするのを容易にします。人々は1日平均2時間21分をソーシャルメディアに費やしているため、アイコンを追加することで、彼らがすでに活動している場所にアクセスすることができます。
さらに、ソーシャルメディアのアイコンは小さいので、ウェブサイトのさまざまな場所に表示することができる：
- ワードプレスのメニュー
- ワードプレスのヘッダー
- ワードプレスのフッター
- ワードプレスのウィジェットエリア
- ワードプレスのページ/投稿
- WooCommerce製品
以下は、WPBeginnerがWordPressのサイドバーにソーシャルメディアリンクを表示する方法のスクリーンショットです。
ソーシャルメディアアイコンをサイトに追加する際、ソーシャルメディアフォローボタンはソーシャルシェアボタンやソーシャルシェアリングアイコンとは異なることを覚えておくと便利です。ユーザーにコンテンツの共有を求めるのではなく、訪問者にあなたのソーシャルメディア・プロフィールをフォローすることを促します。
WordPressにソーシャルメディアアイコンを追加する方法：3つの方法
このサイトではSeedProdを使っているので、それが私の定番です。ただし、最適な方法は環境によって異なります：
| お客様の環境 | 最適な方法 |
|---|---|
| ブロックテーマ（Twenty Twenty-Four、Kadence、Blocksy） | 方法 2: WordPress ソーシャルアイコンブロック |
| クラシックテーマ（Astra、GeneratePress、Divi、OceanWP） | 方法 3：ウィジェット |
| カスタムアイコンのブランドやランディングページへの掲載をご希望ですか | 方法 1：SeedProd |
1.SeedProdでWordPressソーシャルメディアアイコンを追加する
サイト上のどこにでもカスタムアイコンを追加する最も簡単な方法は、SeedProdを使用することです。
SeedProdは、コードを触ることなくヘッダー、フッター、サイドバー、ランディングページをデザインできるドラッグ＆ドロップ式のWordPressビルダーです。ソーシャルプロファイルブロックにより、Threads、Mastodon、Blueskyのような新しいプラットフォームを含む、あらゆるネットワークのアイコンを簡単に追加し、カスタマイズすることができます。
ステップ1.SeedProdのインストールとアクティベート
まず、SeedProdの価格ページにアクセスし、プランを選択し、アカウントを作成します。このガイドでは、高度な機能を持つSeedProd Proを使用します。
次に、アカウントダッシュボードにログインし、ダウンロードタブにアクセスします。そこからプラグインのzipファイルをダウンロードし、ライセンスキーをコピーすることができます。
WordPressの管理エリアに移動し、SeedProdプラグインをアップロードします。このステップで助けが必要な場合は、WordPressプラグインのインストールと有効化に関するこちらのガイドに従ってください。
プラグインを有効化したら、SeedProd " Settingsに行き、先ほどコピーしたライセンスキーを貼り付けます。Verify Keyボタンをクリックして設定を保存し、次のステップに進んでください。
ステップ2.WordPressテーマまたはランディングページを作成する
次のステップは、ランディングページまたはWordPressテーマのデザインを作成することですが、これはステップ1で選択したSeedProdライセンスによって異なります。
ベーシックとプラスのユーザーはSeedProdでランディングページを作成でき、プラスとエリートのユーザーはこのプラグインでランディングページと WordPressテーマを作成できます。
これらのチュートリアルの手順に従って、SeedProdデザインを構築してください：
ランディングページまたはWordPressテーマを作成したら、ステップ3に進み、WordPressのカスタムソーシャルメディアアイコンを追加します。
ステップ3.WordPressにカスタムソーシャルメディアアイコンを追加する
SeedProdは、その簡単で強力なテーマビルダーでWordPressのどこにでもカスタムソーシャルメディアアイコンを追加することができます。ウェブサイトキットを選択した後、各テーマパーツを開き、ソーシャルプロフィールブロックを追加するだけです。
WordPressのヘッダーにソーシャルメディアのアイコンを追加する
WordPressのメニューにソーシャル・プロフィールのアイコンを追加することから始めましょう。これを行うには、SeedProd " Theme Builderに行き、 Headerテンプレートにカーソルを合わせ、Edit Designボタンをクリックします。
次の画面では、このように2カラムのレイアウトが表示されます：
デフォルトでは、私たちが使用しているテンプレートは、ロゴとナビゲーションメニューを持つ2列のヘッダーを持っています。ソーシャル・プロフィールのアイコンを追加するには、3カラムのセクションに変更する必要があります。
まず、ヘッダーセクションにカーソルを合わせ、紫色のアウトラインが表示されるまでクリックします。 セクションの複製アイコンをクリックする。
新しいセクションで、青い枠がつくまで内容にカーソルを合わせ、ゴミ箱アイコンをクリックして削除する。
その後、3カラムレイアウトオプションをクリックして、新しいセクションに追加します。
次に、古いセクションの要素をドラッグ＆ドロップで新しいセクションに移動します。
完了したら、ソーシャル・プロフィールのアイコンを追加できる空の列が1つ残っているはずです。その前に、もう一度古いセクションにカーソルを合わせ、ゴミ箱アイコンをクリックして削除してください。
カスタムソーシャルプロフィールをヘッダーに追加するには、左側のサイドバーからソーシャルプロフィールブロックを見つけ、空のカラムにドラッグします。ブロックをクリックすると、カスタマイズオプションが表示されます。
デフォルトでは、ソーシャル・プロフィール・ブロックには、Facebook、Twitter、Instagram、YouTubeのアイコンが表示されます。各アイコンをクリックし、ドロップダウンメニューからソーシャルメディア・ネットワークを選択することで、アイコンを変更することができます。
選べるプラットフォームは以下の通り：
- ディスコード
- 電子メール
- フェイスブック
- フェイスブックメッセンジャー
- ギットハブ
- IMDB
- インスタグラム
- ミディアム
- 電話
- ピンタレスト
- RSS
- スラック
- スナップチャット
- サウンドクラウド
- テレグラム
- ティックトック
- ツイッター
- ヴィデオ
- 微博
- ワードプレス
- ユーチューブ
- カスタム
カスタムソーシャルメディアプロフィールボタンを追加するには、カスタムオプションと歯車アイコンをクリックして設定を開きます。
次に、Choose Iconオプションをクリックし、Font Awesomeを使用して、ソーシャルメディアのニーズに合った別のアイコンを検索します。例えば、Spotify、Skype、Tumblr、Behance、Airbnb、Audible、Playstationなどのカスタムソーシャルアイコンを追加できます。
カスタムソーシャルプロフィールアイコンを選択した後、アイコンの色を変更し、カスタムリンクを追加することができます。
設定パネルのさらに下には、アイコンのスタイル、サイズ、配置を変更するオプションがあります。
Templatesタブでは、1クリックでアイコンにカスタムスタイルを追加できます。
詳細設定]タブでは、アイコンのスタイルを細かいレベルでカスタマイズする設定ができます。例えば、アイコンの背景色、サイズ、スペース、シャドウ、マージン、パディングを変更できます。
また、ソーシャル・プロフィールのアイコンをモバイルやデスクトップ・デバイスに表示したり、非表示にしたりすることもでき、スマートフォンやタブレットを使用している訪問者のモバイル最適化を改善する優れた方法です。
変更を保存する前に、ソーシャル・プロフィール・ブロックにカーソルを合わせ、保存アイコンをクリックしてください。これにより、ソーシャルリンクやカスタムアイコンを手動で追加することなく、ウェブサイトの他のエリアで再利用することができます。
ポップアップウィンドウで、ブロックに「カスタムソーシャルアイコン」などの名前を付けて保存します。
WordPressのソーシャルメディア・アイコンが完成したら、画面右上の「保存」ボタンをクリックします。
では、ソーシャルメディアのアイコンをウェブサイトのフッターに追加しましょう。
WordPressのフッターにソーシャルメディアのアイコンを追加する
フッターにソーシャルアイコンを追加するには、SeedProdテーマビルダーダッシュボードに行き、フッターテンプレートにカーソルを合わせ、デザイン編集リンクをクリックします。
次に、左サイドバーのSaved Blocksを開き、最後のステップで保存したカスタムソーシャルアイコンブロックをフッターエリアのカラムにドラッグします。
WordPressのフッターとアイコンの背景色が似ている場合は、[詳細設定]タブをクリックし、カラーピッカーで新しいアイコンの色を選択できます。
すべてが適切に見えたら、Saveボタンをクリックして変更を保存します。
WordPressのサイドバーにソーシャルメディアのアイコンを追加する
WordPressのサイドバーにカスタムソーシャルアイコンを追加するには、テーマビルダーダッシュボードに戻り、サイドバーテンプレートにカーソルを合わせ、デザインの編集リンクをクリックします。
前の手順と同じことを繰り返し、終わったら「保存」ボタンをクリックします。
また、ランディングページやコンテンツページ（会社概要、サービス、お問い合わせページなど）も含め、ウェブサイト上のどのページでもこのプロセスを繰り返すことができます。
ステップ 4.変更を公開する
最後のステップは、新しいWordPressテーマを公開し、ウェブサイトの訪問者が新しいソーシャルメディア・プロフィールのアイコンを見ることができるようにすることです。そのためには、Theme Builderダッシュボードに行き、Enable SeedProd Themeトグルを「Yes」の位置にします。
これで変更点を確認することができます。以下はこのチュートリアルのいくつかの例です：
ヘッダー
フッター
サイドバー
2.WordPress内蔵のソーシャルアイコン・ブロックを使う
WordPress 5.4以降をご利用の場合、すでに「ソーシャルアイコン」ブロックをご利用いただけます。これはアイコンを追加する最も手軽な無料の方法であり、ブロックテーマとの相性が特に優れています。
まず、「外観」→「エディタ」に移動してサイトエディタを開くか、アイコンを表示したいページや投稿を開いてください。
ボタンをクリックし、「ソーシャルアイコン」を検索してブロックを挿入する。
ブロック内の＋追加アイコンをクリックします。Facebook、Instagram、LinkedIn、X（Twitter）などのビルトインネットワークのリストが表示されます。必要なものを選択してください。
各アイコンには、あなたのプロフィールURLを入力する欄があります。リンクを貼り付ければ、すぐに接続できます。
ヘッダーやフッターにアイコンを追加するには、「外観」→「エディタ」に移動し、テンプレートの「ヘッダー」または「フッター」セクションを選択してください。
「+」をクリックし、「ソーシャルアイコン」を検索して、希望の位置にブロックを追加してください。
「外観」→「エディタ」が表示されない場合は、クラシックテーマを使用しています。以下の方法3をご利用ください。
標準のブロックでは、主要なネットワークのほとんどをカバーしています。ランディングページの配置や高度なカスタムブランディングについては、SeedProd を使用することでより細かく制御できます。
3. クラシックなWordPressテーマにソーシャルメディアアイコンを追加する
クラシックテーマにはサイトエディタは搭載されていませんが、ウィジェット領域はサイドバーやフッターとして十分に活用できます。
「外観」＞「ウィジェット」に移動します。任意のウィジェット領域にある「+」をクリックし、「Social Icons」を検索して、ブロックを追加します。
「+ 追加」アイコンをクリックし、各ネットワークを選択して、プロフィールURLを貼り付けてください。「更新」をクリックして保存します。
一点注意：ウィジェットはサイドバーやフッター領域にアイコンを配置します。クラシックテーマでのヘッダーへの配置については、SeedProdのテーマビルダーがドラッグ＆ドロップエディタを通じて対応しています。
WordPressにソーシャルメディア・アイコンを追加する際のFAQ
この記事が、WordPressサイトにソーシャルメディアアイコンを追加する方法を知る一助となれば幸いです。
当ブログの他のお役立ちガイドも気に入っていただけるかもしれません：
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
