目次
SANGO（サンゴ）で「トップへ戻るボタン」を設定する方法
SANGOで「トップへ戻る」ボタンを表示させる方法を説明します。
画面下へスクロールしていくと右下に現れるこういうボタンです。
ページの下の方に移動したときに、こういうスッとページ上部まで戻れるボタンが付いているのは大切ですよね。
ユーザビリティの点からも必ず設定しておいた方がいいボタンです。
「トップへ戻るボタン」の設定方法
WordPress管理画面左カラムから「外観」→「SABGOオリジナル機能」→「トップへ戻るボタン」と画面を遷移してください。
このような設定画面が表示されます。
以下の2つのチェックボックスにチェックを入れて、「公開」をクリックしてください。
■【PC表示】トップへ戻るボタンを表示する
↓
これで設定は完了です。
もしボタンの色を変更したい場合には、「ボタン色」で好みの色へ変更しましょう。
あとは、ユーザー側の公開ページにアクセスし「トップへ戻るボタン」が表示されているかを確認してみてください。
表示されていればOKです。
「トップへ戻るボタン」をオリジナル画像にカスタマイズする方法
SANGOでは、「トップへ戻るボタン」をオリジナルにカスタマイズすることもできます。
子テーマの「functions.php」を開いて、以下のコードを追記してください。
※コードは、サルワカさんが公開されていたものをカスタマイズして利用させてもらっています。
if(!is_singular()) return false;
return (wp_is_mobile() and get_option(‘show_to_top’)) or (!wp_is_mobile() and get_option(‘pc_show_to_top’));
}
function go_top_btn(){
if(!is_active_go_top_btn()) return;
echo ‘<a href=”#” class=”totop” rel=”nofollow ugc”><img src=”https://example.com/common/img/icon.png” /></a>’;
}
「https://example.com/common/img/icon.png」の画像URLを、自身の画像URLへ変更してください。
これで以下のように「トップへ戻るボタン」がオリジナル画像へ変わります。
子テーマ「functions.php」の変更方法
子テーマの「functions.php」に上記コードを追記する方法も説明しておきます。
まず、FFFTPを使ってサーバー上にファイルのアップロードを行える方は、子テーマの中にある「functions.php」に直接コードを追記した方が早いです。
ただ、WEB制作の仕事に絡んだことのない方だったりすると、そういったツールの使用方法を覚えるのも大変です。
そこで、そのような場合にはWordPressの管理画面上から直接修正してしまいましょう。
まず、管理画面左カラムから「外観」→「テーマファイルエディター」と移動してください。
こちらの画面が開きます。
↓
画面右に「テーマのための関数 (functions.php)」があるので、クリックして開いてください。
「*functions.phpへの追記は以下に」と記載されている下に、上記のコードを貼り付けます。
あとは、「ファイルを更新」をクリックして保存してください。
↓
このように「ファイルの編集に成功しました。」と表示されればOKです。
プラグイン「Autoptimize」とは相性が悪い
もし、「Autoptimize」というプラグインを使用されている場合、「トップへ戻るボタン」が表示されないことがあります。
その場合には、「Autoptimize」を無効化してください。
もしくは、「Autoptimize」の設定画面から「JavaScript コードの最適化」のチェックを外してください。
「トップへ戻るボタン」のまとめ
「トップへ戻るボタン」はユーザビリティ的に重要なボタンです。
SANGOでは「トップへ戻るボタン」を簡単に表示できるようになっています。
こちらの記事ではその方法について詳しく説明しているので、ぜひ参考にして頂ければ嬉しいです。
