jQueryを使用してWordPressにスムーズなトップスクロール効果を追加する方法

長いWordPressのブログ記事や商品ページを携帯電話でスクロールしていて、メニューを見つけるためにすべて上に戻る必要があることに気づいたことはありませんか？訪問者も同じように感じるかもしれません。

長いページでは、その小さな不便さはすぐにフラストレーションに変わる可能性があります。そして、一部のユーザーは戻るのではなく、WordPressサイトを離れてしまうかもしれません。

スムーズなスクロールアップボタンがあれば、これをすぐに修正できます。この機能により、読者はすぐに上に戻ることができ、エンゲージメントを維持し、サイトのさらなる探索を促すことができます。

このガイドでは、jQueryを使用してWordPressにスムーズなトップスクロール効果を追加する方法を正確に説明します。心配しないでください、あなたが思うより簡単です！💡

スムーズスクロールとは何か、そしていつ使うべきか？

スムーズスクロールとは、セクションに即座にジャンプするのではなく、ページを一定の滑らかな動きで上下に移動させるナビゲーション効果です。

サイトに固定ヘッダーメニューがない場合、長いWordPressの投稿やページの最下部までスクロールしたユーザーは、サイトをナビゲートするために手動でスワイプまたはスクロールして一番上に戻る必要があります。

これは非常に煩わしいことであり、多くの場合、ユーザーは単にバックボタンを押して離脱してしまいます。そのため、ユーザーを投稿またはページのトップに素早く送るためのボタンが必要です。

通常、jQueryを使用せずに、次のような簡単なテキストリンクとしてこの機能を追加できます。

<a href="#" title="Back to top">^Top</a>

これにより、ユーザーはミリ秒単位でページ全体をスクロールして一番上に戻ります。機能はしますが、道路の段差に乗り上げたときのような、少し不快な効果が生じることがあります。

スムーズスクロールはその逆です。視覚的に心地よい効果でユーザーをトップにスライドさせます。このような要素を使用すると、サイトのユーザーエクスペリエンスを劇的に向上させることができます。

これを踏まえ、プラグインと jQuery を使用して WordPress サイトにスムーズなスクロールアップ効果を追加する 2 つの方法を紹介します。このガイドでカバーするすべての内容の概要を以下に示します。

前置きはさておき、最初​​の方法から始めましょう。

ヒント1：WordPress プラグインを使用してスムーズなスクロールアップ効果を追加する

この方法は、コードを一行も触ることなくWordPressウェブサイトにトップへスクロール効果を追加できるため、初心者におすすめです。

まず、WPFront Scroll Topプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをご覧ください。

有効化すると、WordPressダッシュボードから設定 » スクロールトップに移動できます。ここで、プラグインを設定し、スムーズスクロール効果をカスタマイズできます。

ここから、まず「有効」チェックボックスをクリックして、サイトでスクロール・トゥ・トップボタンを有効にします。次に、スクロールオフセット、ボタンサイズ、不透明度、フェード時間、スクロール時間などを編集するオプションが表示されます。

スクロールダウンすると、自動非表示時間の編集や、小さなデバイスまたはwp-admin画面でボタンを非表示にするオプションの有効化など、さらに多くのオプションが見つかります。

ボタンをクリックしたときの動作を編集することもできます。デフォルトではページの一番上にスクロールしますが、投稿内の特定の要素にスクロールするように変更したり、ページにリンクしたりすることもできます。

さらに、ボタンの位置を調整することもできます。通常は画面の右下隅に表示されますが、他のどのコーナーにも移動させることができます。

WPFront Scroll Top プラグインは、選択したページにのみスクロール・トゥ・トップボタンを表示するためのフィルターを提供します。

通常、WordPressブログのすべてのページに表示されます。

ただし、「ページに表示」セクションに移動して、スクロールトップ効果を表示したい場所を選択できます。

このプラグインは、既製のボタンデザインも提供しています。サイトに合ったデザインを簡単に見つけることができるはずです。

最適な既製の画像ボタンが見つからない場合は、WordPressのメディアライブラリからカスタム画像をアップロードするオプションがあります。

完了したら、「変更を保存」ボタンをクリックするだけです。

これで、WordPressウェブサイトにアクセスして、スクロールトゥトップボタンが機能していることを確認できます。

ヒント2：WordPress で jQuery を使用してスムーズなスクロールアップ効果を追加する

この方法では、jQuery、一部の CSS、および1行の HTML コードを使用して、スムーズなスクロールアップ効果を追加します。当社のチームは、テーマの機能を損なうことなく機能することを確認するために、この正確なコードスニペットを新しい WordPress インストールで手動でテストおよび検証しました。

とはいえ、多くのチュートリアルでは、テーマファイルを編集してスムーズなスクロールアップボタンを追加するように指示されています。しかし、これは初心者向けではありません。わずかな間違いでもサイトが壊れる可能性があります。

そのため、スムーズスクロール効果のようなカスタム機能を追加したい場合は、WPCodeを使用することをお勧めします。WordPress向けの最高のコードスニペットプラグインであり、テーマファイルを変更することなく、カスタムスニペットを安全に追加できます。

当社のパートナーブランドの中には、カスタムコードスニペットの追加と管理にWPCodeを使用しており、非常にうまく機能しています。

詳細については、WPCodeの全レビューを確認して、すべての機能を確認してください。

まず、無料のWPCodeプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをご覧ください。

有効化したら、WordPressダッシュボードからCode Snippets » + Add Snippetに移動します。

次の画面で、WPCodeのコードライブラリが表示されます。

「カスタムコードの追加（カスタムスニペット）」の下にある「スニペットを使用」をクリックします。

コードの種類を尋ねるポップアップが表示されます。

「JavaScriptスニペット」を選択してください。

コードエディタに入ったら、まずカスタムコードスニペットにわかりやすい名前を付けましょう。これは参照用ですが、明確で説明的な名前を使用することをお勧めします。

次に、次のコードを「コードプレビュー」ボックスに貼り付けます。

jQuery(document).ready(function($){
	$(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
			$('#smoothup') .fadeOut();
        } else {
			$('#smoothup') .fadeIn();
        }
    });
	$('#smoothup').on('click', function(){
		$('html, body').animate({scrollTop:0}, 'fast');
		return false;
		});
});

このjQueryスクリプトが、スムーズスクロール効果のすべての重労働を行います。

まず、ユーザーが200ピクセルスクロールするまでボタンを非表示にします。ユーザーがボタンをクリックすると、スクリプトはページをスムーズに0ピクセル（一番上）までアニメーションさせます。

また、デフォルトのHTMLリンクの動作（ユーザーを瞬時にトップにジャンプさせ、アニメーションを台無しにする）を防ぐために、return false;行を含めました。

画面上ではこのようになります。

次に、「挿入」セクションまでスクロールダウンします。

まず、「自動挿入」が選択されていることを確認してください。これにより、スニペットは手動で配置する必要なく、サイトで自動的に実行されます。

次に、場所を確認しましょう。

ヘッダー、フッター、ナビゲーションメニューなど、多くのオプションから選択できます。スクロールアップボタンの場合、「サイト全体フッター」は、ボタンがすべてのページで利用可能になり、サイトのコンテンツを妨げないため、優れたオプションです。

これで、スイッチを「アクティブ」に切り替えることができるため、スクリプトはサイトで即座に実行を開始します。

その後、スニペットを有効にするために「スニペットの保存」ボタンをクリックすることを忘れないでください。

jQueryを追加したので、ユーザーをトップに戻す実際のリンクをWordPressサイトに追加しましょう。

これを行うには、WPCodeを使用してこのHTMLをサイトのフッターに追加するだけです。

コードスニペット » ヘッダーとフッターに移動し、このスニペットを「フッター」領域に追加します。

<a href="#top" id="smoothup" title="Back to top"></a>

完了したら、「変更を保存」をクリックすることを忘れないでください。ヘルプが必要な場合は、WordPressでヘッダーとフッターのコードを追加する方法のチュートリアルをご覧ください。

今すぐサイトを表示しても、ボタンは表示されません。これは、HTMLコードにリンクは含まれていますが、アンカーテキストが含まれていないためです。現在、完全に非表示になっています。

これを修正するために、画像アイコン（上矢印のようなもの）を使用してトップに戻るボタンを表示します。これには、カスタムCSSを追加する必要があります。

CSSは、テーマのスタイルシートに追加するか、WPCodeを介して追加できます。WPCodeを使用すると、テーマを更新しても失われないため、より安全です。

コードを追加する前に、次のことを行う必要があります。

1. 画像アイコン（矢印のようなもの）をWordPressメディアライブラリにアップロードします。サイズはサイトに最適なものを使用してください。ここでは例として40x40pxを使用しました。異なるサイズを使用する場合は、以下のCSSコードのheightおよびwidth値を変更してください。
2. アップロードした画像のURLをコピーします。次に、以下のCSSスニペット内のダミー画像URL（https://www.example.com/wp-content/uploads/2013/07/top_icon.png）を実際の画像URLに置き換えてください。

これにより、スクロールアップボタンが正しく表示され、ホバー時の回転エフェクトが適用されます。

次に、コードスニペット » + スニペットを追加に移動します。

次に、「カスタムコードを追加（カスタムスニペット）」にカーソルを合わせます。

表示されたら、「スニペットを使用」ボタンをクリックします。

表示されるポップアップで、コードの種類を選択する必要があります。

「CSSスニペット」を選択しましょう。

エディタで、カスタムコードスニペットに整理しやすいように明確な名前を付けます。

次に、以下のカスタムCSSコードを「コードプレビュー」ボックスに追加します。

<pre class="wp-block-syntaxhighlighter-code">#smoothup {
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 50px;
    right: 20px;
    text-indent: -9999px;
    display: none;
    background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

#smoothup:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}</pre>

このCSSは、アイコンのサイズと位置を固定し、ボタンを回転させる小さなホバーアニメーションを追加します。

「挿入」で何も編集する必要はありません。これにより、CSSが他の要素に影響を与えることなくサイト全体に適用されます。

最後に、スイッチを切り替えてスニペットをアクティブにし、「変更を保存」をクリックします。

そして、それが基本的にすべてです！

これで、ウェブサイトにアクセスして、スムーズなスクロールアップが機能していることを確認できます。

ボーナスのヒント：訪問者を引き付けるためのその他の微妙なアニメーション効果

スムーズなスクロールアップボタンは、サイトをよりユーザーフレンドリーにするための一つの方法にすぎません。注意を優しく誘導し、サイトの閲覧を楽にするために追加できる、その他の小さなアニメーション効果はたくさんあります。

たとえば、パララックス効果は、背景画像をコンテンツとは異なる速度で動かし、奥行きと動きの感覚を作り出します。SeedProdのような最新のページビルダーにはこの機能が組み込まれているため、コードを書かずにこの効果を作成できます。

ページをより生き生きとさせる簡単な方法です。手順については、パララックス効果を追加する方法のガイドを参照してください。

検索トグル効果は、アイコンをクリックしたときにのみ検索バーを表示することで、すっきりとした状態を保ちます。この機能は、ユーザーがボタンをクリックして表示するまで検索入力フィールドを非表示にします。これにより、デザインが乱雑に見えるのを防ぎながら、訪問者が必要なものを簡単に見つけられるようになります。

テーマにこの機能が組み込まれていない場合は、WPCodeのようなプラグインが役立ちます。詳細については、WordPressに検索トグル効果を追加する方法のガイドをご覧ください。

また、画像ギャラリーがある場合、ライトボックス効果を使用すると、ページを離れることなく、より大きく邪魔にならないポップアップで写真を表示できます。このオーバーレイ効果は、ページの他の部分を暗くしながら、画像をフォーカスされたウィンドウに表示します。これは小さなディテールですが、ビジュアルを探求するのが好きな人にとっては大きな違いを生みます。

さらに、Envira Galleryのようなギャラリープラグインを使用すると、この機能の追加が簡単になります。これを行うには、ライトボックス効果のあるWordPressにギャラリーを追加する方法のガイドを参照してください。

これらの配慮は単なる「あれば嬉しい」ものではなく、訪問者があなたのサイトを体験してくれることを考えていることを示します。これにより、訪問者は長く滞在し、サイトを探索してくれる可能性が高まります。🕵️

よくある質問: jQueryを使用してWordPressにスクロールアップ効果を追加する

終わりに近づく前に、WordPressにスクロールアップボタンを追加することについて読者がよく抱く質問をいくつかご紹介します。

すべてのウェブサイトにスクロールトップボタンは必要ですか？

必ずしもそうではありません。しかし、コンテンツが多いページにはスマートな追加機能です。長いブログ記事やチュートリアルでは、訪問者が一番上までスクロールする手間を省き、閲覧体験をより楽しくします。

スクロールアップボタンを追加すると、サイトの速度は低下しますか？

そうではありません。プラグイン方式は軽量でパフォーマンスのために最適化されており、jQueryコードスニペットは非常に小さいです。そのため、サイトの速度に目立った影響はありません。

スクロールアップボタンを配置するのに最適な場所はどこですか？

ほとんどのサイトでは、画面の右下隅に配置しています。この場所は、メインコンテンツの邪魔にならず、表示されていてかつ簡単にアクセスできます。

ボタンに画像ではなくテキストリンクを使用できますか？

もちろんです。プラグインとカスタムコードの両方の方法で、アイコンの代わりにシンプルな「トップに戻る」テキストリンクを設定できます。プラグインはこれを標準で提供しており、コード方式では、HTMLとCSSを調整してスタイルに合わせるだけです。

関連記事：WordPress テーマに関するその他のリソース

この記事が、jQueryを使用してサイトにスムーズなトップに戻る効果を追加するのに役立ったことを願っています。このような機能でテーマをカスタマイズすることは、ユーザーフレンドリーなサイトを構築するための第一歩にすぎません。WordPressテーマについてさらに深く知りたいですか？これらのリソースがお役に立ちます：

• 最も人気のあるWordPressテーマと最高のWordPressテーマ
• WordPressのテーマを変更するとどうなるか？
• WordPress テーマを変更する前に必ず行うべきこと
• WordPressテーマフレームワークとは何か、そして最高のテーマフレームワークは何か？
• WordPressテーマのカスタマイズ方法
• WordPressテーマのどのファイルを編集するかを見つける方法
• プロのようにWordPressテーマカスタマイザーを使用する方法
• WordPressのフルサイト編集の完全初心者ガイド

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。