トップに戻る

トップに戻るを実装する

一定数スクロールすると矢印を表示して、トップに戻るようにします。矢印は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;
	}
}

Font Awesomeのフォントを指定するには、以下の部分を変更します。

content: '\f062';   /* Font Awesome Unicord*/

Font Awesomeのサイトでフォント選択の画面より・・・

フォントを選択する画面上の右側上の方の「f106」の部分にマウスカーソルを合わせてクリックするとユニコードをコピーできます。

JavaScriptの設定

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;
      });
});

ここでは、custom-scripts.jsというファイル名にしていますが、ファイル名は特に決まりはありません。

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
});

JSファイル名を変更した場合は、custom-scripts-jsの部分を書き換えて下さい。

wp_enqueue_script( 'custom-scripts-js', get_template_directory_uri() . '/custom-scripts.js', array('jquery'), '1.0.0', true );

関連サイト

Font Awesome https://fontawesome.com/

矢印を探すには「arrow」で探すと良いです。

最近の記事

カテゴリー

カレンダー

2025年2月
 12
3456789
10111213141516
17181920212223
2425262728  

タグクラウド

css gutenberg html JavaScript カスタマイズ カラム テーマ プラグイン ページビルダー

Beabo

コンテンツへスキップ