カスタム WordPress ソーシャルメディアアイコンを Web サイトに追加する方法 (2 つの方法)

公開: 2022-09-29

カスタムの WordPress ソーシャルメディアアイコンを Web サイトに追加する方法を学びたいですか?

ソーシャルメディアアイコンを WordPress に効果的に追加すると、訪問者にあなたのソーシャルメディアアカウントについて知らせ、フォローを促すことができます。ほとんどのソーシャルメディアプラグインは主要なソーシャルメディアプラットフォーム用のアイコンを提供しますが、それらのプラグインがサポートしていないソーシャルメディアページにリンクしたい場合、途方に暮れる可能性があります。

この記事では、カスタムソーシャルメディアボタンを WordPress に簡単に追加して、ユーザーをよりニッチなソーシャルネットワークに誘導する方法を紹介します。

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

WordPress ウェブサイトにソーシャルメディアアイコンを追加すると、ウェブサイトの訪問者が他のプラットフォームであなたを見つけやすくなります。人々が 1 日に平均2 時間 27 分間ソーシャルメディアを利用していることを考えると、ウェブサイトの外に存在感を示すことは、ターゲットユーザーと交流するための賢明な方法です。

さらに、ソーシャルメディアのアイコンは小さいため、Web サイトのさまざまな場所に表示できます。

WordPress メニュー
WordPress ヘッダー
WordPress フッター
WordPress ウィジェットエリア
WordPress ページ/投稿
ウーコマース製品

これは、WPBeginner が WordPress サイドバーにソーシャルメディアリンクを表示する方法のスクリーンショットです。

WPBeginner サイドバーの WordPress ソーシャルメディアアイコン

サイトにソーシャルメディアアイコンを追加する場合、ソーシャルメディアのフォローボタンは、ソーシャル共有ボタンやソーシャル共有アイコンとは異なることに注意してください。ユーザーにコンテンツを共有するよう求める代わりに、訪問者にあなたのソーシャルメディアプロファイルをフォローするよう促します。

そうは言っても、カスタムソーシャルメディアのフォローアイコンをサイトに追加する方法を見てみましょう。

カスタム WordPress ソーシャルメディアアイコンを追加する方法: 2 つの方法

前述したように、多くの一般的な WordPress プラグインには、カスタムソーシャルメディアアイコンを Web サイトに追加する機能が含まれていません。多くの場合、Facebook、Twitter、Instagram、YouTube、LinkedIn、Pinterest などの主要なソーシャルプラットフォームに制限されています。

視聴者がよりニッチなソーシャル Web サイトで活動している場合、ニーズを満たすプラグインを見つけるのに苦労するかもしれません. それを念頭に置いて、カスタムソーシャルメディアアイコンをウェブサイトに追加する2つの簡単な方法を以下で共有します.

1. SeedProd で WordPress ソーシャルメディアアイコンを追加する
- ステップ 1. SeedProd をインストールしてアクティブ化する
- ステップ 2. WordPress のテーマまたはランディングページを作成する
- ステップ 3. カスタムソーシャルメディアアイコンを WordPress に追加する
- ステップ 4. 変更を公開する
2. シンプルなソーシャルアイコンウィジェットの使用

1. SeedProd で WordPress ソーシャルメディアアイコンを追加する

最初の方法では、SeedProd を使用してカスタムソーシャルアイコンを Web サイトに追加します。

SeedProd は、コードを記述せずにカスタム WordPress テーマとランディングページを作成できる最高の WordPress ウェブサイトビルダーです。何百もの既製のテンプレート、ドラッグアンドドロップビルダー、およびカスタマイズ可能なブロックとセクションにより、SeedProd を使用して WordPress のデザインを完成させるのは簡単です。

このメソッドでは、SeedProd の Social Profiles ブロックを使用して、カスタムソーシャルアイコンを Web サイトに追加します。このブロックは設定が簡単で、カスタム CSS、HTML、または PHP を必要とせず、ショートコードの代わりにビジュアル編集を使用します。

このプラグインを使用して、次のこともできます。

メールリストを増やす
近日公開ページを作成する
WordPressをメンテナンスモードにする
コンバージョンにつながるランディングページを作成する
カスタム 404 ページを表示する
カスタム WordPress ログインページを作成する
そして、はるかに

以下の手順に従って、SeedProd を使用して WordPress ソーシャルメディアアイコンを追加します。

ステップ 1. SeedProd をインストールしてアクティブ化する

まず、SeedProd の価格ページにアクセスし、プランを選択して、アカウントを作成します。このガイドでは、高度な機能のために SeedProd Pro を使用しています。

次に、アカウントダッシュボードにログインし、[ダウンロード] タブにアクセスします。そこから、プラグインの zip ファイルをダウンロードして、ライセンスキーをコピーできます。

WordPress の管理エリアに移動し、SeedProd プラグインをアップロードします。この手順でサポートが必要な場合は、WordPress プラグインのインストールと有効化に関するこのガイドに従ってください。

プラグインを有効化したら、 SeedProd » Settingsに移動し、先ほどコピーしたライセンスキーを貼り付けます。 [ Verify Key ] ボタンをクリックして設定を保存し、次の手順に進みます。

ステップ 2. WordPress のテーマまたはランディングページを作成する

次のステップは、ランディングページまたは WordPress テーマデザインを作成することです。ただし、これはステップ 1 で選択した SeedProd ライセンスによって異なります。

Basic および Plus ユーザーは SeedProd を使用してランディングページを作成できますが、Plus および Elite ユーザーはこのプラグインを使用してランディングページとWordPress テーマを作成できます。

これらのチュートリアルの手順に従って、SeedProd デザインを構築します。

カスタム WordPress テーマを作成する方法
WordPressでランディングページを作成する方法

ランディングページまたは WordPress テーマを作成したら、手順 3 に進み、カスタムの WordPress ソーシャルメディアアイコンを追加します。

ステップ 3. カスタムソーシャルメディアアイコンを WordPress に追加する

SeedProd では、簡単で強力な Theme Builder を使用して、WordPress のどこにでもカスタムソーシャルメディアアイコンを追加できます。 Web サイトキットを選択したら、各テーマパーツを開いてソーシャルプロファイルブロックを追加するだけです。

WordPress ヘッダーにソーシャルメディアアイコンを追加する

WordPress メニューにソーシャルプロフィールアイコンを追加することから始めましょう。これを行うには、 SeedProd » Theme Builder に移動し、ヘッダーテンプレートにカーソルを合わせて、[デザインの編集] ボタンをクリックします。

次の画面では、次のような 2 列のレイアウトが表示されます。

デフォルトでは、使用しているテンプレートには、ロゴとナビゲーションメニューを含む 2 列のヘッダーがあります。ソーシャルプロフィールアイコンを追加するには、3 列のセクションに変更する必要があります。

まず、ヘッダーセクションにカーソルを合わせて紫色のアウトラインを表示し、セクションの複製アイコンをクリックします。

次に、新しいセクションで、青い枠線が表示されるまでコンテンツにカーソルを合わせ、[ごみ箱] アイコンをクリックして削除します。

その後、 3 列のレイアウトオプションをクリックして、新しいセクションに追加します。

次に、要素をドラッグアンドドロップして、古いセクションから新しいセクションに移動します。

完了すると、ソーシャルプロフィールアイコンを追加できる空の列が 1 つ残っているはずです。その前に、もう一度古いセクションにカーソルを合わせ、ゴミ箱アイコンをクリックして削除します。

カスタムソーシャルプロファイルをヘッダーに追加するには、左側のサイドバーからソーシャルプロファイルブロックを見つけて、空の列にドラッグします。これで、ブロックをクリックしてカスタマイズオプションを表示できます。

デフォルトでは、ソーシャルプロフィールブロックには Facebook、Twitter、Instagram、YouTube のアイコンが表示されます。各アイコンをクリックし、ドロップダウンメニューからソーシャルメディアネットワークを選択すると、アイコンを変更できます。

選択できるプラットフォームは次のとおりです。

不和
Eメール
フェイスブック
Facebookメッセンジャー
GitHub
IMDB
インスタグラム
リンクトイン
中くらい
電話
ピンタレスト
RSS
スラック
スナップチャット
サウンドクラウド
電報
チクタク
ツイッター
ヴィメオ
微博
ワッツアップ
ワードプレス
ユーチューブ
カスタム

カスタムソーシャルメディアプロファイルボタンを追加するには、[カスタム] オプションと歯車アイコンをクリックして設定を開きます。

次に、[アイコンを選択] オプションをクリックし、Font Awesome を使用して、ソーシャルメディアのニーズに合った別のアイコンを検索します。たとえば、Spotify、Skype、Tumblr、Behance、Airbnb、Audible、Playstation などのカスタムソーシャルアイコンを追加できます。

カスタムソーシャルプロフィールアイコンを選択したら、アイコンの色を変更し、カスタムリンクを追加できます。

設定パネルのさらに下には、アイコンのスタイル、サイズ、配置を変更するオプションがあります。

[テンプレート] タブでは、1 クリックでカスタムスタイルをアイコンに追加できます。

[詳細設定] タブには、アイコンスタイルを詳細なレベルでカスタマイズするための設定が用意されています。たとえば、アイコンの背景色、サイズ、スペース、影、余白、パディングを変更できます。

また、モバイルデバイスまたはデスクトップデバイスでソーシャルプロフィールアイコンを表示または非表示にすることもできます。これは、スマートフォンまたはタブレットを使用している訪問者のモバイル最適化を改善する優れた方法です。

変更を保存する前に、ソーシャルプロフィールブロックにカーソルを合わせて [保存] アイコンをクリックします。これにより、各ソーシャルリンクやカスタムアイコンを手動で再度追加しなくても、Web サイトの他の領域で再利用できるようになります。

ポップアップウィンドウで、ブロックに「Custom Social Icons」などの名前を付けて保存します。

WordPress ソーシャルメディアアイコンに満足したら、画面の右上にある [保存] ボタンをクリックします。

それでは、ソーシャルメディアのアイコンを Web サイトのフッターに追加しましょう。

WordPress フッターにソーシャルメディアアイコンを追加する

フッターにソーシャルアイコンを追加するには、SeedProd テーマビルダーダッシュボードに移動し、フッターテンプレートにカーソルを合わせて、[デザインの編集] リンクをクリックします。

次に、左側のサイドバーの[保存されたブロック] 見出しを開き、最後の手順で保存したカスタムソーシャルアイコンブロックをフッター領域の列にドラッグします。

WordPress フッターの背景色がアイコンと似ている場合は、[詳細設定] タブをクリックして、カラーピッカーで新しいアイコンの色を選択できます。

すべてが適切に見えたら、[保存] ボタンをクリックして変更を保存します。

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

カスタムソーシャルアイコンを WordPress サイドバーに追加するには、テーマビルダーダッシュボードに戻り、サイドバーテンプレートにカーソルを合わせて、[デザインの編集] リンクをクリックします。

前の手順の手順を繰り返し、完了したら [保存] ボタンをクリックします。

ランディングページやコンテンツページ (概要、サービス、連絡先ページなど) を含む、Web サイトの任意のページに対してこのプロセスを繰り返すこともできます。

ステップ 4. 変更を公開する

最後のステップは、新しい WordPress テーマを公開して、Web サイトの訪問者が新しいソーシャルメディアのプロフィールアイコンを確認できるようにすることです。これを行うには、テーマビルダーダッシュボードに移動し、 [SeedProd テーマを有効にする] トグルを [はい] の位置に切り替えます。