ソーシャルメディアアイコンをWordPressメニューに追加する方法（簡単な方法）

WordPress メニューにソーシャル メディア アイコンを追加する方法をお探しですか?

Facebook や Twitter などのサイトのロゴは、世界中の人々にすぐに認識されます。 これらのアイコンをメニューに追加すると、多くのスペースをとらずに、目を引く方法でソーシャル メディア プロフィールを宣伝できます。

この記事では、WordPress ナビゲーション メニューにソーシャル メディア アイコンを追加する方法を説明します。

ソーシャル メディア アイコンをメニューに追加する必要があるのはなぜですか?

Web サイトにソーシャル メディア アイコンを追加すると、さまざまなソーシャル ネットワーキング プロフィールにアクセスするよう人々を促すことができます。 これにより、Facebook、Twitter、Instagram などでより多くのフォロワーとエンゲージメントを得ることができます。

1 つのオプションは、WordPress サイドバーまたは同様のウィジェット対応エリアにソーシャル メディア アイコンを追加することです。 ただし、ユーザーが新しいページにアクセスしたいときは、通常、最初にナビゲーション メニューを見ます。

WordPress メニューにソーシャル メディア アイコンを追加すると、多くの場合、すべてのソーシャル メディア プロフィールでクリック数、エンゲージメント、フォロワーを増やすことができます。

ソーシャル メディア アイコンは、メニューに余分なテキストを追加することなく、訪問者の注意を引くこともできます。 これにより、少ないスペースでさまざまなプロファイルを宣伝できます。

そうは言っても、WordPress メニューにソーシャルメディアアイコンを簡単に追加する方法を見てみましょう。

ビデオチュートリアル

書面による説明を希望する場合は、そのまま読み続けてください。 以下のクイック リンクを使用するだけで、使用したい方法に直接ジャンプできます。

方法 1: メニュー画像プラグインを使用する (推奨)

WordPress メニューにソーシャル メディア アイコンを追加する最も簡単な方法は、メニュー画像を使用することです。 この無料のプラグインを使用すると、ソーシャル アイコンを含む画像アイコンをナビゲーション メニューに追加できます。

ソーシャル アイコンを作成するときは、WordPress メディア ライブラリにアップロードした任意の画像を使用できます。

たとえば、トップのソーシャル メディア企業の多くは、Twitter ブランド ツールキットなど、Web サイトで使用できるロゴを提供しています。 Font Awesome Web サイトなどのオンライン ライブラリからアイコンをダウンロードすることもできます。

Menu Image は Font Awesome プラグインとも統合されます。 これにより、すべての主要なソーシャル ネットワークのアイコンを含む、すべての Font Awesome アイコンを WordPress ダッシュボードから直接参照してインポートできるようになります。 このため、Font Awesome プラグインをインストールすることをお勧めします。

Font Awesome の設定方法の詳細については、WordPress テーマにアイコン フォントを簡単に追加する方法に関するガイドを参照してください。

ソーシャル メディア アイコンを提供する方法に関係なく、Menu Image プラグインをインストールしてアクティブ化する必要があります。 詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドを参照してください。

アクティブ化したら、アイコンのサイズを確認し、必要に応じて変更することができます。 これを行うには、メニュー画像 » メニュー画像に移動する必要があります。

ソーシャル アイコンを作成するときは、サムネイル、イメージ、ラージなど、WordPress のデフォルトの画像サイズを使用できます。 メニュー画像では、デフォルトで 24×24、36×36、48×48 ピクセルに設定されている 3 つの固有のサイズから選択することもできます。

これらのサイズはほとんどの WordPress Web サイトで適切に機能しますが、1 番目、2 番目、または 3 番目のメニュー画像フィールドに別の数値を入力することでサイズを変更できます。

それが完了したら、「変更を保存」をクリックして設定を保存します。

ナビゲーション メニューにアイコンを追加するには、 [外観] » [メニュー]に移動します。 デフォルトでは、WordPress はサイトのメインメニューを表示します。

ソーシャル メディア アイコンを別のメニューに追加する場合は、[編集するメニューを選択] ドロップダウンを開くだけです。

次に、リストからメニューを選択し、「選択」をクリックします。

新しいメニューを作成する詳しい手順については、WordPress にナビゲーション メニューを追加する方法に関するガイドを参照してください。

まず、各ソーシャル プロフィールを新しいリンクとしてメニューに追加する必要があります。

準備ができたら、[カスタム リンク] セクションをクリックして展開し、使用するソーシャル メディア ページのアドレスを入力します。 たとえば、Facebook グループまたは YouTube チャンネルの URL を入力できます。

「リンクテキスト」を入力する必要もあります。 後のステップで、このタイトルがメニュー内で表示される場所を変更したり、完全に非表示にしたりするオプションが表示されます。

それが完了したら、「メニューに追加」をクリックします。

この項目は右側の列に表示されます。

ソーシャル メディア アイコンを追加するには、新しいメニュー項目にカーソルを合わせるだけです。

次に、「メニュー画像」ボタンが表示されたらクリックします。

注: [メニュー画像] ボタンが表示されない場合は、[変更を保存] をクリックします。 これで、メニュー内の項目の上にマウスを移動すると、「メニュー画像」ボタンが表示されるようになります。

WordPress メディア ライブラリの画像を使用するか、Font Awesome が提供するアイコンを使用するかを決定できるようになりました。

既製の Font Awesome アイコンを使用するには、「アイコン」の横にあるラジオ ボタンをクリックします。

次に、「素晴らしい」を選択します。

次に、「ブランド」をクリックします。

すべての主要なソーシャル ネットワークのアイコンを含む、すべてのブランド アイコンが表示されます。 使用したい画像が表示されたら、クリックするだけです。

もう 1 つのオプションは、「画像」ラジオ ボタンを選択して、WordPress メディア ライブラリから独自のアイコンを使用することです。 次に、「画像を設定」リンクをクリックします。

WordPress メディア ライブラリから画像を選択するか、コンピューターから新しいファイルをアップロードできるようになりました。

アイコンをどこから取得しても、メニュー画像の右側にプレビューが表示されます。

「タイトルの位置」設定を使用して、リンク タイトルをソーシャル メディア アイコンの上、下、前、後ろのいずれに表示するかを変更できるようになりました。

多くのソーシャル メディア アイコンはすぐに認識できるため、リンク タイトルは不要な場合があります。 ナビゲーション メニューに多数のソーシャル アイコンを追加している場合、タイトルによってメニューがさらに乱雑で複雑に見える可能性もあります。

そうは言っても、[非表示] ラジオ ボタンを選択してタイトルを非表示にすることもできます。

変更を加えるとライブ プレビューが自動的に更新されるため、さまざまな設定を試して最適な設定を確認できます。

最後に、独自の画像を使用している場合は、[画像サイズ] ドロップダウンを使用してソーシャル メディア アイコンのサイズを変更できます。

大きなアイコンは訪問者の注意を引きますが、気が散ってしまう可能性もあります。 それを念頭に置いて、さまざまなサイズを試して、WordPress ブログに最適なものを確認するとよいでしょう。

ソーシャル メディア アイコンの設定に満足したら、[変更を保存] をクリックするだけです。

これらの手順を繰り返すだけで、WordPress メニューにさらにアイコンを追加できます。

ナビゲーション メニューの他の重要な項目にアイコンを追加することもできます。 たとえば、お問い合わせフォームや WooCommerce チェックアウト ページにアイコンを追加できます。

メニューの設定に問題がなければ、[メニューを保存] をクリックするだけです。

これで、Web サイトにアクセスして、新しいソーシャル メディア アイコンが動作しているのを確認できるようになりました。

弊社のデモ Web サイトではこのように見えました。

方法 2: フル サイト エディターを使用する (ブロック テーマのみ)

WordPress にはソーシャル アイコン ブロックが組み込まれており、ソーシャル メディア アイコンを含むメニューを作成し、それらを適切なレイアウトで表示できます。

このブロックには、すべての主要なソーシャル ネットワークのアイコンが組み込まれているため、Font Awesome などのプラグインをインストールしたり、アイコンをメディア ライブラリにアップロードしたりする必要はありません。 ただし、ソーシャル メディア アイコンとリンクはソーシャル アイコン ブロックにのみ追加できるため、メニュー イメージ プラグインほど柔軟ではありません。

ブロック テーマを使用している場合は、ヘッダーやフッターなど、Web サイトの任意の部分にソーシャル アイコン ブロックを追加できます。 このようにして、Web サイト全体にソーシャル メディア メニューを表示できます。

まず、WordPress ダッシュボードの[外観] » [エディター]に移動します。

デフォルトでは、フル サイト エディターにはテーマのホーム テンプレートが表示されますが、任意のテンプレートまたはテンプレート パーツにソーシャル アイコンを追加できます。 標準の WordPress コンテンツ エディターを使用して編集できない Web サイトの部分にソーシャル メディア アイコンを追加することもできます。

たとえば、サイトの 404 ページ テンプレートにソーシャル メディア メニューを追加できます。

利用可能なオプションをすべて表示するには、「テンプレート」または「テンプレート パーツ」のいずれかを選択する必要があります。

これで、編集するテンプレートまたはテンプレート パーツをクリックできるようになります。

例として、WordPress ヘッダーにソーシャル メディア アイコンを追加しますが、どのテンプレートを選択しても手順は同じです。

選択すると、WordPress によってテンプレートまたはテンプレート パーツのプレビューが表示されます。

続行するには、小さな鉛筆アイコンをクリックします。

それが完了したら、左上隅にある青い「+」アイコンをクリックします。

検索バーに「ソーシャル アイコン」と入力する必要があります。

適切なブロックが表示されたら、それをテーマ テンプレートにドラッグ アンド ドロップします。

最初のアイコンを追加するには、ブロック内の「+」アイコンをクリックするだけです。

表示されるポップアップに、「Twitter」や「Facebook」など、追加するアイコンを入力します。

適切なアイコンが表示されたら、クリックするだけで WordPress ブログに追加できます。

次に、新しいソーシャル メディア アイコンをクリックします。

これにより、Facebook ページなど、リンク先の URL を入力できる小さなバーが開きます。

WordPress にさらにソーシャル アイコンを追加するには、「+」アイコンをクリックし、上記と同じプロセスを繰り返すだけです。

すべてのソーシャル メディア アイコンを追加した後、ブロックをカスタマイズすることができます。 これを行うには、ソーシャル アイコン ブロックをクリックして選択し、[ブロック] タブをクリックします。

「レイアウト」設定を使用して、アイコンの位置揃え、配置、方向を変更できます。

デフォルトでは、すべてのソーシャル メディア リンクが同じタブで開きます。 訪問者を Web サイトに留めておくには、[リンクを新しいタブで開く] トグルをクリックして有効にすることができます。

デフォルトでは、WordPress はソーシャルアイコンのみを表示し、テキストは表示されません。

各アイコンの横にテキストを表示したい場合は、「ラベルを表示」トグルをクリックして有効にします。

次に、「スタイル」タブをクリックします。

ここで、「デフォルト」、「ロゴのみ」、または「錠剤の形状」をクリックしてボタンのスタイルを変更できます。

最後に、[ブロック間隔] の設定を使用して、ソーシャル アイコン間のスペースを変更できます。

メニューの外観に満足したら、「保存」ボタンをクリックします。

Web サイトにアクセスすると、ソーシャル メディアのアイコンが表示されます。

ボーナス: ソーシャル メディア プロフィールを宣伝する方法

WordPress メニューにソーシャル メディア アイコンを追加することは、さまざまなアカウント間でより多くのフォロワーとエンゲージメントを獲得するための優れた方法です。 ただし、Twitter、Facebook、その他のソーシャル プロフィールを宣伝する方法は他にもたくさんあります。

より多くのフォロワーとエンゲージメントを獲得する最善の方法は、ウェブサイトにライブ ソーシャル フィードを埋め込むことです。 これにより、複数のアカウントの最新の投稿と、訪問者が投稿に参加したり、ソーシャル メディアであなたをフォローしたりするために使用できるボタンを表示できます。

ウェブサイトにソーシャル メディア フィードを追加する最良の方法は、スマッシュ バルーンを使用することです。 これは WordPress に最適なソーシャル メディア フィード プラグインで、Twitter、Instagram、Facebook などからのライブ フィードを埋め込むことができます。

詳細については、WordPress にソーシャル メディア フィードを追加する方法に関するガイドをご覧ください。

この記事が、WordPress メニューにソーシャル メディア アイコンを追加する方法を学ぶのに役立つことを願っています。 Facebook ビデオを WordPress に埋め込む方法に関するガイドや、専門家が選ぶ WordPress に最適な Twitter プラグインも参照してください。

この記事が気に入ったら、WordPress ビデオチュートリアルの YouTube チャンネルに登録してください。 Twitter や Facebook でもご覧いただけます。