サイトに長文が頻繁に表示される場合は、トップに戻るボタンを追加する必要があります。結局のところ、ウェブサイト構築ユーザーエクスペリエンスを考慮する必要があります。この記事では、WordPressサイトにトップに戻るボタンを追加する方法を紹介します。
プラグイン版 方法
使用WordPressプラグイン開封してすぐに使える方法で、非常に簡単で、初心者の方に適しています。
WPFront Scroll Top
WPFront Scroll Topプラグインを使用すると、簡単にgo to top（トップに戻る）ボタンを追加でき、カスタマイズ可能なオプションと複数のトップに戻るアイコンを備えています。WPFront Scroll Topプラグインには以下の機能があります。
特徴
ユーザーがページを下にスクロールしたときにボタンを表示します。
アニメーションを使用してページをトップにスクロールします。
ページ内の要素にリンクします。
URLリンクを使用して他のページに移動します。
テキスト、画像、またはFont Awesomeボタンを作成します。
任意の画像を設定します。
小型デバイスで非表示。
iframe上で非表示。
ページ/投稿フィルター。
自動非表示。
非同期JavaScript。
WPFront Scroll Topには非常に多くのボタンエフェクトが付属しており、カスタム画像もサポートしています。下図の通りです。
WPFront Scroll Topをインストールした後、設定で有効にしてから使用する必要があります。JSの非同期読み込みをサポートしています。
プラグインのダウンロードURL：https://wordpress.org/plugins/wpfront-scroll-top/
To Top
To Topの設定は比較的簡単で、サポートされている機能は以下の通りです：
特徴
ユーザーがページを下にスクロールしたときにアイコンを表示
Customizerでリアルタイムプレビュー
アニメーションを使用してページをトップにスクロール
アイコン/画像の不透明度を設定
トップに戻るボタンにアイコン（ダッシュボード）または画像を設定
アイコンの場合、背景色、アイコン色、アイコンサイズ、アイコン形状（正方形から円形）を設定
任意の画像を設定
画像の幅を設定
アイコンの位置を設定
管理ページで上部ボタンを表示/非表示
自動非表示
小型デバイスで非表示
デフォルトでは3つのアイコンのみ表示され、アイコンの色は変更できますが、カスタマイズはできません。
プラグインのダウンロードURL：https://wordpress.org/plugins/to-top/
Simple Scroll to Top Button
Simple Scroll to Top Buttonの設定も比較的簡単で、デフォルトで10種類のトップに戻るボタンデザインが付属しており、カスタム画像はサポートされていませんが、ボタンの形状、色、サイズなどを設定できます。
特徴
軽量で高速
明確なコーディング標準でコードを保護
多くの設定を備えた直感的なインターフェース
クロスブラウザ対応（最新のブラウザで問題なく動作）
すべての WordPress テーマと互換性あり
RTL（右から左）対応
翻訳対応
主な機能は以下の通りです
Retinaディスプレイ対応
FontAwesome統合（40のアイコン組み合わせが利用可能）
背景色変更機能（無制限の色）
シンボル色変更機能（無制限の色）
変更可能なボタンの背景とシンボル
変更可能なボタンサイズ
可変のスクロール持続時間
ボタンの有効/無効オプション
全サイトまたはトップページのみにボタンを表示するオプション
ページ上部での自動非表示ボタン
ライブプレビュー
Simple Scroll to Top Buttonのボタン効果は以下の通りです：
プラグインのダウンロードURL：https://wordpress.org/plugins/simple-scroll-to-top-button/
Scroll Top
Scroll Topは非常にシンプルで、To Topと同様にカスタムCSSスタイルをサポートしています。
機能：
設定不要。
カスタムターゲット。
無限の色。
Retina対応（アイコンフォント）。
テキストまたはアイコンフォントを選択。
カスタマイズ可能なテキスト。
位置切り替え（左または右）。
お好みのアニメーションに変更。
カスタムCSSエリア
Scroll Topの効果は以下の通り：
プラグインのダウンロードURL：https://wordpress.org/plugins/scroll-top/
WordPressプラグインライブラリで「got to top」または「back to top」を検索すると、さらに多くのトップに戻るプラグインが見つかります。機能はどれも似たり寄ったりなので、使えるものを選べばOKです。
次はコード版のWordPressサイトに戻るボタンを追加する方法です。
コード版の方法
コード版はネットで検索すると多くの方法がありますが、ここではNaibaサイトで現在使用している方法のみを共有します。
まず、back-to-top.jsという名前のファイルを新規作成し、内容は以下の通り：
jQuery( document ).ready(function($){
var offset = 100,
speed = 250,
duration = 500,
scrollButton = $('#topbutton');
$( window ).scroll( function() {
if ( $( this ).scrollTop() < offset) {
scrollButton.fadeOut( duration );
} else {
scrollButton.fadeIn( duration );
}
});
scrollButton.on( 'click', function(e){
e.preventDefault();
$( 'html, body' ).animate({
scrollTop: 0
}, speed);
});
});また、ここをクリックしてgithubから直接ダウンロード（プロキシが必要な場合があります）
作成後、jsファイルをテーマファイルのjsディレクトリにアップロードします。
次にこのjsファイルを読み込みます。方法は2つあり、1つはテーマのfunctions.phpで読み込む方法、もう1つはテーマのフッターファイルに直接追加する方法です（Naibaはこちらを使用）。
テーマ関数で参照する場合は、関数ファイルfunctions.phpに以下のコードを挿入します。
/**
* 引用JS文件
*/
function themeslug_add_button_script() {
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/back-to-top.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'themeslug_add_button_script' );
/**
* 网页添加返回按钮
*/
function themeslug_add_scroll_button() {
echo '<a href="#" id="topbutton"></a>';
}
add_action( 'wp_footer', 'themeslug_add_scroll_button' );また、Code Snippetsを使用して追加することもできます。 上記のコードは、一方で安全性が高く、またテーマを変更してもコードが引き続き機能し、再追加する必要がないという利点があります（ただし、テーマ変更後はjsファイルをアップロードするか、絶対アドレスに自分で修正する必要があることに注意してください）。
フッターファイルを修正して参照する場合は、footer.phpに以下のコードを挿入します。
<a href="#" id="topbutton"></a> <script type='text/javascript' src="https://blog.naibabiji.com/wp-content/themes/twentytwelve/js/back-to-top.js "></script>
上記コードのhttps://blog.naibabiji.com/wp-content/themes/twentytwelve/js/back-to-top.jsは、ご自身の実際のアドレスに変更してください。
最後にCSSスタイルを追加します。
テーマのCSSファイルstyle.cssに、以下のコードを追加します。
#topbutton {
position: fixed;
display: none;
height: 40px;
width: 40px;
line-height: 40px;
right: 15px;
bottom: 15px;
z-index: 1;
background: #000000;
border-radius: 2px;
text-decoration: none;
color: #ffffff;
text-align: center;
}
#topbutton:after {
content: "\2191";
}すべて完了したら、フロントエンドをリフレッシュして効果を確認できます。
ボタンが„↑“記号の場合、„▲“に変更するには\2191を\25B2に修正します。