WordPressサイトに簡単にトップに戻るボタンを追加する方法

サイトに長文が頻繁に表示される場合は、トップに戻るボタンを追加する必要があります。結局のところ、ウェブサイト構築ユーザーエクスペリエンスを考慮する必要があります。この記事では、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をインストールした後、設定で有効にする必要があり、非同期JavaScriptの読み込みに対応しています。 プラグインのダウンロード先：https://wordpress.org/plugins/wpfront-scroll-top/

To Top

To Topの設定は比較的簡単で、サポートされている機能は以下の通りです：特徴ユーザーがページを下にスクロールするとアイコンが表示されます カスタマイザーでのリアルタイムプレビュー アニメーションを使用してページをトップまでスクロール アイコン/画像の不透明度を設定 アイコン（ダッシュボード）または画像をトップボタンに設定 アイコンの場合、背景色、アイコン色、アイコンサイズ、アイコン形状（正方形から円形まで）を設定 任意の画像を設定 画像の幅を設定 アイコンの位置を設定 管理ページでトップボタンを表示/非表示 自動非表示 小型デバイスで非表示 インターフェースはデフォルトで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スタイルをサポートしています。 機能は以下の通りです： 設定不要。 カスタムターゲット。 無制限の色。 レティナ対応（アイコンフォント）。 テキストまたはアイコンフォントを選択。 カスタマイズ可能なテキスト。 位置切り替え（左または右）。 好みのアニメーションに変更。 カスタムCSSエリア Scroll Topの効果は以下の画像の通りです：プラグインのダウンロードURL：https://wordpress.org/plugins/scroll-top/WordPressプラグインディレクトリで「got to top」または「back to top」を検索すると、さらに多くのトップに戻るプラグインが見つかります。機能はどれも大同小異なので、使えるものを1つ選べば十分です。 次に、コード版の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つはテーマ関数で参照する方法、もう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に変更してください。