Diviのプライマリメニューにソーシャルアイコンを追加する方法

公開: 2017-06-27

今日のDiviチュートリアルでは、DiviWebサイトのプライマリメニューにソーシャルアイコンを追加する方法を紹介します。このチュートリアルをステップバイステップで実行することにより、自分用であろうとクライアント用であろうと、作成したWebサイトにソーシャルアイコンを追加できます。

Diviテーマカスタマイザーを使用して、ソーシャルアイコンをWebサイトのヘッダーとフッターに直接追加する機能はすでにあります。しかし、それがあなたが探しているものではない場合、多くの場合、このチュートリアルはあなたを助けるかもしれません。人々は、ウェブサイトのヘッダーやフッターではなく、プライマリメニューにソーシャルアイコンを表示することを好みます。

それらを追加する方法、カスタマイズする方法、新しいタブで開く方法を正確に説明します。これらはすべて、プライマリメニューのソーシャルアイコンがWebサイト全体に付加価値をもたらすために本当に知っておく必要のあることです。

プライマリメニューにソーシャルアイコンを追加する理由

多くの場合、ウェブサイトとソーシャルメディアチャネルは補完的です。 Webサイトで共有されているすべてのコンテンツがソーシャルメディアチャネルに表示されるわけではなく、その逆も同様です。だからこそ、あなたのソーシャルメディアチャンネルであなたのウェブサイトを宣伝し、あなたのウェブサイトであなたのソーシャルメディアチャンネルを宣伝することは珍しくなく率直です。強くお勧めします。

あなたは人々があなたの会社やブランドと彼らが最もよく知っている方法で相互作用することを望んでいます。あなたのウェブサイトは通常彼らにとって「未知の領域」です。したがって、Webサイトを介して直接連絡することの障壁は、ソーシャルメディアチャネルの場合よりも大きくなる可能性があります。 FacebookページまたはTwitterページにアクセスするほとんどの人は、すでにプラットフォームに統合されており、快適な感覚が彼らの行動にプラスの影響を与える可能性があります。

そのため、全体として、ソーシャルアイコンをWebサイトに配置することをお勧めします。しかし、なぜそれらをプライマリメニューで明示的に共有するのでしょうか。主な理由を2つ挙げました。

見つけやすい/メニューは訪問中に訪問者をフォローします

Webサイトにソーシャルアイコンを追加するときは、それらをできるだけ表示できるようにする必要があります。人々はあなたのウェブサイト上のソーシャルアイコンを見つけるために努力する必要はありません。そこで、メインメニューにソーシャルアイコンを配置することで違いを生むことができます。プライマリメニューは、Webサイトでの滞在中ずっと人をフォローします。アイコンを見に行く必要はありません、アイコンはあなたに来ます。人がしなければならない唯一のことはクリックすることであり、彼らはそこに着くでしょう。

プライマリメニューは、Webサイトでの滞在中ずっと人をフォローします。アイコンを探しに行く必要はありません、アイコンはあなたに来ます。訪問者がしなければならない唯一のことはそれらをクリックすることであり、彼らはそこに着きます。

トリガーアクション

前に述べたように; ソーシャルメディアチャネルとウェブサイトは補完的です。彼らは協力し、通常、潜在的なリードに情報を提供し、提供されているサービスや製品にそれらを引き付けるなど、同じ目標を持っています。彼らが彼らに直面すればするほど、彼らの好奇心が引き起こされる可能性が高くなります

ウェブサイトとソーシャルメディアチャネル間の接続をサポートするために、できるだけ頻繁にソーシャルアイコンで訪問者に立ち向かうのは良いことです。彼らが彼らに直面すればするほど、彼らの好奇心が引き起こされる可能性が高くなり、最終的に彼らが彼らをクリックする可能性が高くなります。

Diviのプライマリメニューにソーシャルアイコンを追加する方法

私たちのYoutubeチャンネルを購読する

FontAwesomeをインストールする

まず、WordPressのWebサイトにFontAwesomeをインストールする必要があります。これを行うには、DiviのテーマオプションにCSSコードを追加します。

WordPress Webサイトを開き、 [Divi]> [テーマオプション]> [統合]に移動して、次のコードを<head>セクションに貼り付けます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

これで、Webサイトで使用されているフォントに素晴らしいフォントが追加されます。投稿の次の部分をステップバイステップで実行することで、これらのアイコンをプライマリメニューに追加できるようになりました。

プライマリメニューの作成を開始します

おそらく、Webサイトのプライマリメニューに表示するすべてのページをリストした、独自のカスタマイズされたプライマリメニューをすでに作成しているはずです。まだ行っていない場合は、[外観]内の[メニュー]ページに移動して、新しいメニューを作成します。

次に、メニューに名前を付け、プライマリメニューに表示するページを追加して、下の[プライマリメニュー]オプションを選択します。

ソーシャルアイコンを追加する

次に、ソーシャルアイコンを追加します。プライマリメニューを作成するときに、ソーシャルアイコンを表示する場所を選択できます。ほとんどの場合、ページの直後に表示されますが、最初に配置することもできます。そこにあるすべての重要で最も人気のあるウェブサイトで利用可能なソーシャルメディアアイコンがあります。 FacebookからTwitter、Instagram、LinkedInなどへ。

Font AwesomeWebサイトで次のリンクを開くことから始めます。この投稿の次の部分では、アイコンを手動で追加するために、このWebサイトが必要になります。

アイコンを手動で追加する

プライマリメニューに追加する各ソーシャルアイコンにも同じ作業方法が適用されます。例として、Instagramアイコンを追加する方法を紹介します。追加したい他のすべてのアイコンについても同様です。同じ作業方法であることを知ってください（アイコン、HTMLコード、およびURLのみがそれに応じて異なります）。

[カスタムリンク]オプションを開くと、URLとナビゲーションラベルの2つのフィールドが表示されます。明らかに、URLフィールドは、訪問者をソーシャルメディアチャネルの1つに導くURLを入力する場所です。この例では、アイコンをInstagramに誘導したいので、InstagramのURLを入力するだけです。

次に、ブラウザでFont Awesome Webサイトにアクセスし、検索バーからInstagramアイコンを探します。同様に、Facebook、LinkedIn、その他のアイコンを検索できます。

Instagramアイコンをクリックすると、Webサイトが次のHTMLコードを提供していることがわかります。

<i class="fa fa-instagram" aria-hidden="true"></i>

これは、[ナビゲーションラベル]フィールドで使用する必要がある正確なコードです。コードをコピーしてフィールドに貼り付けることにより、カスタムリンクを完成させてください。

メインメニューに表示するソーシャルアイコンごとに同じプロセスを繰り返し、Webサイトのフロントエンドでどのように表示されるかを確認します。

ソーシャルアイコンの外観を変更する

プライマリメニューへの一括変更（ソーシャルアイコンを含む）

テーマカスタマイザを使用すると、プライマリメニューに加えたいすべての外観変更を1か所で行うことができます。

Diviオプションを使用してプライマリメニューに加えることができる変更は、ソーシャルアイコンにも適用されます。たとえば、メインメニューに特定の色を付けると、ソーシャルアイコンは同じ色になります。これは、これを機能させるために画像の代わりにフォントを使用しているためです。

[ヘッダーとナビゲーション]> [プライマリメニューバー]に移動して、テーマカスタマイザーの外観に必要なこれらすべての変更を加えることができます。 行った変更はリアルタイムで適用され、メインメニューをどのように表示するかについての良い見通しを提供します。

新しいタブでソーシャルアイコンを開く

投稿のこの部分は、ソーシャルアイコンを使用して実行できる追加の機能です。訪問者がソーシャルメディアチャネルにアクセスしている場合でも、訪問者をWebサイトから遠ざけたくないでしょう。誰かがクリックするたびにソーシャルメディアのリンクを新しいタブに開くことで、両方のインタラクションをできるだけ長く存続させたいと考えています。

以前に作成したメニューに戻ることで、すべてのソーシャルメディアアイコンで[新しいタブで開く]オプションを簡単に機能させることができます。各アイコンに対して手動ですべての調整を行う必要があります。この例では、Instagramアイコンに変更を加えます。

先に進み、URLフィールドに指定したURLを削除し、代わりに次のコードをナビゲーションURLに貼り付けます。

<a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>

アイコンを新しいタブで開く場合は、各アイコンに対して同じことを行います。訪問者がそれらをクリックするたびに、それらは新しいタブで開き、訪問者をできるだけ長く保つことができます。

最終的な考え

このチュートリアルは、ソーシャルアイコンを自分のDiviWebサイトに希望どおりに統合するのに役立ちます。それらをカスタマイズして、他のプライマリメニューに合わせることができます。質問や提案がある場合; 下のコメントセクションにコメントを残してください。私たちは連絡を取り合い、あなたが持っているすべての質問や提案に答えようとします。

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

Oceans /shutterstock.com経由の注目の画像