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

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

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

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

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

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

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

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

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

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

使用すべき方法は、使用している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でも私たちを見つけることができます。