WordPressサイドバーにソーシャルメディアアイコンを追加する方法

新しいWordPressウェブサイトを作成する際、常に忘れないことの一つがソーシャルメディアアイコンの追加です。ウェブサイト自体を超えて、オーディエンスとつながるための、シンプルでありながら強力な方法です。

サイトにソーシャルアイコンを追加することは、訪問者にとってパンくずリストを残すようなものです。これにより、訪問者はあなたのソーシャルメディアの存在を知ることができ、さまざまなプラットフォームであなたを簡単にフォローできるようになります。

この記事では、WordPressのサイドバーにソーシャルメディアアイコンを追加する方法を説明します。

WordPressサイドバーにソーシャルメディアアイコンを追加する理由

WordPressのサイドバーは、ウェブサイトのメインコンテンツの一部ではない領域です。最近のブログ投稿やソーシャルプロフィールへのリンクなど、読者が興味を持つ可能性のある追加情報を表示できます。

WordPressのサイドバーにソーシャルリンクを追加することは、ユーザーにソーシャルメディアアカウントについて伝える良い方法です。その結果、ユーザーはそれらをチェックしたり、フォローしたりして、ソーシャルメディアのフォロワーを増やすのに役立ちます。

さらに、ソーシャルメディアアカウントを表示することは、信頼感を築き、ソーシャルプルーフとして機能します。訪問者があなたがアクティブなソーシャルメディアプレゼンスを持っていることを見ると、あなたのeコマースまたはビジネスサイトが信頼できることを示しています。

WPBeginnerのように、多くの人気のWordPressブログはサイドバーにソーシャルメディアアイコンを表示しています。

というわけで、WordPressウェブサイトのサイドバーにソーシャルメディアフォローアイコンを追加する方法を見ていきましょう。

使用すべき方法は、使用しているWordPressテーマとエディターによって異なります。特定のセクションにスキップしたい場合は、これらのクイックリンクを使用できます。

• 方法1：フルサイトエディター（ブロックテーマ）でソーシャルアイコンを追加する
• 方法2：WordPressウィジェット（クラシックテーマ）でソーシャルメディアアイコンを追加する
• 方法3：SeedProd（カスタムテーマ）でカスタムソーシャルメディアアイコンを追加する
• ボーナスのヒント：WordPressサイトにソーシャルメディアプロフィールを埋め込む

方法1：フルサイトエディター（ブロックテーマ）でソーシャルアイコンを追加する

ブロックテーマユーザーの場合は、ソーシャルアイコンブロックを使用してWordPressサイドバーにソーシャルメディアボタンを追加できます。

使用しているテーマによってプロセスが異なることに注意してください。一部のブロックテーマにはデフォルトでサイドバーが含まれており、そこにソーシャルアイコンブロックを追加できます。サイドバーのように機能するヘッダーパターンが含まれている場合や、サイドバーが全くない場合もあります。

この例では、デフォルトでサイドバーテンプレートパーツが含まれているデフォルトのWordPressブロックテーマを使用します。

まず、WordPress管理画面の外観 » エディターに移動します。

次に、「パターン」を選択する必要があります。

これにより、ヘッダー、フッター、サイドバーなどのテーマのテンプレートパーツを編集できるページに移動します。

ここで、「すべてのテンプレートパーツ」を選択します。

サイドバーテンプレートパーツを見つけ、3点ボタンをクリックし、「編集」を選択します。これにより、WordPressエディターが開きます。

テーマのデフォルトのサイドバーテンプレートパーツが表示されます。ここでは、通常、直線のようなシェイプディバイダーでサイドバーのさまざまな部分が区切られています。

例えば、著者紹介の下にソーシャルメディアアイコンを追加したいとします。この場合、ページ左側の「リスト表示」ボタンをクリックし、著者紹介要素のグループのすぐ下にある「区切り線」ブロックを選択します。

3点メニューをクリックし、「後に追加」を選択します。

次に、ページ上の任意の場所にある「+」ボタンをクリックします。

次に、「グループ」ブロックを選択します。

この段階で、グループブロックのレイアウトを選択できます。

シンプルに保つので、最初のオプションで進めます。

ソーシャルメディアアイコンの上に表示されるコールトゥアクションのコピーを追加しましょう。

これを行うには、グループブロック内の「+」ボタンをクリックして、「段落」ブロックを選択するだけです。

ここで、行動喚起のテキストを挿入できます。

「ソーシャルメディアでフォローしてください」など、好きなテキストにできます。

完了したら、再度「+」ボタンをクリックして「ソーシャルアイコン」ブロックを見つけます。

これで、ブロックにソーシャルメディアプラットフォームを追加し始めることができます。「+」ボタンをもう一度クリックして、ソーシャルメディアボタンを1つずつ追加してください。

検索機能を使用して、すべてのソーシャルネットワークオプションを自由に閲覧してください。

すべてのボタンを追加したら、ソーシャルプロフィールへのカスタムリンクの追加を開始できます。

ソーシャルアイコンをクリックしてプロフィールURLを入力するだけです。

この段階で、アイコンの外観をカスタマイズできます。

ボタンのサイズが大きすぎたり小さすぎたりする場合は、ブロックツールバーの「サイズ」オプションを使用できます。

左側のブロック設定では、アイコンの配置、向き、リンク設定、ラベルをカスタマイズできます。

リンクは新しいタブで開くようにすることをお勧めします。これにより、ユーザーはソーシャルプロフィールにアクセスするためにあなたのウェブサイトを離れる必要がなくなります。

ブロックスタイルタブに切り替えると、アイコンのスタイルや、WordPressウェブサイトのデザインに合わせて色を変更できます。

好みに応じて、すべてのアイコンを異なる色にしたり、同じ色にしたりできます。以下はその例です。

同じタブを下にスクロールすると、ブロックのマージンとスペーシングをカスタマイズするための寸法設定が見つかります。

これらの設定は、ソーシャルアイコンブロックとサイドバーの他のブロック間の間隔を調整したい場合に役立ちます。

また、ソーシャルアイコンブロックの上に行動喚起テキストを追加して、ボタンがどこにあるかを強調し、ユーザーをフォロワーまたは購読者になるように促すことも良い考えです。

これを行うには、「+」ボタンを使用して段落ブロックを追加してください。ソーシャルアイコンの上に配置されていることを確認してください。

使用できるコールトゥアクションの例としては、「フォローする」、「X人以上の読者に参加する」、または「最新情報を入手する」などがあります。

まだ行っていない場合は、サイドバーに注目の投稿や最近のコメントなどの要素を追加することもできます。

次に、ページ右上にある「保存」ボタンをクリックするだけです。

これらの変更がページや投稿に反映されない場合は、それらのいずれもサイドバーテンプレートパーツを使用していない可能性が最も高いです。

希望するページがサイドバーを持つページテンプレートを使用していることを確認するには、フルサイトエディターのメインメニューに戻ることができます。次に、「ページ」を選択します。

次に、サイドバーを表示したいページを選択し、鉛筆の「編集」ボタンをクリックします。

例として、サンプルページでサイドバー付きのページテンプレートを使用します。

この段階で、右上隅にある黒い「設定」アイコンをクリックできます。

次に、「Pages」をクリックし、「Swap template」を選択します。

テーマが提供するいくつかのページテンプレートがあります。

ここで、先ほど編集したサイドバーのあるものを選択してください。

完了したら、通常通り「保存」をクリックするだけです。

WordPressウェブサイトにアクセスすると、いくつかのソーシャルリンクが表示されたサイドバーが表示されるはずです。

方法2：WordPressウィジェット（クラシックテーマ）でソーシャルメディアアイコンを追加する

次の方法は、ウィジェット対応のサイドバーエリアを持つクラシックWordPressテーマを使用しているユーザー向けです。

サイドバーにソーシャルメディアボタンを追加するには、WordPressダッシュボードから外観 » ウィジェットに移動するだけです。

次に、ソーシャルアイコンウィジェットを追加したいWordPressウィジェットエリアに移動します。この例では「サイドバー」を選択しますが、使用しているテーマによって名前が異なる場合があります。

次に、左上にある「ウィジェット」の隣の「+」ボタンをクリックします。

ここで、ソーシャルアイコンブロックを探すことができます。

その後、このサイドバーウィジェットをクリックするか、編集エリアのどこかにドラッグアンドドロップする必要があります。

一般的に、ソーシャルネットワークアイコンはウィジェットエリアの上部近くに追加するのが最適です。これにより、訪問者がページにアクセスした瞬間に注意を引くことができます。

次に、前の方法と同様に、「+」ボタンをクリックして、ソーシャルメディアボタンをウィジェットに1つずつ追加できます。

以下の例では、検索ブロックの下にソーシャルアイコンブロックを配置しました。WhatsAppアイコンも追加しています。

この時点で、ソーシャルリンクの追加を開始できます。

WhatsAppの場合、「wa.me/」と入力し、その後にWhatsApp番号を記述します。+記号を使用する必要はありませんが、このスクリーンショットのように、国コードを追加してください。

右側のパネルには、ブロック設定とスタイルオプションも表示されます。

これらのオプションを開くには、右上隅にある「設定」アイコンをクリックします。

さらに、コールトゥアクションテキストのために、ソーシャルメディアウィジェットの上に段落ブロックを追加することも自由にできます。

段落ブロックとソーシャルアイコンブロックをグループ化することをお勧めします。これにより、サイドバーで分離して見えなくなります。

これを行うには、段落とソーシャルアイコンを一緒に選択します。その後、ブロックツールバーの「変換」アイコンをクリックし、「グループ」を選択します。

完了したら、「更新」ボタンをクリックして、すべてのサイドバーで変更を正式に適用してください。

最終結果は次のようになります。

方法3：SeedProd（カスタムテーマ）でカスタムソーシャルメディアアイコンを追加する

SeedProdを使用すると、サイドバーのソーシャルメディアボタンの外観をより細かく制御できます。たとえば、WordPressにアイコンがないソーシャルメディアプラットフォームを使用している場合、自分でボタンを作成できます。

さらに、モバイルデバイス専用にアイコンの間隔を調整することもできます。

SeedProd を初めて使用し、使用したい場合は、まずプラグインをインストールして有効化する必要があります。ソーシャルプロファイル機能にアクセスするには、Pro バージョンが必要です。

プラグインのインストール方法については、WordPressプラグインのインストール方法のガイドをご覧ください。

次に、このチュートリアルに従って、SeedProdでテーマをセットアップできます。

サイドバーにソーシャルアイコンを追加するには、SeedProd » Theme Builder に移動する必要があります。次に、「Sidebar」テンプレートにカーソルを合わせ、「Edit Design」をクリックします。

これでSeedProdページビルダーに入りました。ソーシャルプロファイルブロックは、デフォルトでテーマテンプレートに追加されているはずです。

もしまだ表示されていない場合は、左側のパネルにある検索バーを使用して「ソーシャルプロフィール」と入力してください。その後、ブロックを好きな場所にドラッグアンドドロップするだけです。

ボタンの上にテキストブロックを追加して、コールトゥアクションのテキストを書き込むことを忘れないでください。

このように、訪問者の注意をサイドバーのソーシャルメディアボタンに向けさせることができます。

ソーシャルメディアプロフィールのアイコンの外観をカスタマイズするには、[ソーシャルプロフィール]要素をクリックするだけです。ここでは、ボタンをカスタマイズするためのさまざまなタブが表示されます。

「コンテンツ」タブでは、アイコンを追加したり、アイコンのスタイル、サイズ、配置を変更したりできます。

InstagramやFacebookなどの標準オプションに加えて、SeedProdにはSlack、Telegram、Githubなどのボタンもあります。

SeedProdにデフォルトで用意されていない新しいソーシャルメディアアイコンを追加するには、「+ 新規共有を追加」ボタンをクリックする必要があります。

その後、ドロップダウンメニューから「カスタム」を選択します。

ボタンを編集するには、矢印ボタンの隣にある歯車の設定記号をクリックしてください。

それが完了したら、「アイコンを選択」をクリックしてください。

次に、アイコンライブラリにリダイレクトされます。ここでは、Font Awesomeアイコンのおかげで、何百ものブランドアイコンから選択できます。

この例ではAirbnbを使用します。ただし、LinkedInやTumblrなどのプラットフォームにも他の選択肢があります。

アイコンを選択したら、色を調整してソーシャルメディアページへのリンクを追加できます。

ここでは、Airbnbのブランドカラーを使用することにしました。ソーシャルアカウントのリンクを挿入する際は、「https://」を含めるようにしてください。

次は「テンプレート」タブです。

このタブに切り替えると、アイコンのデザインを調整できます。お好みで、より正方形、円形、または単色にすることができます。

最後に、「高度」タブでは、ソーシャルメディアボタンをカスタマイズするためのさらなる方法が提供されます。

スタイルセクションでは、アイコンのスタイル、色、サイズ、間隔、影の効果を変更できます。

スペーシングでは、ブロックのマージンとパディングを編集できます。SeedProdの素晴らしい点は、デスクトップとモバイルデバイスでマージンとパディングを別々に設定できることです。

マージンとパディングを編集するには、デバイスアイコンのいずれかを選択し、次のようにマージンとパディングの測定値を挿入します。

下にスクロールすると、デバイスの表示設定とアニメーション効果が見つかります。

最初の設定では、デスクトップまたはモバイルでブロックを非表示にすることを選択できます。これは、ウェブサイトの別の場所でソーシャルプロファイルブロックを使用することを選択し、重複するソーシャルプロファイルアイコンを避けたい場合に必要になることがあります。

アニメーション効果を使用すると、アイコンがウェブページに読み込まれる際のブロックのアニメーションスタイルを選択できます。この効果は、訪問者をメインコンテンツからあまり気を散らしたくない場合に必要ありません。

ソーシャルプロフィールブロックをお好みに合わせて設定したら、右上隅にある[保存]ボタンをクリックするだけです。

または、「プレビュー」ボタンをクリックして、サイドバーの外観を先に確認してください。

これで完了です！SeedProdを使用してソーシャルプロフィールのブロックを正常に追加しました。

最終結果は次のようになるかもしれません：

ボーナスヒント：WordPressサイトにソーシャルメディアプロフィールを埋め込む

サイドバーにソーシャルメディアアイコンを追加することは、フォロワー数を増やし、ソーシャルプルーフを表示するための素晴らしい第一歩です。とはいえ、WordPressサイトにソーシャルメディアフィードを直接埋め込むことも検討できます。

これにより、訪問者はあなたの最新のコンテンツを確認し、ウェブサイト上で直接エンゲージできるようになり、ブランド認知度とエンゲージメントを高める可能性があります。

WordPressにソーシャルメディアフィードを埋め込む最も簡単な方法は、Smash Balloonを使用することです。このソーシャルメディアプラグインを使用すると、ウェブサイトをさまざまなソーシャルプラットフォームに接続し、そこからフィードを埋め込むことができます。

一番良いところは？Smash Balloonを使えば、これらのフィードをお好みに合わせて簡単にカスタマイズできます。これにより、ソーシャルメディアフィードはウェブサイトのデザイン全体と調和して見栄えが良くなります。

詳細については、これらのチュートリアルをご覧ください：

• WordPressでカスタムInstagram写真フィードを作成する方法
• WordPressでカスタムFacebookフィードを作成する方法
• WordPressで最近のツイートを表示する方法（ステップバイステップ）
• WordPressでYouTubeチャンネルの最新動画を表示する方法
• WordPressにTikTok動画を埋め込む方法

このステップバイステップガイドが、WordPressのサイドバーにソーシャルメディアアイコンを追加する方法を学ぶのに役立ったことを願っています。また、WordPressメニューにソーシャルメディアアイコンを追加する方法に関する記事や、ビジネスサイトに必須のWordPressプラグインのリストもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。