WordPressで超簡単に「トップに戻る」ボタンを実装する方法
WordPressのサイトに「トップに戻る」ボタンを設置したいけど、難しそう…と思っていませんか？
この記事では、初心者の方でもコピペで簡単実装できる「超簡単な方法」をご紹介します！
スクロールに追随する常時固定型戻るボタンの場合
１．「header.php」の「head」内にスクリプトを記述
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>２．「footer.php」の「/body」上部に下記コード
<p id="pagetop"><a href="#"><img src="" width="" height="" alt="ページトップボタン"></a></p>３．ボタンの画像を作成しアップロード
アップロードしたら、URLをコピーして、上記src=”〇〇〇〇〇〇”に挿入します。
４．その下に下記コード
<script>
$(function(){
var topBtn=$('#pagetop');
topBtn.hide();
$(window).scroll(function(){
if($(this).scrollTop()>800){
//---- 画面を800pxスクロールしたら、ボタンを表示する
topBtn.fadeIn();
}else{
//---- 画面が800pxより上なら、ボタンを表示しない
topBtn.fadeOut();
}
});
topBtn.click(function(){
$('body,html').animate({
scrollTop: 0},500);
return false;
});
});
</script>
５．CSSを記述
#pagetop {
position: fixed;
bottom: 50px;
right: 30px;
}
@media screen and (max-width:768px) {
#pagetop img {
display:none;
}
}最下部に固定する戻るボタンの場合
１．head内に記述
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
２．footerの中にボタンコードを設置
<footer>
<p id="pagetop"><a href="#"><img src="" width="" height="" alt="ページトップボタン"></a></p>
</footer>３．ボタンの画像を作成しアップロード
アップロードしたら、URLをコピーして、上記src=”〇〇〇〇〇〇”に挿入します。
４．その下に下記コード
<script>
$(function(){
var topBtn=$('#pagetop');
topBtn.hide();
$(window).scroll(function(){
if($(this).scrollTop()>800){
//---- 画面を800pxスクロールしたら、ボタンを表示する
topBtn.fadeIn();
}else{
//---- 画面が800pxより上なら、ボタンを表示しない
topBtn.fadeOut();
}
});
topBtn.click(function(){
$('body,html').animate({
scrollTop: 0},500);
return false;
});
});
</script>５．CSSを記述（フッターの中央に固定配置）
footer {
position:relative;
}
#pagetop {
position:absolute;
top:-35px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
まとめ
「トップに戻る」ボタンを設置するだけで、サイトの使いやすさはグッと向上します。
今回ご紹介した方法なら、初心者の方でも簡単に実装できます。
ぜひあなたのWordPressサイトにも取り入れて、ユーザーに優しいデザインを目指してみてください！
下記サイト様の情報も参考にさせていただきました。
参考サイト：https://www.milkmemo.com/entry/pagetop_button_setti#google_vignette
