WordPressのメニューにソーシャルメディアのアイコンを追加することは、サイトを乱雑にすることなく、あなたのプロフィールを宣伝する賢い方法です。これらの小さな、認識可能なロゴは、訪問者が様々なプラットフォームであなたをフォローするように促すことができ、あなたのオンラインプレゼンスとエンゲージメントを高める可能性があります。
WordPressでは、クラシックテーマかブロックテーマかによって、ソーシャルメディアアイコンをメニューに追加する方法が異なります。しかし、どちらのタイプのテーマでも効果的な方法を見つけました。
この記事では、WordPressのメニューにソーシャルメディアのアイコンを追加する方法を、クラシックテーマとブロックテーマの両方に有効な方法を使ってご紹介します。
なぜWordPressのメニューにソーシャルメディアのアイコンを追加するのか？
WordPressのメニューにソーシャルメディアアイコンを追加することで、すべてのソーシャルメディアプロフィールでより多くのクリック、エンゲージメント、フォロワーを獲得することができます。
ソーシャルメディアのアイコンは、メニューに余分なテキストを追加することなく、訪問者の注意を引くこともできます。これにより、小さなスペースで多くの異なるプロフィールを宣伝することができます。
ソーシャルメディアのアイコンを追加するプロセスは、WordPressのメニューに画像アイコンを挿入するのとは異なります。なぜなら、これらの画像はあなたのソーシャル・プロフィールにリンクされる必要があり、異なるデバイスや画面サイズでもその外観を維持するために特別なスタイリングが必要になることが多いからです。
さらに、これらのアイコンが認識可能で、一貫したサイズであることを確認したいでしょう。これは、通常の画像ファイルを使用する場合には難しいことです。
ということで、WordPressのメニューにソーシャルメディアのアイコンを追加する、初心者にやさしい2つの方法を見てみよう。
動画チュートリアル
文書による説明がお好きな方は、そのまま読み進めてください。下記のクイックリンクから、お好きな方法にジャンプしてください：
方法1：メニュー画像プラグインを使う（クラシックテーマのみ）
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サイトでうまく機能するはずですが、1番目、2番目、3番目のメニュー画像フィールドに異なる数字を入力することで変更することができます。
設定が完了したら、「変更を保存」をクリックして設定を保存します。
ナビゲーションメニューにアイコンを追加するには、外観 ” メニューにアクセスしてください。初期設定では、WordPressはサイトの主要メニューを表示します。
ソーシャルメディア・アイコンを、スティッキーなフローティング・メニューなど、別のメニューの場所に追加したい場合は、「編集するメニューを選択」ドロップダウンを開いてください。
そして、リストからメニューを選び、『選択』をクリックする。
新規メニューの作成方法については、WordPressでナビゲーションメニューを追加する方法をご覧ください。
まず、各ソーシャルプロフィールを新しいリンクとしてメニューに追加する必要があります。
準備ができたら、「カスタムリンク」セクションをクリックして展開し、使用したいソーシャルメディアページのアドレスを入力します。例えば、FacebookグループやYouTubeチャンネルのURLを入力します。
また、「リンクテキスト」を入力する必要があります。後のステップで、このタイトルがメニューに表示される場所を変更したり、完全に非表示にしたりするオプションがあります。
それが終わったら、『メニューに追加』をクリックする。
この項目は右側の列に表示されます。
ソーシャルメディアのアイコンを追加するには、新しいメニュー項目にマウスオーバーするだけです。
メニュー画像」ボタンが外観に表示されたら、それをクリックする。
注： 「メニュー画像」ボタンが表示されない場合は、「変更を保存」をクリックしてください。これで、メニューのどの項目にマウスオーバーしても’Menu Image’ボタンが表示されるはずです。
WordPressのメディアライブラリにある画像を使うか、Font Awesomeが提供するアイコンを使うかを決めることができます。
既製のFont Awesomeアイコンを使用するには、「Icon」の隣にあるラジオボタンをクリックします。
そして、『Fontawesome』を選択する。
その後、『ブランド』をクリックすればいい。
FacebookからLinkedInまで、主要なソーシャルネットワークのアイコンを含む、すべてのブランドアイコンが表示されます。使いたい画像を見つけたら、クリックするだけ。
もうひとつのオプションは、WordPressのメディアライブラリから「Image」ラジオボタンを選択して、独自のアイコンを使用する方法です。次に、「Set Image」リンクをクリックします。
WordPressのメディアライブラリから画像を選択するか、コンピューターから新しいファイルをアップロードすることができます。
どこからアイコンを取得しても、Menu Imageは右側にプレビューを表示します。
タイトルの位置」設定を使用して、リンクのタイトルをソーシャルメディアアイコンの上、下、前、後に表示するかどうかを変更できるようになりました。
多くのソーシャルメディアのアイコンはすぐにわかるので、リンクタイトルは不要かもしれません。ナビゲーションメニューにたくさんのソーシャルアイコンを追加している場合、タイトルをつけるとメニューがごちゃごちゃして複雑に見えることさえある。
とはいえ、「非表示」ラジオボタンを選択してタイトルを非表示にすることもできる。
変更を加えると、ライブプレビューが自動的に更新されるので、さまざまな設定を試して、最適な設定を確認することができます。
最後に、自分の画像を使用している場合は、「Image Size」ドロップダウンを使用してソーシャルメディアのアイコンのサイズを変更することができます。
大きなアイコンは訪問者の注意を引きますが、気が散ってしまうこともあります。このことを念頭に置いて、WordPressブログで最も効果的なものを確認するために、さまざまなサイズを試してみるとよいでしょう。
ソーシャルメディアアイコンの設定に満足したら、「変更を保存」をクリックするだけです。
WordPressのメニューにアイコンを追加するには、この手順を繰り返します。
ナビゲーションメニューの他の重要な項目にアイコンを追加し、これらのメニュー項目を強調してユーザーの注意を引くこともできます。
メニューの設定に満足したら、「メニューを保存」をクリックするだけです。
これで、あなたのサイトにアクセスして、新しいソーシャルメディア・アイコンを実際に見ることができます。
デモサイトではこんな感じ。
方法2：フルサイトエディターを使う（ブロックテーマのみ）
WordPressにはソーシャルアイコンブロックがビルトインされており、ソーシャルメディアアイコンを含むメニューを作成し、素敵なレイアウトで表示することができます。
このブロックには、主要なソーシャルネットワークのアイコンがすべてビルトインされているので、Font Awesomeのようなプラグインをインストールしたり、メディアライブラリにアイコンをアップロードしたりする必要はない。
ただし、ソーシャルメディアのアイコンとリンクを追加できるのはSocial Iconsブロックだけなので、Menu Imageプラグインほど柔軟ではない。
ブロックテーマを使用している場合、ヘッダーやフッターなど、サイトの任意の場所にソーシャルアイコンブロックを追加することができます。この方法で、サイト全体にソーシャルメディアメニューを表示することができます。
始めるには、WordPressダッシュボードの外観 ” エディターへ 向かいます。
ここから、ブロックテーマのデザインをカスタマイズするためのメニューがいくつか表示されます。
ソーシャルメディアのアイコンをメニューに追加するには、「ナビゲーション」をクリックします。
次のステップは、鉛筆の「編集」アイコンをクリックすることです。
WordPressフルサイトエディターが開きます。
これで、WordPressのヘッダーテンプレートの一部であるナビゲーションメニューを編集し、スタイルを設定できるようになります。
まず、左上の青い「＋」アイコンをクリックする。検索バーに『ソーシャルアイコン』と入力してください。
適切なブロックが外観されたら、テーマテンプレートにドラッグ＆ドロップする。
最初のアイコンを追加するには、ブロック内の「+」アイコンをクリックします。
表示されるポップアップに、「Twitter」や「Facebook」など、追加したいアイコンを入力する。
右のアイコンが外観に表示されたら、クリックするだけでWordPressブログに追加できます。
次に、新しいソーシャルメディアのアイコンをクリックします。
小さなバーが開くので、自分のFacebookページなど、リンクしたいURLを入力する。
WordPressにソーシャル・アイコンを追加するには、「+」アイコンをクリックし、上記と同じプロセスを繰り返すだけだ。
すべてのソーシャルメディア・プラットフォームを追加した後、ブロックをカスタマイズしたくなるかもしれません。これを行うには、ソーシャルアイコンブロックをクリックして選択し、’ブロック’タブをクリックします。
Layout」設定で、アイコンのジャスティフィケーション、アライメント、向きを変更できます。
初期設定では、ソーシャルメディアのリンクはすべて同じタブで開きます。訪問者をサイトに留めておくために、「リンクを新しいタブで開く」トグルをクリックして有効化するとよいでしょう。
WordPressの初期設定では、ソーシャルアイコンのみが表示され、テキストは表示されません。
各アイコンの横にテキストを表示したい場合は、「ラベルを表示」をクリックして有効化する。
次に、「スタイル」タブをクリックする。
ここでは、「初期設定」、「ロゴのみ」、「ピル型」をクリックしてボタンのスタイルを変更することができます。
最後に、「ブロック間隔」の設定を使って、ソーシャルアイコン間のスペースを変更することができる。
メニューの見た目に満足したら、「保存」ボタンをクリックします。
あなたのサイトにアクセスすると、ソーシャルメディアのアイコンが表示されます。
ボーナスのヒントWordPressサイトにソーシャルフィードを埋め込む
WordPressのメニューにソーシャルメディアのアイコンを追加することは、より多くのフォロワーを獲得し、さまざまなアカウントに参加してもらうための素晴らしい方法です。しかし、TwitterやFacebook、その他のソーシャルプロフィールを宣伝する方法は他にもたくさんあります。
より多くのフォロワーとエンゲージメントを得るための最良の方法は、あなたのサイトにライブソーシャルフィードを埋め込むことです。これにより、あなたのソーシャルメディアサイトからの最新の投稿を、訪問者があなたの投稿に関与したり、ソーシャルメディアであなたをフォローするために使用できるボタンと一緒に表示することができます。
ソーシャルメディアフィードをサイトに追加する最良の方法は、Smash Balloonを使用することです。WordPressに最適なソーシャルメディアフィードプラグインで、Twitter、Instagram、Facebookなどのライブフィードを埋め込むことができます。
詳しくは、WordPressにソーシャルメディアのフィードを追加する方法のWordPressチュートリアルをご覧ください。
WordPressのメニューにソーシャルメディアのアイコンを追加する方法について、この記事がお役に立てれば幸いです。WordPressでドロップダウンメニューを作成する方法や、ナビゲーションメニューに検索バーを追加する究極のガイドもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Jiří Vaněk
The Menu Image plugin is fantastic. I actually wrote an article about it when I was dealing with the exact same issue. Creating a main ‘Contact’ folder in the menu and adding a submenu with links to social networks along with icons—it works like magic. Previously, I used Font Awesome, and it was quite impractical. This is a much more elegant solution.
Ralph
As I love your article tutorials this time I only watched video and it was great! Short, no fluff and straight to the point. You guys should include more video tutorials. You are great at it and now I have new icons in my menu (not only for my socials). Thanks a lot!
Jonas
Thanks for this article, it helped me a lot!
WPBeginner Support
Glad our article was helpful!
管理者
Farhad
Is there a way to have blog posts submitted to social media sites automatically?
Thank you.
WPBeginner Support
There are a few different options for that, you would want to start by taking a look at our article below:
https://www.wpbeginner.com/beginners-guide/how-to-automatically-post-to-facebook-from-wordpress/
管理者
Jimmy Ekisa
Brilliant article!!! You saved me time to create social menus and add them in the NewsPack Theme header, thank you so much.
Shyam
How to show icons of social profiles in footer?
WPBeginner Support
If your site has a widget area for your footer you could use one of the plugins from our list below:
https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
管理者
Kerry
I’ve got the social media icons on my website. How do I link those icons to my social media profiles?
WPBeginner Support
You would have the menu items be custom URLs
管理者
Vicki
Thanks for this, I’ve managed to add the Goodreads logo to my Social Menu and chose the Social Menu location too. However when I view the page it shows the magnifying glass next to the new Goodreads logo, rather than just the logo on it’s own – why is this and how do I get rid of it?
WPBeginner Support
You would want to check with your theme’s support to see if this is due to the design of the theme itself.
管理者
Danielle
I added the social media menu but it’s not showing on my site. What can I do?
WPBeginner Support
We would first recommend reaching out to the plugin’s support for them to take a look and ensure this isn’t a hiccup with the plugin.
管理者
Lisa Jackson
Love this, but the icons are displayed in a column rather than next to each other. How can I fix this?
WPBeginner Support
It would depend on your specific theme, you would first want to check with your theme’s support to ensure it is not an issue with how their menu is styled that could be causing that.
管理者
andi moss
What? No icons? Find our own?
WPBeginner Support
We do not have a specific set we would recommend at the moment but there are many different options available depending on the style you’re looking for.
管理者
Bob Wright
Setting up a social link on my site does not match the images in this article (perhaps our parent organization’s customization blocks that).
WPBeginner Support
You would want to ensure you are an admin user and the site is on WordPress.org for the most likely reasons. You can see our comparison in our guide below:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
管理者
Ankit
Hi,
Once again, a great and helpful tutorial. I’m just facing one issue, though. For the last step, when I try to select the menu location option, I can only see the primary menu option there. How do I get the social menu option as well?
WPBeginner Support
Your specific theme may not have a social specific menu location. If you reach out to your theme’s support they can clarify and assist.
管理者
Jonathan
I’m trying to get my head round how to add social media accounts to my WordPress blogsite. Any assistance appreciated. If I’ve skipped an earlier step in setting up the site, my apologies in advance for a stupid comment!
WPBeginner Support
No worries, it depends on what you’re looking for. For a starting point, we would recommend taking a look at our recommended plugins below:
https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
管理者
Elder Designer
amazing tutorial keep it up
WPBeginner Support
Glad you found our guide helpful
管理者
Stephanie Strand
Thank you! Very clear instructions. Helped this newbie enormously.
WPBeginner Support
Glad our guide was helpful
管理者
Rupali Tripathi
Thank you so very much for this video.
WPBeginner Support
You’re welcome
管理者
Debbie Serjeant
Icons are appearing without color … wonder what I did wrong?
WPBeginner Support
You may want to check with the support for your specific theme to ensure there isn’t theme-specific CSS changing your colors.
管理者
Isaac
Hello, is there a way to space the icons farther apart from one another? Mine seem to be too close to each other…. Thank you
WPBeginner Support
That would normally require changing CSS, for a starting point you may want to take a look at our article here:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
Sam Simson
I tried to hide the title from being shown on the menu. Seems like that function didn’t work. the title is still visible.
WPBeginner Support
You would want to check with the support for your specific theme to see if that would be overriding your customizations
管理者
Tracy
Hi! I tried using this method but I didn’t get the “select image” part. I only get to introduce the URL and Navigation Label… any ideas?
WPBeginner Support
You may want to ensure the plugin was fully installed and activated for the select image to appear
管理者
Lea
Thank you! Seems to be a better working solution than with font awesome! Is it allowed though to just use a e.g. facebook icon picture from google pictures then for the image I upload?
WPBeginner Support
You would want to be sure to check the image usage rights if you take an image off of Google but if you are allowed to use it you could upload it to your site.
管理者
Larry Hilton
I followed the directions for adding social images to my footer area and the Google & Yelp images aren’t visible. I did them the same way as those displayed. This does not appear to be browser related. Any suggestions
WPBeginner Support
Start by reaching out to the plugin’s support to ensure there aren’t any known issues with those icons or how the menu is being added
管理者
Michele A
Thank you for this wonderful tutorial!! It has helped me beyond words. Thank you!
WPBeginner Support
Glad our guide could help
管理者
Muneeb
Icons are currently on the site but don’t work even link is added. whats the reason?
WPBeginner Support
If the urls are structured properly then you would want to let the plugin’s support know about your error to take a look if the error is with the plugin itself.
管理者
Mr. Debtsmith
Hi guys,
Installed the plug in. Added 3 social accounts and clicked “Main Nav” location box. The widget replaced the existing main menu instead of being added to it, and instead of the icons showing, the social account titles show instead. I’m looking forward to the benefits of this plug in. Hope you guys can help.
Thanks!
WPBeginner Support
You would want to let the plugin’s support know: https://wordpress.org/support/plugin/menu-image and they should be able to see if this is an error with the plugin itself.
管理者
ARPIT
Thank You Very Much for Essential Information that I was Seeking on the Internet.
Highly Appreciated.
WPBeginner Support
Glad our article could be helpful to you.
管理者
Dan
My current theme has social media icons on the main top header in the desktop version, but when switched to mobile version the social icons are gone. how can I get them to stay and possibly my header links also?
WPBeginner Support
Hi Dan,
It seems like your theme hides them on the mobile version. Please contact your theme author and they will be able to help you with this.
管理者
David Cornish
Thanks for the advice, I use Simple Social Icons now and I like them very much. Any advice on what plugin to use to display a “share on twitter” or “share on facebook” button above and/or below a post, similar to what you have under the title of this article?
WPBeginner Support
Hi David,
Please see our list of the best social media plugins for WordPress.
管理者
Rob Lilley
Is there a way to add a target attribute, so the social page opens in a new tab/window?
Editorial Staff
Yes, you can easily open the links in a new window. If you’re not seeing the option in your Custom Links by default, then you will have to click on the “Screen Options” tab on the top right of the screen and make sure that “Link Target” option is checked.
管理者
Umarbhatti
Hi,
This plugin looks awesome. Thanks!
Aman Singh
Hello,
Can I get the custom code for the widget to look similar to what it is on WPbeginner?
I like the widget look for social media icons on WPBeginner so can I get the code.
Thank you.
WPBeginner Support
Hi Aman,
You can just use your browser’s Inspect tool to copy the HTML code and CSS.
管理者