WordPressのカスタムソーシャルメディアアイコンをサイトに追加したいですか？適切なツールを使えば、Threads、Mastodon、Blueskyのような新しいプラットフォームであっても、ヘッダー、フッター、サイドバー、ランディングページにフォローボタンを設置することができます。
このガイドでは、SeedProdを使った私のお気に入りの方法を含む3つの簡単な方法を紹介します。
なぜWordPressサイトにソーシャルメディア・アイコンを追加するのか？
ソーシャルメディアのアイコンは、訪問者が他のプラットフォームであなたをフォローするのを容易にします。人々は1日平均2時間21分をソーシャルメディアに費やしているため、アイコンを追加することで、彼らがすでに活動している場所にアクセスすることができます。
さらに、ソーシャルメディアのアイコンは小さいので、ウェブサイトのさまざまな場所に表示することができる：
- ワードプレスのメニュー
- ワードプレスのヘッダー
- ワードプレスのフッター
- ワードプレスのウィジェットエリア
- ワードプレスのページ/投稿
- WooCommerce製品
以下は、WPBeginnerがWordPressのサイドバーにソーシャルメディアリンクを表示する方法のスクリーンショットです。
ソーシャルメディアアイコンをサイトに追加する際、ソーシャルメディアフォローボタンはソーシャルシェアボタンやソーシャルシェアリングアイコンとは異なることを覚えておくと便利です。ユーザーにコンテンツの共有を求めるのではなく、訪問者にあなたのソーシャルメディア・プロフィールをフォローすることを促します。
それでは、あなたのサイトにカスタムソーシャルメディアのフォローアイコンを追加する方法を見ていきましょう。
WordPressのカスタムソーシャルメディアアイコンを追加する方法：2つの方法
先に述べたように、多くの一般的なWordPressプラグインには、ウェブサイトにカスタムソーシャルメディアアイコンを追加する機能が含まれていません。多くの場合、Facebook、Twitter、Instagram、YouTube、LinkedIn、Pinterestのような主要なソーシャル・プラットフォームに制限されます。
もしあなたのオーディエンスがよりニッチなソーシャルサイトで活動しているなら、あなたのニーズに応えるプラグインを見つけるのに苦労するかもしれません。それを念頭に置いて、あなたのウェブサイトにカスタムソーシャルメディアアイコンを追加する2つの簡単な方法を以下に紹介します。
- 1.SeedProdでWordPressソーシャルメディアアイコンを追加する
- 2.WordPress内蔵のソーシャルアイコン・ブロックを使う
- WordPressにソーシャルメディア・アイコンを追加する際のFAQ
1.SeedProdでWordPressソーシャルメディアアイコンを追加する
サイト上のどこにでもカスタムアイコンを追加する最も簡単な方法は、SeedProdを使用することです。
SeedProdは、コードを触ることなくヘッダー、フッター、サイドバー、ランディングページをデザインできるドラッグ＆ドロップ式のWordPressビルダーです。ソーシャルプロファイルブロックにより、Threads、Mastodon、Blueskyのような新しいプラットフォームを含む、あらゆるネットワークのアイコンを簡単に追加し、カスタマイズすることができます。
ステップ1.SeedProdのインストールとアクティベート
まず、SeedProdの価格ページにアクセスし、プランを選択し、アカウントを作成します。このガイドでは、高度な機能を持つSeedProd Proを使用します。
次に、アカウントダッシュボードにログインし、ダウンロードタブにアクセスします。そこからプラグインのzipファイルをダウンロードし、ライセンスキーをコピーすることができます。
WordPressの管理エリアに移動し、SeedProdプラグインをアップロードします。このステップで助けが必要な場合は、WordPressプラグインのインストールと有効化に関するこちらのガイドに従ってください。
プラグインを有効化したら、SeedProd " Settingsに行き、先ほどコピーしたライセンスキーを貼り付けます。Verify Keyボタンをクリックして設定を保存し、次のステップに進んでください。
ステップ2.WordPressテーマまたはランディングページを作成する
次のステップは、ランディングページまたはWordPressテーマのデザインを作成することですが、これはステップ1で選択したSeedProdライセンスによって異なります。
ベーシックとプラスのユーザーはSeedProdでランディングページを作成でき、プラスとエリートのユーザーはこのプラグインでランディングページと WordPressテーマを作成できます。
これらのチュートリアルの手順に従って、SeedProdデザインを構築してください：
ランディングページまたはWordPressテーマを作成したら、ステップ3に進み、WordPressのカスタムソーシャルメディアアイコンを追加します。
ステップ3.WordPressにカスタムソーシャルメディアアイコンを追加する
SeedProdは、その簡単で強力なテーマビルダーでWordPressのどこにでもカスタムソーシャルメディアアイコンを追加することができます。ウェブサイトキットを選択した後、各テーマパーツを開き、ソーシャルプロフィールブロックを追加するだけです。
WordPressのヘッダーにソーシャルメディアのアイコンを追加する
WordPressのメニューにソーシャル・プロフィールのアイコンを追加することから始めましょう。これを行うには、SeedProd " Theme Builderに行き、 Headerテンプレートにカーソルを合わせ、Edit Designボタンをクリックします。
次の画面では、このように2カラムのレイアウトが表示されます：
デフォルトでは、私たちが使用しているテンプレートは、ロゴとナビゲーションメニューを持つ2列のヘッダーを持っています。ソーシャル・プロフィールのアイコンを追加するには、3カラムのセクションに変更する必要があります。
まず、ヘッダーセクションにカーソルを合わせ、紫色のアウトラインが表示されるまでクリックします。 セクションの複製アイコンをクリックする。
新しいセクションで、青い枠がつくまで内容にカーソルを合わせ、ゴミ箱アイコンをクリックして削除する。
その後、3カラムレイアウトオプションをクリックして、新しいセクションに追加します。
次に、古いセクションの要素をドラッグ＆ドロップで新しいセクションに移動します。
完了したら、ソーシャル・プロフィールのアイコンを追加できる空の列が1つ残っているはずです。その前に、もう一度古いセクションにカーソルを合わせ、ゴミ箱アイコンをクリックして削除してください。
カスタムソーシャルプロフィールをヘッダーに追加するには、左側のサイドバーからソーシャルプロフィールブロックを見つけ、空のカラムにドラッグします。ブロックをクリックすると、カスタマイズオプションが表示されます。
デフォルトでは、ソーシャル・プロフィール・ブロックには、Facebook、Twitter、Instagram、YouTubeのアイコンが表示されます。各アイコンをクリックし、ドロップダウンメニューからソーシャルメディア・ネットワークを選択することで、アイコンを変更することができます。
選べるプラットフォームは以下の通り：
- ディスコード
- 電子メール
- フェイスブック
- フェイスブックメッセンジャー
- ギットハブ
- IMDB
- インスタグラム
- ミディアム
- 電話
- ピンタレスト
- RSS
- スラック
- スナップチャット
- サウンドクラウド
- テレグラム
- ティックトック
- ツイッター
- ヴィデオ
- 微博
- ワードプレス
- ユーチューブ
- カスタム
カスタムソーシャルメディアプロフィールボタンを追加するには、カスタムオプションと歯車アイコンをクリックして設定を開きます。
次に、Choose Iconオプションをクリックし、Font Awesomeを使用して、ソーシャルメディアのニーズに合った別のアイコンを検索します。例えば、Spotify、Skype、Tumblr、Behance、Airbnb、Audible、Playstationなどのカスタムソーシャルアイコンを追加できます。
カスタムソーシャルプロフィールアイコンを選択した後、アイコンの色を変更し、カスタムリンクを追加することができます。
設定パネルのさらに下には、アイコンのスタイル、サイズ、配置を変更するオプションがあります。
Templatesタブでは、1クリックでアイコンにカスタムスタイルを追加できます。
詳細設定]タブでは、アイコンのスタイルを細かいレベルでカスタマイズする設定ができます。例えば、アイコンの背景色、サイズ、スペース、シャドウ、マージン、パディングを変更できます。
また、ソーシャル・プロフィールのアイコンをモバイルやデスクトップ・デバイスに表示したり、非表示にしたりすることもでき、スマートフォンやタブレットを使用している訪問者のモバイル最適化を改善する優れた方法です。
変更を保存する前に、ソーシャル・プロフィール・ブロックにカーソルを合わせ、保存アイコンをクリックしてください。これにより、ソーシャルリンクやカスタムアイコンを手動で追加することなく、ウェブサイトの他のエリアで再利用することができます。
ポップアップウィンドウで、ブロックに「カスタムソーシャルアイコン」などの名前を付けて保存します。
WordPressのソーシャルメディア・アイコンが完成したら、画面右上の「保存」ボタンをクリックします。
では、ソーシャルメディアのアイコンをウェブサイトのフッターに追加しましょう。
WordPressのフッターにソーシャルメディアのアイコンを追加する
フッターにソーシャルアイコンを追加するには、SeedProdテーマビルダーダッシュボードに行き、フッターテンプレートにカーソルを合わせ、デザイン編集リンクをクリックします。
次に、左サイドバーのSaved Blocksを開き、最後のステップで保存したカスタムソーシャルアイコンブロックをフッターエリアのカラムにドラッグします。
WordPressのフッターとアイコンの背景色が似ている場合は、[詳細設定]タブをクリックし、カラーピッカーで新しいアイコンの色を選択できます。
すべてが適切に見えたら、Saveボタンをクリックして変更を保存します。
WordPressのサイドバーにソーシャルメディアのアイコンを追加する
WordPressのサイドバーにカスタムソーシャルアイコンを追加するには、テーマビルダーダッシュボードに戻り、サイドバーテンプレートにカーソルを合わせ、デザインの編集リンクをクリックします。
前の手順と同じことを繰り返し、終わったら「保存」ボタンをクリックします。
また、ランディングページやコンテンツページ（会社概要、サービス、お問い合わせページなど）も含め、ウェブサイト上のどのページでもこのプロセスを繰り返すことができます。
ステップ 4.変更を公開する
最後のステップは、新しいWordPressテーマを公開し、ウェブサイトの訪問者が新しいソーシャルメディア・プロフィールのアイコンを見ることができるようにすることです。そのためには、Theme Builderダッシュボードに行き、Enable SeedProd Themeトグルを「Yes」の位置にします。
これで変更点を確認することができます。以下はこのチュートリアルのいくつかの例です：
ヘッダー
フッター
サイドバー
2.WordPress内蔵のソーシャルアイコン・ブロックを使う
WordPress 5.4以降をお使いの方は、すでにソーシャルアイコンブロックをご利用いただけます。これは、他のプラグインをインストールせずにアイコンを追加する最速の方法です。
まず、外観 " エディター（サイト全体を編集する場合）、またはアイコンを表示したいページや記事を編集します。
ボタンをクリックし、「ソーシャルアイコン」を検索してブロックを挿入する。
ブロック内の＋追加アイコンをクリックします。Facebook、Instagram、LinkedIn、X（Twitter）などのビルトインネットワークのリストが表示されます。必要なものを選択してください。
各アイコンには、あなたのプロフィールURLを入力する欄があります。リンクを貼り付ければ、すぐに接続できます。
このブロックにはいくつか欠けているプラットフォームがあることがわかります。利用できないものについては、SeedProdのようなカスタムアイコンをサポートするプラグインが必要です。
WordPressにソーシャルメディア・アイコンを追加する際のFAQ
この記事が、あなたのビジネスウェブサイトにWordPressのカスタムソーシャルメディアアイコンを追加する方法を学ぶのにお役に立てば幸いです。
当ブログの他のお役立ちガイドも気に入っていただけるかもしれません：
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
