WordPressメニューにソーシャルメディアアイコンを追加することは、サイトを煩雑にすることなくプロフィールを宣伝するための賢い方法です。これらの小さくて認識しやすいロゴは、訪問者がさまざまなプラットフォームであなたをフォローすることを奨励し、オンラインでのプレゼンスとエンゲージメントを向上させる可能性があります。
WordPressでは、メニューにソーシャルメディアアイコンを追加する方法は、クラシックテーマを使用しているかブロックテーマを使用しているかによって異なります。しかし、両方のタイプのテーマに対して効果的な方法を見つけました。
この記事では、クラシックテーマとブロックテーマの両方で機能する方法を使用して、WordPressメニューにソーシャルメディアアイコンを追加する方法を説明します。
WordPressでメニューにソーシャルメディアアイコンを追加する理由
WordPressのメニューにソーシャルメディアアイコンを追加することで、すべてのソーシャルメディアプロファイルでより多くのクリック、エンゲージメント、フォロワーを獲得できることがよくあります。
ソーシャルメディアアイコンは、メニューに余分なテキストを追加せずに訪問者の注意を引くこともできます。これにより、限られたスペースで多くの異なるプロフィールを宣伝できます。
ソーシャルメディアアイコンを追加するプロセスは、WordPressメニューに画像アイコンを挿入するのとは異なります。これは、これらの画像がソーシャルプロファイルにリンクされる必要があり、さまざまなデバイスや画面サイズで表示を維持するために特別なスタイリングが必要になることが多いためです。
さらに、これらのアイコンが認識可能で一貫したサイズであることを確認したいでしょう。これは、通常の画像ファイルを使用する場合、難しい場合があります。
それでは、WordPressメニューにソーシャルメディアアイコンを追加するための、初心者向けの2つの方法を見てみましょう。
動画チュートリアル
文章での説明をご希望の場合は、このままお読みください。以下のクイックリンクを使用して、使用したい方法に直接ジャンプしてください。
方法1：Menu Imageプラグインを使用する（クラシックテーマのみ）
WordPressメニューにソーシャルメディアアイコンを追加する最も簡単な方法は、Menu Imageを使用することです。
ソーシャルアイコンを作成する際は、WordPressメディアライブラリにアップロードした任意の画像を使用できます。
たとえば、多くのトップソーシャルメディア企業は、ウェブサイトで使用できるロゴを提供しています。たとえば、Twitterブランドツールキットなどです。Font Awesomeのようなオンラインライブラリからアイコンをダウンロードすることもできます。
Menu Imageは、Font Awesomeプラグインとも統合されています。これにより、WordPressダッシュボードから直接、主要なソーシャルネットワークのアイコンを含むすべてのFont Awesomeアイコンを閲覧およびインポートできます。
チュートリアルを続ける前に、まずFont Awesomeプラグインをインストールすることをお勧めします。Font Awesomeの設定方法の詳細については、WordPressテーマにアイコンフォントを簡単に追加する方法に関するガイドを参照してください。
ソーシャルメディアアイコンをどのように提供する予定であっても、Menu Imageプラグインをインストールして有効にする必要があります。詳細については、WordPressプラグインをインストールする方法に関するステップバイステップガイドを参照してください。
アクティベーション後、アイコンのサイズを確認し、必要に応じて変更することをお勧めします。これを行うには、メニュー画像 » メニュー画像 に移動する必要があります。
ソーシャルアイコンを作成する際には、サムネイル、画像、または大きな画像など、任意のデフォルトのWordPress画像サイズを使用できます。Menu Imageでは、デフォルトで24×24、36×36、48×48ピクセルに設定された3つのユニークなサイズを選択することもできます。
これらのサイズはほとんどのWordPressウェブサイトでうまく機能するはずですが、最初の、2番目、または3番目のMenu Imageフィールドに異なる数値を入力することで変更できます。
それが終わったら、「変更を保存」をクリックして設定を保存します。
ナビゲーションメニューにアイコンを追加するには、外観 » メニューに移動します。デフォルトでは、WordPressはサイトのプライマリメニューを表示します。
固定フローティングメニューのような別のメニュー場所にソーシャルメディアアイコンを追加したい場合は、「編集するメニューを選択」ドロップダウンを開くだけです。
次に、リストからメニューを選択し、「選択」をクリックします。
新しいメニューの作成方法に関するステップバイステップの説明については、WordPressでナビゲーションメニューを追加する方法に関するガイドを参照してください。
まず、各ソーシャルプロフィールを新しいリンクとしてメニューに追加する必要があります。
準備ができたら、「カスタムリンク」セクションをクリックして展開し、使用したいソーシャルメディアページの住所を入力します。たとえば、FacebookグループやYouTubeチャンネルのURLを入力できます。
また、「リンクテキスト」を入力する必要があります。後続のステップで、このタイトルがメニューに表示される場所を変更するか、完全に非表示にするオプションがあります。
それが終わったら、「メニューに追加」をクリックします。
この項目は右側の列に表示されます。
ソーシャルメディアアイコンを追加するには、新しいメニュー項目にカーソルを合わせるだけです。
次に、表示されたら「メニュー画像」ボタンをクリックします。
注意: 「メニュー画像」ボタンが表示されない場合は、「変更を保存」をクリックしてください。これで、メニュー内のいずれかの項目にカーソルを合わせたときに「メニュー画像」ボタンが表示されるはずです。
WordPressメディアライブラリの画像を使用するか、Font Awesomeが提供するアイコンを使用するかを選択できるようになりました。
事前に作成されたFont Awesomeアイコンを使用するには、「アイコン」の横にあるラジオボタンをクリックします。
次に、「Fontawesome」を選択します。
次に「ブランド」をクリックできます。
これで、FacebookからLinkedInまで、すべての主要なソーシャルネットワークのアイコンを含む、すべてのブランドアイコンが表示されます。使用したい画像が表示されたら、クリックするだけです。
または、「画像」ラジオボタンを選択して、WordPressメディアライブラリから独自のアイコンを使用することもできます。次に、「画像のセット」リンクをクリックします。
WordPressメディアライブラリから画像を選択するか、コンピューターから新しいファイルをアップロードするかを選択できます。
アイコンをどこから取得した場合でも、メニュー画像は右側にプレビューを表示します。
「タイトル位置」設定を使用して、リンクタイトルがソーシャルメディアアイコンの上、下、前、または後に表示されるように変更できるようになりました。
多くのソーシャルメディアアイコンはすぐに認識できるため、リンクタイトルは不要な場合があります。ナビゲーションメニューに多くのソーシャルアイコンを追加している場合、タイトルはメニューをより乱雑で複雑に見せることがあります。
それを踏まえて、'非表示'ラジオボタンを選択してタイトルを非表示にしたい場合があります。
変更を加えると、ライブプレビューが自動的に更新されるため、さまざまな設定を試して最適なものを見つけることができます。
最後に、ご自身の画像を使用している場合は、「画像サイズ」ドロップダウンを使用してソーシャルメディアアイコンのサイズを変更できます。
より大きなアイコンは訪問者の注意を引きますが、邪魔になることもあります。それを念頭に置いて、WordPressブログで何が最適かを確認するために、さまざまなサイズを試してみるとよいでしょう。
ソーシャルメディアアイコンの設定が完了したら、「変更を保存」をクリックするだけです。
これらの手順を繰り返すだけで、WordPressメニューにさらに多くのアイコンを追加できます。
ナビゲーションメニューの他の重要な項目にアイコンを追加し、これらのメニュー項目を強調表示してユーザーの注意を引くこともできます。
メニューの設定に満足したら、「メニューを保存」をクリックするだけです。
これで、ウェブサイトにアクセスして、新しいソーシャルメディアアイコンが機能していることを確認できます。
これは、デモウェブサイトでの表示方法です。
方法2：サイト全体エディターを使用する（ブロックテーマのみ）
WordPressには、ソーシャルメディアアイコンを含むメニューを作成し、それを素敵なレイアウトで表示できる組み込みのソーシャルアイコンブロックがあります。
このブロックには、主要なソーシャルネットワークのすべてのアイコンが組み込まれているため、Font Awesomeのようなプラグインをインストールしたり、アイコンをメディアライブラリにアップロードしたりする必要はありません。
ただし、ソーシャルアイコンブロックにはソーシャルメディアアイコンとリンクのみを追加できるため、Menu Imageプラグインほど柔軟ではありません。
ブロックテーマを使用している場合は、ヘッダーやフッターなど、ウェブサイトの任意の場所にソーシャルアイコンブロックを追加できます。このようにして、ウェブサイト全体にソーシャルメディアメニューを表示できます。
開始するには、WordPressダッシュボードの外観 » エディターに移動します。
ここから、ブロックテーマのデザインをカスタマイズするためのメニューが表示されます。
メニューにソーシャルメディアアイコンを追加するには、「ナビゲーション」をクリックします。
次のステップは、鉛筆の「編集」アイコンをクリックすることです。
これにより、WordPressフルサイトエディターが開きます。
これで、WordPressのヘッダーテンプレートの一部であるナビゲーションメニューを編集およびスタイル設定できるようになります。
開始するには、左上隅にある青い「+」アイコンをクリックします。検索バーに「ソーシャルアイコン」と入力する必要があります。
右側のブロックが表示されたら、テーマテンプレートにドラッグアンドドロップします。
最初のアイコンを追加するには、ブロック内の「+」アイコンをクリックするだけです。
表示されるポップアップで、追加したいアイコン（例：「Twitter」または「Facebook」）を入力します。
右側のアイコンが表示されたら、クリックするだけでWordPressブログに追加できます。
次に、新しいソーシャルメディアアイコンをクリックします。
これにより、FacebookページのようなリンクしたいURLを入力できる小さなバーが開きます。
WordPressにさらにソーシャルアイコンを追加するには、単に「+」アイコンをクリックし、上記で説明したのと同じプロセスを繰り返します。
すべてのソーシャルメディアプラットフォームを追加した後、ブロックをカスタマイズしたい場合があります。これを行うには、ソーシャルアイコンブロックをクリックして選択し、「ブロック」タブをクリックします。
「レイアウト」設定を使用して、アイコンの配置、整列、方向を変更できます。
デフォルトでは、すべてのソーシャルメディアリンクは同じタブで開きます。訪問者をあなたのウェブサイトに留めるために、「新しいタブでリンクを開く」トグルを有効にすることをお勧めします。
デフォルトでは、WordPressはテキストなしでソーシャルアイコンのみを表示します。
各アイコンの横にテキストを表示したい場合は、「ラベルを表示」トグルをクリックして有効にしてください。
次に、「スタイル」タブをクリックします。
ここで、「デフォルト」、「ロゴのみ」、または「ピル型」をクリックして、ボタンのスタイルを変更できます。
最後に、「ブロック間隔」の設定を使用して、ソーシャルアイコン間のスペースを変更できます。
メニューの外観に満足したら、「保存」ボタンをクリックします。
さて、ウェブサイトにアクセスすると、ソーシャルメディアアイコンがライブで表示されます。
ボーナスのヒント：WordPressサイトにソーシャルフィードを埋め込む
WordPressメニューにソーシャルメディアアイコンを追加することは、さまざまなアカウントでより多くのフォロワーとエンゲージメントを獲得するための優れた方法です。ただし、Twitter、Facebook、その他のソーシャルプロファイルを宣伝する方法は他にもたくさんあります。
より多くのフォロワーとエンゲージメントを獲得する最善の方法は、ライブソーシャルフィードをウェブサイトに埋め込むことです。これにより、ソーシャルメディアサイトの最新の投稿と、訪問者が投稿にエンゲージしたりソーシャルメディアであなたをフォローしたりするために使用できるボタンを表示できます。
ウェブサイトにソーシャルメディアフィードを追加する最善の方法は、Smash Balloonを使用することです。これはWordPress向けの最高のソーシャルメディアフィードプラグインであり、Twitter、Instagram、Facebookなどからのライブフィードを埋め込むことができます。
詳細については、WordPressチュートリアル「WordPressにソーシャルメディアフィードを追加する方法」をご覧ください。
この記事が、WordPressメニューにソーシャルメディアアイコンを追加する方法を学ぶのに役立ったことを願っています。また、「WordPressでドロップダウンメニューを作成する方法」に関する記事や、「ナビゲーションメニューに検索バーを追加する」に関する究極のガイドもご覧ください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
Mrteesurez
実際、ユーザーは、共有したい投稿にソーシャルアイコンがあると、友人などに簡単に共有できるため、より簡単だと感じています。さらに、Sassy Social Shareプラグインも使用できます。これも機能が豊富で、ありがとうございます。
イジー・ヴァネック
Menu Imageプラグインは素晴らしいです。まさに同じ問題に取り組んでいたときに、それについて記事を書きました。メニューにメインの「お問い合わせ」フォルダを作成し、アイコン付きのソーシャルネットワークへのリンクを持つサブメニューを追加します。魔法のように機能します。以前はFont Awesomeを使用していましたが、非常に実用的ではありませんでした。これははるかに洗練されたソリューションです。
Mrteesurez
Jiríさん、よくできました。おすすめと、ご自身でうまくいったことの共有、ありがとうございます。メニューにメインの「お問い合わせ」フォルダを作成し、サブメニューでソーシャルネットワークにリンクさせるという方法はまだ試していません。実装してみます。ありがとうございます。
イジー・ヴァネック
Mrteesurez様
はい、このプラグインは本当に便利です。主にメニューのグラフィックデザインを改善するのに役立ちました。ぜひ試してみてください。ただし、注意が必要です。私がメニューを設定し、以前の記事で説明した方法は、Googleによると最善の解決策ではなかったことが判明しました。メインの「お問い合わせ」項目があり、その下にサブメニューがありましたが、私の場合は「お問い合わせ」項目自体がクリックできませんでした。リンクの代わりに#しか含まれていませんでした。もし私と同じアプローチを使いたいのであれば、すべての項目をクリック可能にし、ページに遷移するようにすることをお勧めします。そうすれば、私が犯したのと同じ間違いや、「お問い合わせ」項目がどこにもリンクされていないというPage Speed Insightからの批判を避けることができます。
Mrteesurez
ご心配いただきありがとうございます！プラグインとGoogleの推奨について、ご経験を共有していただき感謝いたします。メニュー項目をすべてクリック可能にして、問題を回避するというアドバイスは必ず実行します。貴重なご意見は大変参考になり、メニュー設定の際に心に留めておきます。
ラルフ
あなたの記事のチュートリアルが大好きなので、今回はビデオだけを見ましたが、素晴らしかったです！短く、無駄がなく、要点を押さえていました。もっとビデオチュートリアルを含めるべきです。あなたはそれが得意で、今私のメニューには（ソーシャルだけでなく）新しいアイコンがあります。本当にありがとうございます！
ジョナス
この記事、大変参考になりました！
WPBeginnerサポート
当社の記事がお役に立てて嬉しいです！
管理者
Farhad
ブログ記事をソーシャルメディアサイトに自動投稿する方法はありますか？
ありがとうございます。
WPBeginnerサポート
そのためのオプションはいくつかあります。まず、以下の記事をご覧ください。
https://www.wpbeginner.com/beginners-guide/how-to-automatically-post-to-facebook-from-wordpress/
管理者
ジミー・エキサ
素晴らしい記事です！ソーシャルメニューを作成してNewsPackテーマのヘッダーに追加する時間を節約できました。本当にありがとうございます。
シャム
フッターにソーシャルプロフィールのアイコンを表示するにはどうすればよいですか？
WPBeginnerサポート
フッター用のウィジェットエリアがある場合は、以下のリストにあるプラグインのいずれかを使用できます。
https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
管理者
ケリー
ウェブサイトにソーシャルメディアアイコンを設置しました。これらのアイコンをソーシャルメディアプロフィールにリンクするにはどうすればよいですか？
WPBeginnerサポート
メニュー項目をカスタムURLにしたい
管理者
ヴィッキー
これ、ありがとうございます。ソーシャルメニューにGoodreadsのロゴを追加し、ソーシャルメニューの場所も選択できました。しかし、ページを表示すると、ロゴ単体ではなく、新しいGoodreadsロゴの横に虫眼鏡が表示されます。これはなぜですか？どうすれば削除できますか？
WPBeginnerサポート
テーマ自体のデザインによるものかどうか、テーマのサポートに確認することをお勧めします。
管理者
ダニエル
ソーシャルメディアメニューを追加しましたが、サイトに表示されません。どうすればよいですか？
WPBeginnerサポート
まず、プラグインのサポートに連絡して確認してもらい、プラグインの一時的な問題でないことを確認することをお勧めします。
管理者
リサ・ジャクソン
これ気に入っていますが、アイコンが横並びではなく縦に並んで表示されます。どうすれば修正できますか？
WPBeginnerサポート
特定のテーマによりますが、まずテーマのサポートに確認して、メニューのスタイル設定方法に問題がなく、それが原因で発生しているのではないことを確認してください。
管理者
アンディ・モス
何？アイコンがない？自分で探すの？
WPBeginnerサポート
現時点でおすすめできる特定のものはございませんが、お探しのスタイルによって様々なオプションが利用可能です。
管理者
ボブ・ライト
サイトにソーシャルリンクを設定しても、この記事の画像と一致しません（おそらく、親組織のカスタマイズがブロックしているのでしょう）。
WPBeginnerサポート
最も可能性の高い理由として、管理ユーザーであり、サイトがWordPress.org上にあることを確認してください。以下のガイドで比較を確認できます。
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
管理者
アンキット
こんにちは、
再度、素晴らしい役立つチュートリアルです。ただ、1つ問題に直面しています。最後のステップで、メニューの場所オプションを選択しようとすると、プライマリメニューオプションしか表示されません。ソーシャルメニューオプションも表示するにはどうすればよいですか？
WPBeginnerサポート
特定のテーマには、ソーシャルメディア専用のメニューロケーションがない場合があります。テーマのサポートに問い合わせると、明確化と支援を受けることができます。
管理者
ジョナサン
WordPressのブログサイトにソーシャルメディアアカウントを追加する方法を理解しようとしています。どのような支援でも感謝します。サイト設定の早い段階で何かをスキップしてしまった場合は、愚かなコメントをしてしまったことを事前に謝罪します！
WPBeginnerサポート
ご心配なく。それはあなたが探しているものによります。出発点として、以下の推奨プラグインをご覧になることをお勧めします。
https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
管理者
エルダーデザイナー
素晴らしいチュートリアルです。続けてください。
WPBeginnerサポート
Glad you found our guide helpful
管理者
ステファニー・ストランド
ありがとうございます！非常に分かりやすい説明でした。初心者である私にとって大変助かりました。
WPBeginnerサポート
Glad our guide was helpful
管理者
ルパリ・トリパティ
この動画、本当にありがとうございます。
WPBeginnerサポート
You’re welcome
管理者
デビー・サージェント
アイコンに色がついていないのですが…何が間違っていたのかしら？
WPBeginnerサポート
特定のテーマのサポートに確認して、テーマ固有のCSSが色を変更していないか確認することをお勧めします。
管理者
アイザック
こんにちは、アイコン同士の間隔を広げる方法はありますか？私のものは近すぎるようです…。よろしくお願いします。
WPBeginnerサポート
通常、これにはCSSの変更が必要になります。出発点として、こちらの記事をご覧ください。
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
サム・シムソン
メニューにタイトルが表示されないようにしようとしました。その機能は機能しなかったようです。タイトルはまだ表示されています。
WPBeginnerサポート
特定のテーマのサポートに確認して、カスタマイズが上書きされていないか確認することをお勧めします。
管理者
トレーシー
こんにちは！この方法を試しましたが、「画像を選択」の部分が表示されませんでした。URLとナビゲーションラベルしか入力できません…何かアイデアはありますか？
WPBeginnerサポート
アイコンが表示されるように、プラグインが完全にインストールされ、有効化されていることを確認したい場合があります。
管理者
レア
ありがとうございます！Font Awesomeよりもうまく機能するソリューションのようですね！Google画像からFacebookアイコンの画像などをアップロードする画像として使用することは許可されていますか？
WPBeginnerサポート
Googleから画像を取得する場合、画像の利用権限を必ず確認する必要がありますが、使用が許可されている場合は、サイトにアップロードできます。
管理者
ラリー・ヒルトン
フッター領域にソーシャル画像をを追加する手順に従いましたが、GoogleとYelpの画像が表示されません。表示されているものと同じ方法で行いました。ブラウザの問題ではないようです。何か提案はありますか？
WPBeginnerサポート
まず、プラグインのサポートに連絡して、それらのアイコンまたはメニューの追加方法に既知の問題がないことを確認してください。
管理者
ミシェル・A
この素晴らしいチュートリアルをありがとうございます!! 言葉では言い表せないほど助かりました。ありがとうございます！
WPBeginnerサポート
Glad our guide could help
管理者
ムネーブ
アイコンは現在サイトにありますが、リンクが追加されていても機能しません。理由は何ですか？
WPBeginnerサポート
URLが正しく構造化されている場合は、プラグイン自体に問題があるかどうかを確認するために、プラグインのサポートにエラーを通知することをお勧めします。
管理者
ミスター・デットスミス
皆さん、こんにちは。
プラグインをインストールしました。3つのソーシャルアカウントを追加し、「メインナビゲーション」のロケーションボックスをクリックしました。ウィジェットは、既存のメインメニューに追加されるのではなく、それを置き換えました。アイコンが表示される代わりに、ソーシャルアカウントのタイトルが表示されます。このプラグインの利点を楽しみにしております。皆さん、助けていただけますでしょうか。
ありがとうございます！
WPBeginnerサポート
プラグインのサポートに知らせる必要があります。https://wordpress.org/support/plugin/menu-image。そうすれば、プラグイン自体のエラーかどうかを確認できるはずです。
管理者
アルピット
インターネットで探していた不可欠な情報をありがとうございます。
大変感謝しております。
WPBeginnerサポート
当社の記事がお役に立てて光栄です。
管理者
ダン
現在のテーマでは、デスクトップバージョンではメインのトップヘッダーにソーシャルメディアアイコンが表示されますが、モバイルバージョンに切り替えるとソーシャルアイコンが消えます。それらを維持し、可能であればヘッダーリンクも維持するにはどうすればよいですか？
WPBeginnerサポート
Danさん、こんにちは。
モバイル版ではテーマによって非表示になっているようです。テーマの作者に連絡すれば、対応してもらえるはずです。
管理者
デビッド・コーニッシュ
アドバイスありがとうございます。私は今Simple Social Iconsを使用しており、とても気に入っています。記事のタイトルの下に表示されているような、「Twitterで共有」または「Facebookで共有」ボタンを投稿の上または下に表示するために使用するプラグインについて何かアドバイスはありますか？
WPBeginnerサポート
Davidさん、こんにちは
WordPress向けの最高のソーシャルメディアプラグインのリストをご覧ください。
管理者
ロブ・リリー
ソーシャルページが新しいタブ/ウィンドウで開くように、target属性を追加する方法はありますか？
編集スタッフ
はい、リンクを新しいウィンドウで簡単に開くことができます。カスタムリンクでデフォルトでオプションが表示されない場合は、画面右上の「画面オプション」タブをクリックし、「リンクターゲット」オプションがチェックされていることを確認してください。
管理者
ウマルバッティ
こんにちは、
このプラグインは素晴らしいですね。ありがとうございます！
アマン・シン
こんにちは、
WPbeginnerにあるようなウィジェットの外観のカスタムコードを入手できますか？
WPBeginnerのソーシャルメディアアイコンのウィジェット表示が好きなので、コードを入手できますか？
ありがとうございます。
WPBeginnerサポート
Amanさん、こんにちは。
ブラウザの「検証」ツールを使用して、HTMLコードとCSSをコピーするだけです。
管理者