長いWordPressのブログ記事や商品ページを携帯電話でスクロールしていて、メニューを見つけるためにすべて上に戻る必要があることに気づいたことはありませんか？訪問者も同じように感じるかもしれません。
長いページでは、その小さな不便さはすぐにフラストレーションに変わる可能性があります。そして、一部のユーザーは戻るのではなく、WordPressサイトを離れてしまうかもしれません。
スムーズなスクロールアップボタンがあれば、これをすぐに修正できます。この機能により、読者はすぐに上に戻ることができ、エンゲージメントを維持し、サイトのさらなる探索を促すことができます。
このガイドでは、jQueryを使用してWordPressにスムーズなトップスクロール効果を追加する方法を正確に説明します。心配しないでください、あなたが思うより簡単です！💡
スムーズスクロールとは何か、そしていつ使うべきか？
スムーズスクロールとは、セクションに即座にジャンプするのではなく、ページを一定かつ滑らかな動きで上下に移動させるナビゲーション効果です。「トップへ戻る」ボタンのような機能で、特に長いページをユーザーがよりスムーズに移動できるようにしたい場合に使用すると良いでしょう。
サイトに固定ヘッダーメニューがない限り、長いWordPressの投稿やページの最下部までスクロールしたユーザーは、サイトをナビゲートするために手動でスワイプまたはスクロールしてトップに戻る必要があります。
これは非常に迷惑なことで、ユーザーは単にバックボタンを押して離れてしまうことがよくあります。そのため、ユーザーを投稿またはページのトップに素早く送るボタンが必要なのです。
通常、jQueryを使用せずに、次のような簡単なテキストリンクとしてこの機能を追加できます。
<a href="#" title="Back to top">^Top</a>
これにより、ユーザーはミリ秒単位でページ全体をスクロールして一番上に戻ります。機能はしますが、道路の段差に乗り上げたときのような、少し不快な効果が生じることがあります。
スムーズスクロールはそれの反対です。視覚的に心地よいエフェクトでユーザーをページトップに戻します。このような要素を使用すると、サイトのユーザーエクスペリエンスを大幅に向上させることができます。
これを踏まえ、プラグインと jQuery を使用して WordPress サイトにスムーズなスクロールアップ効果を追加する 2 つの方法を紹介します。このガイドでカバーするすべての内容の概要を以下に示します。
- ヒント1：WordPressプラグインを使用してスムーズなトップスクロール効果を追加する（簡単）
- ヒント2：WordPressにjQueryでスムーズなスクロールアップ効果を追加する（上級者向け）
- ボーナスのヒント：訪問者を引き付けるためのその他の微妙なアニメーション効果
- よくある質問: jQueryを使用してWordPressにスクロールアップ効果を追加する
- 関連記事：WordPress テーマに関するその他のリソース
前置きはさておき、最初の方法から始めましょう。
WordPressプラグインを使用してスムーズなスクロールアップ効果を追加する
この方法は、コードを一行も触ることなくWordPressウェブサイトにトップへスクロール効果を追加できるため、初心者におすすめです。
まず最初に行うべきことは、WPFront Scroll Top プラグインをインストールして有効化することです。ヘルプが必要な場合は、WordPress プラグインのインストール方法に関するガイドをご覧ください。
有効化すると、WordPressダッシュボードから設定 » スクロールトップに移動できます。ここで、プラグインを設定し、スムーズスクロール効果をカスタマイズできます。
ここから、まず「有効」チェックボックスをクリックして、サイトでスクロール・トゥ・トップボタンを有効にします。次に、スクロールオフセット、ボタンサイズ、不透明度、フェード時間、スクロール時間などを編集するオプションが表示されます。
スクロールダウンすると、自動非表示時間の編集や、小さなデバイスまたはwp-admin画面でボタンを非表示にするオプションの有効化など、さらに多くのオプションが見つかります。
ボタンをクリックしたときの動作も編集できます。デフォルトではページトップにスクロールしますが、投稿内の特定の要素にスクロールするように変更したり、ページへのリンクにすることもできます。
さらに、ボタンの位置を調整することもできます。通常は画面の右下隅に表示されますが、他のどのコーナーにも移動させることができます。
WPFront Scroll Top プラグインは、選択したページにのみスクロール・トゥ・トップボタンを表示するためのフィルターを提供します。
通常、WordPressブログのすべてのページに表示されます。
ただし、「ページに表示」セクションに移動して、スクロールトップ効果を表示したい場所を選択できます。
このプラグインは、既製のボタンデザインも提供しています。サイトに合ったデザインを簡単に見つけることができるはずです。
事前に作成された画像ボタンでうまくいかない場合は、WordPressのメディアライブラリからカスタム画像をアップロードするオプションがあります。
完了したら、「変更を保存」ボタンをクリックするだけです。
これで、WordPressウェブサイトにアクセスして、スクロールトゥトップボタンが機能していることを確認できます。
WordPressでjQueryを使用してスムーズなスクロールアップ効果を追加する
開始する前に、この方法は初心者にはお勧めできないことに注意してください。コードをウェブサイトに追加することを含むため、テーマの編集に慣れている方向けです。
スムーズなスクロールトップ効果を追加するには、jQuery、一部のCSS、およびWordPressテーマのHTMLコードの1行を使用します。
まず、メモ帳のようなテキストエディタを開き、ファイルを作成します。smoothscroll.jsとして保存してください。
次に、このコードをファイルにコピー＆ペーストする必要があります。
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スクリプトです。
その後、ファイルを保存し、WordPress テーマディレクトリの /js/ フォルダーにアップロードできます。
詳細については、WordPressにファイルをアップロードするためにFTPを使用する方法に関するガイドを参照してください。
💡 注: どのFTPクライアントを使用すればよいかわかりませんか？WPBeginnerのウェブ開発チームは、しばしばFileZillaを使用しています。ウェブサイトファイルを管理するための信頼性の高い無料オプションです。
テーマに /js/ ディレクトリがない場合は、作成して smoothscroll.js をアップロードできます。
詳細については、WordPressのファイルとディレクトリ構造に関するガイドも参照してください。
次に、テーマにsmoothscroll.jsファイルを読み込む必要があります。
そのためには、このコードをテーマのfunctions.phpファイルにコピー＆ペーストするだけで、WordPressでスクリプトをエンキューします。
ただし、テーマファイルを直接編集することはお勧めしません。わずかな間違いでもサイトが壊れる可能性があるからです。
代わりに、WPCodeのようなプラグインを使用できます。これはWordPress向けの最高のコードスニペットプラグインであり、WordPressでのカスタムコードスニペットの追加に関するチュートリアルに従ってください。
wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '', true );
💡 注：ビジネスサイトでは、カスタムスニペットの作成と管理にWPCodeを使用しています。
このチュートリアルでは、WPCodeの無料バージョンがあれば十分です。ただし、コードスケジューリングや完全な改訂履歴のような高度な機能が必要な場合は、WPCode Proが必要になります。詳細については、WPCodeのレビューをご覧ください。
上記のコードは、プラグインが依存しているスクリプトと jQuery ライブラリを WordPress にロードするように指示しています。
jQueryを追加したので、ユーザーをトップに戻す実際のリンクをWordPressサイトに追加しましょう。
これを行うには、WPCodeを使用して、テーマのfooter.phpファイルのどこにでもこのHTMLを貼り付けるだけです。
<a href="#top" id="smoothup" title="Back to top"></a>
ヘルプが必要な場合は、WordPressでヘッダーとフッターのコードを追加する方法に関するチュートリアルをご覧ください。WordPressでヘッダーとフッターのコードを追加する方法
HTMLコードにはリンクは含まれていますが、アンカーテキストは含まれていないことに気づいたかもしれません。これは、トップに戻るボタンを表示するために、上向き矢印の画像アイコンを使用するためです。
この例では、40x40px のアイコンを使用しています。以下のカスタム CSS をテーマのスタイルシートに追加するだけです。
このコードでは、ボタンの背景画像として画像アイコンを使用し、固定位置に設定しています。また、ユーザーがマウスカーソルを合わせるとボタンが回転する簡単なCSSアニメーションも追加しました。
#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
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) }
background: url('') no-repeat;
}
上記の CSS では、使用したい画像の URL を https://www.example.com/wp-content/uploads/2013/07/top_icon.png に置き換えてください。
WordPressメディアアップローダーを使用して独自の画像アイコンをアップロードし、画像URLをコピーしてコードに貼り付けることができます。
そして、それが基本的にすべてです！
ボーナスのヒント：訪問者を引き付けるためのその他の微妙なアニメーション効果
スムーズなスクロールアップボタンは、サイトをよりユーザーフレンドリーにするための一つの方法にすぎません。注意を優しく誘導し、サイトの閲覧を楽にするために追加できる、その他の小さなアニメーション効果はたくさんあります。
例えば、パララックス効果は、背景画像をコンテンツとは異なる速度で動かし、奥行きと動きの感覚を作り出します。
ページをより生き生きとさせる簡単な方法です。ステップバイステップの説明については、パララックス効果を追加する方法に関するガイドを参照してください。
検索トグルエフェクトは、誰かがアイコンをクリックしたときにのみ検索バーを表示することで、すっきりとした状態を保ちます。これにより、訪問者が必要なものを見つけやすくなりながら、デザインが散らかった印象になるのを防ぐことができます。
テーマにこの機能が組み込まれていない場合は、WPCode のようなプラグインがお役に立ちます。詳細は、WordPress で検索トグル効果を追加する方法に関するガイドをご覧ください。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でもフォローできます。
Olaf
この小さなアイコンは、ユーザーが一番上に戻るためにたくさんスクロールする必要があるデスクトップソリューションに最適です。これは良いディテールであり、個人的には気に入っています。モバイルデバイスでは、素早いスワイプが利用可能であり、ボタンが邪魔になることもあるため、その目的はいくらか失われています。記事で言及されているプラグインは、WordPressリポジトリにある数少ない、本当にどこでも期待通りに機能するプラグインの1つです。私はそれを推奨し、時々自分で使用します。ただし、私の経験に基づくと、特にモバイルデバイスでは無効にすることをお勧めします。
デニス・ムトミ
ぜひ追加したいヒントが一つあります。ウェブサイトのテーマに合わせてボタンの色合いを調整すると、より統一感のある見た目になります。
この小さなこだわりが、全体的なユーザーエクスペリエンスに大きな違いをもたらすことがあります。
Mrteesurez
トップに戻る機能を実装することは、特に非常に長いコンテンツを投稿するウェブサイトにとって有益であることがわかります。ユーザーは投稿の最初を見たり、トップに戻ったりする必要があるかもしれないので、この機能は確かにユーザーエクスペリエンスをさらに向上させるでしょう。WPbeginnerを含むほとんどのウェブサイトがそれを使用していないのを見かけますが、なぜですか？
ユーザー維持率を高めるためなど、それを使用しないことに何か利点があるのでしょうか？
後日更新で、その長所と短所をこの投稿に含めることができます。
WPBeginnerサポート
We will look into the possibility for the future, for now we do not have it as personal preference. As someone goes through a tutorial they normally want to see the previous step by scrolling manually and not the start of the article
管理者
Mrteesurez
まあ、可能性はありますが、私にとっては、そのユースケースは記事で前のステップを見る以上のものです。この記事では、「サイトに固定ヘッダーメニューがない場合、長いWordPressの投稿やページの最後までスクロールしたユーザーは、サイトをナビゲートするために手動でスワイプまたはスクロールして一番上に戻る必要があります。これは非常に迷惑であり、多くの場合、ユーザーは単にバックボタンを押して離れてしまいます。そのため、ユーザーをすばやく一番上に送るためのボタンが必要なのです」と強調しています。この記事で言及されているユースケースは有益であり、使用を正当化すると指摘したいと思います。ありがとうございます。
イジー・ヴァネック
以前はページに「トップに戻る」ボタンがありませんでしたが、記事が長くなるにつれて、ユーザーに数秒間スクロールさせるのは避けたいと思いました。このプラグインを使い始めたところ、素晴らしいです。一見すると不要に見えるかもしれませんが、ユーザーの快適性を大幅に向上させます。不要ではありません。
Asha
ありがとうございます！非常に分かりやすく説明されています。参考になります。
Marco
Twenty-seventeen の子テーマで Jquery メソッドを試しましたが、うまくいきませんでした。まあいいか。幸いなことに、ハイパーリンクバージョンは完璧に機能し、私には十分です。
Marco
一つ質問です…この（jQueryの方法）が私にうまくいかない理由の一つとして、WordPressのインストールがサブフォルダにあるからということはありえますか？それ以外に考えられる理由がありません。
Taffeltrast
これがあれば嬉しいのですが、footer.php が壊れてしまいます。フッターが読み込まれなくなります。
footer.php に追加しようとすると、「14行目に構文エラーがあります。などなど」というエラーが表示され、それでもアップロードしようとすると、フッターが読み込まれません。
oliver
どうもありがとう、シンプルで効果的です。
私の意見ですが、もしテーマに既に custom.js ファイルがある場合は、新しいファイルを作成して再度エンキューするのではなく、このファイルに jQuery 関数を追加するだけで済みます。
個人的には、すべての小さなスクリプトを1つのファイルにまとめることを好みます。
Stuart
Child Theme Designed by Blank |
add_action('wp_head', 'my_favicon');
何か間違っていますか？これが私のfunctions.phpです。wp_enqueue_scriptsは初めてです。
Stuart
Twenty Fifteen-Child ThemeでJsフォルダを作成し、wp_enqueue_scriptをすべて追加しましたが、うまくいきませんでした。何が間違っていたのかわかりません。プラグインはできるだけ少なく使いたいと思っています。WordPressサイトを遅くする原因になるようです。ファビコンを追加しました。wp_enqueue_scriptは私にとって新しいものです。どなたか助けていただけますか？
ドナルド
こんにちは、これはまだ機能しますか？アイコンは表示されます（一時的にCSSをdisplay:blockに変更した場合）。スクリプトはFirefoxの開発者ツールのコンソールにロードされているように表示されます。しかし、1行目に対して以下のエラーメッセージが表示されます。
‘構文エラー：ステートメントの前にセミコロンがありません’
上記のようにスクリプトをコピーしました:
01 jQuery(document).ready(function($){ 02 $(window).scroll(function(){ 03 if ($(this).scrollTop() < 200) { 04 $('#smoothup') .fadeOut(); 05 } else { 06 $('#smoothup') .fadeIn(); 07 } 08 }); 09 $('#smoothup').on('click', function(){ 10 $('html, body').animate({scrollTop:0}, 'fast'); 11 return false; 12 }); 13 });
誰か問題の原因がわかる方はいらっしゃいますか？
ドナルド
Josh Patterson
ページの下部に行く前に、これをフェードアウトさせる方法はありますか？
jaybob
こんにちは、正常に動作しています。チュートリアルありがとうございます。ただ一つ問題があります。画像が表示されるのが早すぎます。後で表示させることはできますか？ スクロールしてから少し遅れて表示させることはできますか？
アーロン
これは非常に洗練された方法で実現しています。私がこれまでに見つけた中で断然お気に入りです。
ちょっと質問です… フッター.php ファイルに入れました… 特定の場所で固定されるのを止めるにはどうすればいいですか？例えば、高さが 575px のフッターがあり、アイコンがその領域に入り込まないようにしたいのです。基本的に、ページ下部から 600px の位置で固定位置を停止させたいのです。
Ulv
このソリューションは、smoothscroll.jsファイルをHTMLファイルの「」部分に追加しますか、それとも…？
エマヌエレ
こんにちは、 メニューにスムーススクロールを追加してページをスクロールすることは可能ですか？…ワンページテンプレートを作成したので、メニューでスクロールさせたいのですが…ありがとうございます。
StefsterNYC
もし私の理解が正しければ、メインメニューのナビゲーションに追加したいということですね？合っていますか？セレクター名は同じまま、CSSを完全に変更してください。そうすれば画像は表示されなくなります。
これで意味は通じますか？
ポール
このヒントをありがとうございます！しかし、問題があります。画面サイズを縮小すると、特定の場所に配置したい矢印が消えてしまいます。
それを修正する方法はありますか？
ありがとう
ポール
ポール
問題の解決策を見つけました。CSSを次のように変更するだけでした：
#smoothup {
top: 572px;
left: auto;
margin-left: -68px;
}
ムシール
ありがとう！魔法のように機能します。本当に私の1日を素晴らしいものにしてくれました！
Steven Wolock
これ、ありがとうございます！素晴らしい機能です。
質問: -webkit-transform: rotate(360deg) の後の閉じ括弧は正しいですか？
etech0
サイトに設定したのですが、アイコンが表示されません！なぜ動作しないのか、どうすればわかりますか？
よろしくお願いします！
WPBeginnerサポート
いくつかの理由が考えられます。まず、画像をアップロードしたことを確認し、次に background: url が正しいURLであり、画像にリンクしていることを確認してください。最後に、jqueryと.jsファイルがロードされていることを確認してください。最後に、display、position、text-indentのCSS値を調整してみてください。
管理者
etech0
解決しました。画像に合わせて40pxの高さと幅を変更する必要がありました。
素晴らしいチュートリアルをありがとうございました！
Alexander Gruzov
ありがとうございます！