アンカーリンクを使用してDiviでできる5つのクールなこと

公開: 2018-10-21

アンカーリンクは、ナビゲーションを改善し、特に長い形式のコンテンツを含むWebサイトでコンテンツを整理するのに役立ちます。ナビゲーション以外のアンカーリンクを使用する他の主な利点の1つは、SEOに最適であるという事実です。アンカーリンクを使用するという概念は非常に単純ですが、どこから始めればよいかわからない場合があります。これは、WordPressWebサイトの開発を始めたときに最初に探しに行ったものの1つです。

この記事では、アンカーリンクを使用してDiviで実行できる5つの優れた機能を紹介します。これらの例では、必要なのはDiviと学びたいという願望だけです。

さあ行こう！

次の方法を学習します。

スクロールして、Diviのアンカーリンクでトグルを開きます
1ページのナビゲーションメニューを作成する
別のページからページセクションにジャンプする
Diviドットナビゲーションを使用する
見出しにアンカーリンクを追加する

アンカーリンクを使用してDiviでできる5つのクールなこと

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

スクロールして、Diviのアンカーリンクでトグルを開きます

アンカーリンクを使用してDiviでできる5つのクールなこと

トグルは、ユーザーエクスペリエンスを向上させる要素の1つです。私を怠惰と呼んでください（私は効率的な言葉を使用します）が、私の情報を取得するのは簡単であるほど良いです。私は特定の種類のコンテンツのトグルの大ファンです。

トグルの最も良い使用法の1つは、FAQページです。これらは、ユーザーが注目したい小さな情報を明らかにするのに最適です。これは、JavaScriptの1分と数行で完了します。この方法のバリエーションを使用してタブやアコーディオンを開くこともできます。これは難しいように見えるかもしれませんが、実際にはそれほど複雑ではありません。

まず、新しいページを作成し、ビジュアルビルダーを展開します。次に、「既成のレイアウトを選択」オプションを選択します。 [ライブラリからロード]ポップアップで、検索バーに「faq」と入力して、AccountantFAQページのレイアウトを見つけます。次に、レイアウトをクリックし、表示されるプレビューで、[このレイアウトを使用]ボタンをクリックしてページに展開します。

これで、アンカーリンク機能を追加する準備が整いました。この例では、上部ヘッダーセクションのボタンをアンカーリンクとして使用して、クリックするとページが特定のトグルにスクロールし、同時に自動的に開くようにします。

これを行うには、最初にボタン設定を開き、ボタンに次のリンクURLを追加します。

ボタンリンクURL：＃toggle3

このアンカーリンクにID「toggle3」を付けて、ページの3番目のトグルにリンクしたいことを思い出せるようにしました。このID名は、後で追加するトグルCSS IDと相関関係があるため、ボタンはスクロールするトグルを認識します。

アンカーリンクを使用してDiviでできる5つのクールなこと

次に、ボタンモジュールに一意のCSSクラスを追加します。

CSSクラス：オープントグル

次に、設定を保存します。

このクラス名は、ボタンをクリックしたときに開くトグルのアクションを思い出させるのに役立ちます。カスタムjqeuryでこのクラスを使用して、必要な機能を少しで取得します。

次に、FAQに使用されているトグルモジュールの2つの列を含む行までページを下にスクロールします。最初の列の3番目のトグルモジュールの設定を開きます。これは、ボタン（またはアンカーリンク）をクリックしたときにスクロールして開くモジュールです。

[詳細設定]タブで、次のCSSIDを追加します。

CSS ID：toggle3

これが以前に使用されたボタンリンクURLと正確に相関していることが重要です。ここでの唯一の違いは、「＃」を省略しなければならないことです。

アンカーリンクを使用してDiviでできる5つのクールなこと

最後のステップでは、ページの本文にカスタムコードを追加します。これを行うには、Diviテーマオプションに移動し、[統合]タブを開いて、下のGIFに示すように、以下を本文セクションに貼り付けます。

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

コードを適切なスクリプトタグでラップすることを忘れないでください。

アンカーリンクを使用してDiviでできる5つのクールなこと

これで、ページをテストして、機能するかどうかを確認できます。

アンカーリンクを使用してDiviでできる5つのクールなこと

このコードが何をしているのかを少し理解する。よく見てみましょう。再びスニペットがあります：

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

コードでは、セレクター「a.open-toggle」はカスタムクラスのボタンを参照しています。セレクター「＃toggle3.et_pb_toggle_2.et_pb_toggle_title」は、IDが「toggle3」でクラスが「et_pb_toggle_2」のトグルのタイトルを参照します。

クラス「et_pb_toggle_2」は、実際には3番目のトグルに関連付けられているクラスです。これは、Diviが最初のトグルにクラス「et-pb_toggle_0」、2番目のトグルに「et-pb_toggle_1」というように与えるためです。

したがって、ページの特定のトグルのクラスが何であるかを知りたい場合は、ページの最初のトグルから始めて0から数え、下に向かって進むことができます。または、いつでもhtmlコードを調べて、その方法でクラスを見つけることができます。

それに応じてコードを更新できるように、これを知っておくことが重要です。たとえば、ボタンでページの2番目のトグルを開きたい場合は、「＃toggle3.et_pb_toggle_2 .et_pb_toggle_title」を「＃toggle3.et_pb_toggle_1.et_pb_toggle_title」に置き換えます。

このコードスニペットは、次の概念のバリエーションです。できるだけシンプルにしようと思いました。

このクールなテクニックは、タブやアコーディオンでも機能します。秘訣は、コードで使用できるように、アコーディオンアイテムまたはタブに適切なcssクラスを特定することです。

1ページのナビゲーションメニューを作成する

アンカーリンクを使用してDiviでできる5つのクールなこと

この種のメニューデザインは、1ページのサイトで人気があります。メニューにリンクを作成して、ページのセクション間をジャンプすると便利な場合があります。これは、1ページのサイトまたはランディングページを構築している場合に特に役立ちます。このプロセスの詳細については、Diviを使用して1ページのWebサイトを作成する方法に関するドキュメントを確認してください。

これを行う方法の概要は次のとおりです。

これは、事前に作成されたレイアウトで機能しますが、この例では、Webフリーランサーのホームページレイアウトを使用します。新しいページを作成し、ビジュアルビルダーを展開し、[既成のレイアウトを選択]を選択してから、フリーランサーのホームページレイアウトをページに展開します。

アンカーリンクを使用してDiviでできる5つのクールなこと

次に、リンク（またはスクロール）する各セクションにCSSIDを追加する必要があります。「マイサービス」というタイトルのセクションを見つけます。セクション設定を開き、[詳細設定]タブをクリックして、次のCSSIDを追加します。

CSS ID：サービス

アンカーリンクを使用してDiviでできる5つのクールなこと

次に、「注目の作品」セクションを見つけて、そのセクションに次のようにCSSIDを付けます。

CSS ID：仕事

アンカーリンクを使用してDiviでできる5つのクールなこと

また、次のCSSIDを「AboutUs」セクションにも追加します。

CSS ID：約

アンカーリンクを使用してDiviでできる5つのクールなこと

これらの3つのセクションが一意のCSSIDで適切に設定されているため、メニューアンカーリンクを作成することができます。

ダッシュボードから、 [外観]> [メニュー]に移動し、新しいプライマリメニューを作成します。次に、次のURLとリンクテキストを使用して3つのカスタムリンクを作成します。

カスタムリンク1
URL：#services
リンクテキスト：サービス

カスタムリンク2
URL：#work
リンクテキスト：作業

カスタムリンク3
URL：#about
リンクテキスト：約

アンカーリンクを使用してDiviでできる5つのクールなこと

表示場所をプライマリメニューに設定することを選択することを忘れないでください。次に、メニューを保存します。

これで、ページにアクセスしたときに試してみることができます。スムーズなスクロールがあることに気付くかもしれません。これは、Diviテーマが自動的にスムーズなスクロールを追加するためです。この機能はDiviバージョン2.4で追加されました。

アンカーリンクを使用してDiviでできる5つのクールなこと

キラーワンページスタイルのウェブサイトを構築するためのより多くのインスピレーションについては、これらの投稿をチェックしてください：

アンカーリンクを使用してレスポンシブ固定サイドバーを作成する方法
Diviで上と下のスクロールリンクを使用してフルスクリーンセクションを作成する方法
1ページのDiviWebサイトのスクロールでアクティブリンクを作成する方法

別のページからページセクションにジャンプする

上記の例を使用して、これを示すことができます。ページの3つのセクション（services、work、about）にCSS IDを追加したので、メニューアンカーリンクを使用してそれらのセクションにジャンプできるだけでなく、まったく別のページからそれらのセクションにジャンプすることもできます。

別のページにリンクを作成するときに、アンカーリンクのURLを使用するだけです。 ID「services」のサービスセクションへのリンクを配置する場合は、 www.yourdomain.com / page /＃ servicesのようになります。

これは、別のページからそのセクションにリンクするときに、ページがどのように読み込まれ、「マイサービス」セクションにスクロールするかの例です。

これは、サイトのさまざまなページからジャンプしたいさまざまな行動の呼びかけ（つまり、詳細を確認したり、Diviを入手したり、私に投票したりするなど）に最適です。

Diviドットナビゲーションを使用する

技術的には、これらは組み込みのアンカーリンクです。独自のCSSセクションIDを追加する必要はありません。ドットナビゲーション機能は、セクションからアンカーリンクを自動的に作成します。ページのドットナビゲーションをオンにするには、ページを編集するときに、画面右上の[Diviページ設定]で[ドットナビゲーション]オプションを[オン]に設定するだけです。ドットナビゲーションをオンにすると、Diviはページの横に透明なメニューを自動的に追加します。クリックすると、各ドットがページ全体のセクションにスクロールします。

アンカーリンクを使用してDiviでできる5つのクールなこと

詳細については、ドットナビゲーションにラベルを追加する方法に関するすばらしい投稿があります。

見出しにアンカーリンクを追加する

見出しにアンカーリンクを追加することは常に良い考えです。これは、多くのコンテンツを含む長いページのインデックスを作成するための優れた方法であり、同じページ内の各見出しに簡単に移動したり、Webサイトの他のページからこれらの見出しへのリンクを作成したりできます。また、検索エンジンがサイトをクロールするのにも役立ちます。

DiviBuilderを使用してヘッダーにCSSIDを追加するには、見出しテキストを含むモジュールを開きます。テキストタブが開いていることを確認してください。ヘッダータグ（h1、h2、h3など）を見つけて、最初のヘッダータグの括弧内にIDを入力します。 IDが「webdesign」のh3見出しの例を次に示します。

<h3 id="webdesign">Website Design</h3>

これで、正しいアンカーリンクURLを使用している限り、どこからでもこのヘッダーにリンクできます。この例では、次のようになります。

www.yourdomain.com/page/#webdesign

これは、Diviビルダーを使用していないページや投稿にも役立ちます。これらのページまたは投稿の見出しにアンカーリンクを追加するには、WordPressテキストエディターで[テキスト]タブを開きます。以下に示すように、選択した見出しを見つけて、見出しタグ内にIDを追加するだけです。

これはまさに私がこの投稿のためにしたことです。この投稿の上部にあるセクションリンクは、投稿のさまざまな見出しにリンクする優れた目次として機能します。

かなりクールなもの。

まとめ

アンカーリンクにはいくつかの優れた実用的な用途がありますが、常に最初に視聴者と目標を考慮する必要があるため、あまり夢中にならないでください。優れたデザインとは使いやすさと機能に関するものであるため、場合によってはアンカーリンクが非常に役立つことを忘れないでください。しかし、他の人では、それは単にユーザーが視差セクションを前後にザッピングし、道に迷ってしまうことを意味します。うまくいけば、この投稿からいくつかの役立つヒントを得ることができました。

アンカーリンクに関するヒントや質問はありますか？ 以下のコメントセクションであなたの経験について教えてください。