WordPressサイトにソーシャルメディアアイコンを追加したいですか？適切なツールを使えば、Threads、Mastodon、Blueskyのような新しいプラットフォームでも、ヘッダー、フッター、サイドバー、ランディングページにフォローボタンを配置できます。
このガイドでは、SeedProdを使った私のお気に入りの方法を含む、3つの簡単な方法を紹介します。これにより、訪問者はオンラインでアクティブな場所にあなたを見つけてフォローできます。
WordPressサイトにソーシャルメディアアイコンを追加する理由
ソーシャルメディアアイコンがあると、訪問者は他のプラットフォームであなたを簡単にフォローできます。人々は1日に平均2時間21分をソーシャルメディアで過ごしているため、アイコンを追加することで、すでにアクティブな場所にリーチできます。
さらに、ソーシャルメディアアイコンは小さいため、ウェブサイトの多くの場所に表示できます。たとえば、次のとおりです。
- WordPressメニュー
- WordPressヘッダー
- WordPressフッター
- WordPressウィジェットエリア
- WordPressページ/投稿
- 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 » 設定に移動し、以前にコピーしたライセンスキーを貼り付けます。設定を保存するにはキーを確認ボタンをクリックしてから、次のステップに進みます。
ステップ2. WordPressテーマまたはランディングページの作成
次のステップは、ランディングページまたはWordPressテーマのデザインを作成することです。ただし、これはステップ1で選択したSeedProdライセンスによって異なります。
BasicおよびPlusユーザーはSeedProdでランディングページを構築でき、PlusおよびEliteユーザーはこのプラグインでランディングページおよびWordPressテーマを作成できます。
SeedProdデザインを構築するには、これらのチュートリアルの手順に従ってください。
ランディングページまたはWordPressテーマを作成した後、ステップ3に進んでカスタムWordPressソーシャルメディアアイコンを追加します。
ステップ3. WordPressにカスタムソーシャルメディアアイコンを追加する
SeedProdを使用すると、簡単で強力なテーマビルダーを使用して、WordPressのどこにでもカスタムソーシャルメディアアイコンを追加できます。ウェブサイトキットを選択した後、各テーマパートを開いてソーシャルプロファイルブロックを追加するだけです。
WordPressヘッダーにソーシャルメディアアイコンを追加する
まず、WordPressメニューにソーシャルプロファイルアイコンを追加しましょう。これを行うには、SeedProd » テーマビルダーに移動し、ヘッダーテンプレートにカーソルを合わせて、デザインを編集ボタンをクリックします。
次の画面では、次のような2列のレイアウトが表示されます。
デフォルトでは、使用しているテンプレートはロゴとナビゲーションメニューを備えた2列ヘッダーです。ソーシャルプロファイルアイコンを追加するには、3列セクションに変更する必要があります。
まず、ヘッダーセクションにカーソルを合わせて紫色の輪郭が表示されたら、セクションを複製アイコンをクリックします。
次に、新しいセクションで、コンテンツにカーソルを合わせて青い境界線が表示されたら、ゴミ箱アイコンをクリックして削除します。
その後、3列レイアウトオプションをクリックして、新しいセクションに追加します。
次に、ドラッグアンドドロップで古いセクションの要素を新しいセクションに移動します。
完了したら、ソーシャルプロフィールのアイコンを追加できる空の列が1つ残ります。それを行う前に、古いセクションをもう一度ホバーして、ゴミ箱アイコンをクリックして削除してください。
カスタムソーシャルプロフィールのアイコンをヘッダーに追加するには、左側のサイドバーにあるソーシャルプロファイルブロックを見つけて、空の列にドラッグします。これで、ブロックをクリックしてカスタマイズオプションを表示できます。
デフォルトでは、ソーシャルプロファイルブロックにはFacebook、Twitter、Instagram、YouTubeのアイコンが表示されます。各アイコンをクリックし、ドロップダウンメニューからソーシャルメディアネットワークを選択することで、アイコンを変更できます。
選択できるプラットフォームは次のとおりです。
- Discord
- Eメール
- Facebook Messenger
- GitHub
- IMDB
- 中
- 電話
- RSS
- Slack
- Snapchat
- SoundCloud
- テレグラム
- TikTok
- Vimeo
- WordPress
- YouTube
- カスタム
カスタムソーシャルメディアプロフィールのボタンを追加するには、カスタムオプションをクリックし、歯車アイコンをクリックして設定を開きます。
次に、アイコンを選択オプションをクリックし、Font Awesomeを使用して、ソーシャルメディアのニーズに合った別のアイコンを検索します。たとえば、Spotify、Skype、Tumblr、Behance、Airbnb、Audible、Playstationなどのカスタムソーシャルアイコンを追加できます。
カスタムソーシャルプロフィールのアイコンを選択した後、アイコンの色を変更し、カスタムリンクを追加できます。
設定パネルをさらに下にスクロールすると、アイコンのスタイル、サイズ、配置を変更するオプションがあります。
テンプレートタブでは、ワンクリックでアイコンにカスタムスタイルを追加できます。
高度な設定タブには、アイコンのスタイルを詳細レベルでカスタマイズするための設定があります。たとえば、アイコンの背景色、サイズ、間隔、影、余白、パディングを変更できます。
また、ソーシャルプロファイルアイコンをモバイルまたはデスクトップデバイスで表示または非表示にすることもできます。これは、スマートフォンやタブレットを使用している訪問者にとって、モバイル最適化を改善する優れた方法です。
変更を保存する前に、ソーシャルプロファイルブロックにカーソルを合わせて、保存アイコンをクリックします。これにより、各ソーシャルリンクとカスタムアイコンを手動で再度追加することなく、ウェブサイトの他の領域で再利用できます。
したがって、ポップアップウィンドウで、「カスタムソーシャルアイコン」のようなブロックに名前を付けて保存します。
WordPressのソーシャルメディアアイコンに満足したら、画面右上にある保存ボタンをクリックします。
次に、ソーシャルメディアアイコンをウェブサイトのフッターに追加しましょう。
WordPressフッターにソーシャルメディアアイコンを追加する
フッターにソーシャルアイコンを追加するには、SeedProdテーマビルダーダッシュボードに移動し、フッターテンプレートにカーソルを合わせて、デザインを編集リンクをクリックします。
次に、左側のサイドバーにある保存済みブロックの見出しを開き、前のステップで保存したカスタムソーシャルアイコンブロックをフッターエリアの列にドラッグします。
WordPressのフッターの背景色がアイコンの背景色と似ている場合は、高度な設定タブをクリックして、カラーピッカーで新しいアイコン色を選択できます。
すべてが適切に見えたら、保存ボタンをクリックして変更を保存します。
WordPressサイドバーにソーシャルメディアアイコンを追加する
WordPressサイドバーにカスタムソーシャルアイコンを追加するには、テーマビルダーダッシュボードに戻り、サイドバーテンプレートにカーソルを合わせて、デザインを編集リンクをクリックします。
次に、前のステップの指示を繰り返し、完了したら保存ボタンをクリックします。
このプロセスは、ランディングページや、会社概要、サービス、お問い合わせページなどのコンテンツページを含む、ウェブサイトの任意のページに対しても繰り返すことができます。
ステップ4.変更を公開する
最後のステップは、新しいWordPressテーマを発行して、ウェブサイトの訪問者が新しいソーシャルメディアプロファイルアイコンを見られるようにすることです。これを行うには、テーマビルダーダッシュボードに移動し、SeedProdテーマを有効にするトグルを「はい」の位置に切り替えます。
これで、変更を確認できます。このチュートリアルからの例をいくつか紹介します。
ヘッダー
フッター
サイドバー
2. WordPress組み込みのソーシャルアイコンブロックを使用する
WordPress 5.4以降を実行している場合、すでにソーシャルアイコンブロックにアクセスできます。これはアイコンを追加する最も速い無料の方法であり、ブロックテーマで最も効果的です。
まず、外観 » エディターに移動してサイトエディターを開くか、アイコンを追加したい任意のページまたは投稿を開きます。
+ボタンをクリックし、「ソーシャルアイコン」と検索してブロックを挿入します。
ブロック内の+ アイコンを追加をクリックします。Facebook、Instagram、LinkedIn、X（Twitter）などの組み込みネットワークのリストが表示されます。必要なものを選択してください。
各アイコンにはプロフィールURL用のフィールドがあります。リンクを貼り付けると、すぐに接続されます。
ヘッダーまたはフッターにアイコンを追加するには、外観 » エディターに移動し、テンプレートのヘッダーまたはフッターセクションを選択します。
+ をクリックし、「ソーシャルアイコン」を検索して、目的の場所にブロックを追加します。
外観 » エディターが表示されない場合は、クラシックテーマを使用しています。以下の方法3を使用してください。
ネイティブブロックはほとんどの主要ネットワークをカバーしています。ランディングページ配置や高度なカスタムブランディングについては、SeedProdを使用するとより多くの制御が可能です。
3. クラシックWordPressテーマにソーシャルメディアアイコンを追加する
クラシックテーマにはサイトエディターはありませんが、ウィジェットエリアはサイドバーやフッターによく機能します。
外観 » ウィジェットに移動します。任意のウィジェットエリアで+をクリックし、「ソーシャルアイコン」を検索してブロックを追加します。
+ アイコンを追加をクリックし、各ネットワークを選択してプロフィールURLを貼り付けます。更新をクリックして保存します。
注意点：ウィジェットはアイコンをサイドバーやフッターエリアに配置します。クラシックテーマでヘッダーに配置するには、SeedProdのテーマビルダーがドラッグアンドドロップエディターで対応します。
WordPressにソーシャルメディアアイコンを追加することに関するFAQ
この記事が、WordPressサイトにソーシャルメディアアイコンを追加する方法を学ぶのに役立ったことを願っています。
当社のブログからの他の役立つガイドもご覧ください。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
