トップに戻るを実装する
一定数スクロールすると矢印を表示して、トップに戻るようにします。矢印はFont Awesomeを使って表示します。
HTML的にはbodyタグの下にリンク貼って、CSSとJSで完成とHTMLでやるとシンプルに出来るのですが、ブロックエディターに対応したやり方を考えると少し手間がかかります。ブロックエディター以外のテーマでも使えます。
使用出来るテーマ
基本形は、ここに書いているので動くと思いますが、各ファイルの場所に注意して、各ファイルをfunction.phpの方で読み込む設定を忘れずに！
CSSの設定
テーマディレクトリに作成します。
/theme/テーマ名/styles.css
/* back to top */
html {
scroll-behavior: smooth;
}
#page_top {
a {
position: fixed;
bottom: 24px;
right: 24px;
width: 48px;
height: 48px;
text-decoration: none;
background-color: #00908b;
display: block;
text-align: center;
border-radius: 24px;
z-index: 10;
}
a::before {
content: '\f062'; /* Font Awesome Unicord*/
font-family: 'Font Awesome 6 Free';
font-size: 30px;
font-weight: 900;
color: #fff;
line-height: 48px;
}
}
JavaScriptの設定
/theme/テーマ名/custom-scripts.js
// ページトップをゆっくり表示する
jQuery(function(){
var pagetop = jQuery('#page_top');
pagetop.hide();
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 100) {
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
jQuery('body, html').animate({ scrollTop: 0 }, 500);
return false;
});
});
function.phpの設定
/theme/テーマ名/function.php
// 外部ライブラリの読み込み
function add_wp_external_lib() {
// Font Awesomeを読み込む
echo '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />';
// jQueryを読み込む
echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>';
}
// 独自スクリプトの読み込み
function custom_script(){
wp_enqueue_script( 'custom-scripts-js', get_template_directory_uri() . '/custom-scripts.js', array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'custom_script');
// bodyタグの後にHTMLタグの挿入
add_action( 'wp_body_open', function() {
?>
<!-- ここから挿入したいソースコードなどスタート -->
<div id="page_top"><a href="#"></a></div>
<!-- ここまで -->
<?php
});
関連サイト
Font Awesome https://fontawesome.com/
arrowと
