モバイルでElementorのアンカーへのスクロールの問題を修正する方法

Elementor は、コーディングの知識がなくても、魅力的でインタラクティブな Web サイトを作成できる WordPress 用の人気のページ ビルダー プラグインです。その多くの機能の 1 つは、ページ上の特定のセクションにスクロールするアンカー リンクを作成する機能です。ただし、一部のユーザーは、モバイル デバイス上でこれらのアンカー リンクが適切に機能しないという問題を報告しており、Web サイトの所有者と訪問者の両方にとってイライラする可能性があります。

この問題が発生した場合でも、心配しないでください。モバイルでのElementorのスクロールからアンカーまでの問題を解決するのに役立つ解決策がいくつかあります。このガイドでは、Web サイトの設定の調整、カスタム コードの使用、プラグインのインストールなど、この問題のトラブルシューティングと解決に最も効果的な方法をいくつか紹介します。これらのヒントとテクニックを使用すると、Web サイトのアンカー リンクがすべてのデバイスでスムーズかつシームレスに機能し、訪問者により良いユーザー エクスペリエンスを提供できるようになります。

Elementor におけるアンカーとは何ですか?

ジャンプメニューはアンカーメニューの別名です。このアンカー ID により、設定として指定した場所に移動します。アンカー メニューを使用すると、視聴者は次のページに移動し、リンクをクリックし、検索を行うことができます。これは通常、WordPress Web サイトの運営者です。

サイトでのアンカーの使用がどのように役立つか

アンカーは複数の目的に使用できます。この連携により、Web サイトでのサーフィン体験が最適化されます。利点は次のとおりです。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める

ユーザーエクスペリエンスの向上

アンカーリンクにより閲覧が容易になります。訪問者は、クリック、タップして、希望するサービスを選択するだけで利用できます。これにより、オンライン エクスペリエンスが向上します。

コンテンツのトップに戻ることができます

スクロールしすぎる場合は、アンカー リンクを使用するとページの上部に移動できる場合があります。このツールを使用すると時間を節約し、順調に進めることができます。

効率的なブラウジングを確保

アンカーリンクはスクロール以外にもクリックや前のページに戻るなどにも利用でき、効率的な閲覧が可能です。

より速いパフォーマンス

コマンドから即座に応答を得ることができます。指示を入力する代わりに、アンカー リンクを使用すると、より迅速なナビゲーションが可能になります。

Elementor のアンカーへのスクロール機能がモバイルで動作しない理由

Elementorでアンカーへのスクロールがモバイルでは機能しない理由を説明するのは困難です。しかし、包括的な調査の結果、次の事実が判明しました。

ターゲットが不十分

ページに Sobre-Agencia、Como-Fazer、サービス、連絡先などのターゲット リンクがない場合、これがスクロール リンクの機能を妨げる要因である可能性があります。

拡張機能が問題を引き起こす

Android デバイスに拡張機能が読み込まれている場合、スクロール機能の動作がブロックされている可能性があります。

プラグインが多すぎる

Web サイトに過剰な数のプラグインがある場合、これが WordPress アンカーが応答しなくなるもう 1 つの理由である可能性があります。追加のプラグインは互いに衝突します。これにより、Web サイトにアクセスできなくなる可能性があります。

サーバーの状態が悪い

Web サイトのサーバーがプラグインを処理できない場合、これがリンクの機能を妨げる原因で​​ある可能性があります。

Elementor Scroll toAnchor を修正するための最も効果的な 5 つのヒント

Elementor のアンカーへのスクロールが効果的でない理由にもかかわらず、次のヒントは Web サイトを修復するのに役立ちます。これが行きます。

ターゲットの作成

ページにターゲット リンクがない場合、スクロール リンクは機能しない可能性があります。このため、まずターゲット リンクを構築し、次に次の方法でそれらを強調する必要があります。

まず、テーマを選択し、次のコードをシートに入力します。

.menu-item a{
     Color: black;


}

リンクが視聴者に表示されるかどうかを通知したい場合は、このオプションを選択します。これを行うには、次の CSS を提供します。

.menu-itema.mPS2id-highlight{
      color: red;
}

JavaScript フィルターを使用する

Elementor アンカー ウィジェットでは、JavaScript フィルターを使用できます。次のプログラムを実行してフィルターを追加します。

add_action( 'wp_footer', function() {
    if ( ! defined( 'ELEMENTOR_VERSION' ) ) {
        return;
    }
    ?>
    <script>
        jQuery( function( $ ) {
            $( window ).on( 'elementor/frontend/init', function() {

                elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor/scroll_top_distance', function( scrollTop ) {
                    var isMobile = $(window).width() <= 760;
                    if (isMobile) {
                        return scrollTop - 1000;
                    } else {
                        return scrollTop;
                    }   
                } ); 
            } );
        } );
    </script>
    <?php
} );

スクロールを調整する

代替解決策として、モバイル モードでメニューが開いている間のオフセット スクロールを調整します。

メニューが閉じないようにする

これは実行可能な解決策ではありませんが、唯一の選択肢はメニュー バーのドロップダウンを開いたままにすることです。これにより、スクロール アンカーが動かなくなった場合でもナビゲーションが容易になります。

デフォルトのテーマを選択する

サイト上のアンカー アイコンを修正するためにできることの 1 つは、アイコンを修正することです。 WordPress のデフォルトのテーマを選択します。これは優れています。

プラグインを使用してElementor Webサイトにアンカーを簡単に追加する方法

プラグインは、Web サイトにアンカー リンクを追加する最も便利な方法です。アンカーを追加するには、以下の手順に従ってください。

リンクを追加する前に、リンク追加プラグインをインストールしてください。次に、アンカー リンクが表示されるショートコード ブロックを構築します。次のショートコードを実行します。

[ps2id id='section-1'/]

アンカー リンクを新しいショートコード ブロックに挿入します。リンクを表示したい場所に配置します。次のコードを実行します。

[ps2id url='#some-id']link text[/ps2id]

次に、「some-id」を構築されたアンカー名に置き換え、link-text を目的のアンカーに置き換えます。今すぐ変更を保存します。これで完了です。

5 ベストアンカーおよびスクロールプラグイン

接続のアクセシビリティを大幅に向上させるプラグインが多数あります。包括的な調査の結果、以下にリストする 5 つのアンカー プラグインが最も優れたものとして提案されます。

まとめ

すべての Web サイト所有者は、完全に機能する WordPress Web サイトを望んでいます。正しく機能しないとユーザーはがっかりするかもしれません。 Elementorがモバイルでアンカーまでスクロールできないという問題は、すべての Web サイト所有者が遭遇する一般的な問題です。あなたの生活を簡素化するために、最も効果的なハックを紹介します。この情報がお客様の修理に役立つと信じています。