開発者ガイドJQueryを使用してWordPressのトップエフェクトにスムーズなスクロールを追加する

私たちは皆、WordPressのシームレスさと、効率的なコンテンツ管理システムの使用に関して物事をはるかに簡単にするという事実のために大好きです。

それは誇張ではありませんが、簡単でアクセスしやすいWeb開発は、新しいWebマスターにとって祝福です。 WordPressには、さまざまなWebサイトの所有者がユーザーに非常にスムーズでインタラクティブなインターフェイスを提供できるようにする多数の機能があります。

WordPressを初めて使用する場合は、ブログの開始方法と管理方法に関するステップバイステップガイドが掲載されているTheBlogStarterなどのリソースでWordPressチュートリアルを確認できます。

ウェブサイトのコンテンツのみに焦点を当てている場合は、応答性が高く視覚的に魅力的なウェブサイトがコンテンツと同じくらい重要であることをお伝えしたいと思います。

既存のWebサイトがあり、どこから始めればよいかわからない場合は、時間をかけて毎日30分を費やして、Webサイトの外観とインターフェイスについて考えてください。 修正が必要な要素が徐々に見つかるので、私たちを信頼してください。 あなたが大きな視覚的努力であなたのウェブサイトを過給すると、会話率は増加します。

そして、あなたがすでにあなたのウェブサイトへのスムーズな訪問体験をユーザーに提供することに投資している人なら、あなたに称賛を！ さて、私たちは彼らのウェブサイトにさらにエッジの効いた変更を提供し、彼らのウェブサイトの全体的な視覚的パフォーマンスを改善したいすべての人のために並んだ素晴らしいチュートリアルを持っています。

このブログ投稿では、jQueryを使用してWordPressのトップエフェクトにスムーズスクロールを追加する方法について説明します。

なぜスムーズスクロールを使用するのですか？

通常、Webサイトに長い記事があり、ユーザーがそれらを調べていると、Webページの最後に到達するのがイライラする場合があります。

したがって、Webサイトがワンクリックで一番上までスムーズにスクロールできる場合、読者はWebサイトがシームレスで非常にスムーズであることに気付くでしょう。

したがって、あなたがウェブサイトの所有者またはデジタルマーケティング担当者である場合、あなたは日和見主義者であり、あなたのウェブサイトに追加の有機的なオーディエンスを引き付けるために必要なすべてを行うことを確認する必要があります。

WordPressでスムーズスクロールをトップエフェクトに追加する方法

WordPressのToEffectにスムーズなスクロールを追加できるようにするには、以下のほとんどの方法のいずれかを使用することができます。

1.jQueryで記述されたコードを使用する

2.プラグインを使用する

プラグインよりもコーディングの方が通常は好まれます。これは、正しい方法で実行した場合に問題が発生する余地がないためです。 プラグインはウェブサイトの読み込み速度を低下させることがありますが、コーディングは、そもそも速度に影響を与えることなく、カスタマイズを追加するのに役立ちます。 特に、このチュートリアルでは、コーディングプロセスについて説明します。

コーディングを使用してWordPressのトップエフェクトにスムーズスクロールを追加するにはどうすればよいですか？

コーディングを使用してWordPressWebサイトにスムーズなスクロールを追加するには、次の4つの手順を実行する必要があります。

1. 「Smoothscrolleffect.js」ファイルを作成します。
2. 「Smoothscrolleffect.js」関数をテーマに添付します。
3. テーマにアイコンを追加する
4. エフェクトをWebページにリンクする

これらの4つのステップが完了すると、より多くの読者を獲得する準備が整います。 プログラマーの場合は、要件に応じて独自のスクリプトを作成できます。

プログラマー以外の方のために、各ステップを徹底的に説明し、必要なコードを追加しました。 したがって、手順を読み、それに応じて実行する必要があります。

ステップ1：「Smoothscrolleffect.js」ファイルを作成する

これは、このステップで作成する最も重要なファイルです。 この手順を効果的に実装しないと、スムーズなスクロールを完全に実現できない可能性があります。

このステップでは、トップエフェクトにスムーズなスクロールを追加する関数を含む「.js」（jQuery）ファイルを作成します。 手順に従って「.js」ファイルを作成し、Webサイトのディレクトリにアップロードします。

1. システムに新しいメモ帳ファイルを作成します。
2. 次のコードをコピーします。

3. コードをメモ帳ファイルに貼り付けます。
4. 任意の名前で保存しますが、拡張子が「.js」であることを確認してください。
5. ウェブサイトのcPanelにログインします。
6. Webサイトのディレクトリ「/js/」に移動します

注：Webサイトにjsディレクトリがない場合は、作成する必要があります。

7. システム上に作成した「.js」ファイルをディレクトリにアップロードします。

ステップ2：スムーズスクロールをテーマに添付する

上記の手順では、Webサイトのディレクトリにファイル（スムーズスクロール機能付き）を作成しました。この手順では、スムーズスクロール機能をテーマにリンクします。 これを行うには、次の手順に従います。

WordPress管理ダッシュボードでテーマエディターに移動します。 function.phpを開いて編集します。 次のコードを貼り付けます。

「変更を保存」をクリックします。

ステップ3.テーマにアイコンを追加する

明らかに、あなたはあなたがトップにスクロールするために読者に提供することができるあなたのウェブサイトにアイコンを追加したいです。 それに加えて、よりインタラクティブで応答性の高いものにする必要があります。 あなたは次のようにCSSの助けを借りてそれを成し遂げることができます：

1. テーマエディタでテーマのstylesheet.cssに移動します。
2. 次のコードをコピーします。

ここでは、要件に応じてアイコンを変更できます。 参照を使用しました。 画像を変更するには、画像をWebサイトにアップロードして、上記のコードの[背景：URL]フィールドに貼り付けることができます。

ステップ4：スムーズスクロールをウェブページにリンクする。

これで、「。js」ファイルを作成し、それをWebサイトのディレクトリにアップロードし、テーマを添付して、エフェクトのアイコンを作成しました。これが最後のステップです。 次に、スムーズスクロール効果をWebサイトのすべてのWebページにリンクします。 手順に従ってください：

おめでとうございます！これで、jQueryを使用してWordPressWebサイトにスムーズなスクロールトップ効果を追加できました。

結論

上記のチュートリアルが、JQueryを使用してWordPressの「スムーズスクロールトップ」効果を効果的に追加し、優れたWebサイトナビゲーションエクスペリエンスでユーザーを魅了するのに役立つことを願っています。

上記の手順を実装する際に問題が発生した場合は、下にコメントを記入してお知らせください。