【スマホ対応】割と簡単にTOPへ戻るボタンを設置する方法【プラグインなし】

カテゴリー : WordPress

投 稿 日 :

更 新 日 :

この記事は書いてから 約3年 経過しています。

※1年以上経過しているので情報が古い可能性があります。

タ  グ  : |

【スマホ対応】割と簡単にTOPへ戻るボタンを設置する方法【プラグインなし】

これまで愛用していたプラグインに Dynamic To Top というプラグインがありまして、ワンクリックでページのトップまでスルスルスルッ!と戻れるという機能をコレで導入してたんですが、どうも head にズラズラとコードが書かれてしまって、SEO的にどうなの?と考えてしまいました。

そこで、footer にコードを追加するようにしたくて、プラグインなしで導入してみました。

PC、スマホ、両方に対応しています。

導入は2ステップ

お使いのテーマの functions.php と style.css に短いコードを追加するだけです。

ちなみに functions は プラグイン Code Snippets を導入すると分かりやすくて扱いやすくなります。

functions.php にコードを追加

functions.php に下記コードを追加してください。

お使いのテーマの footer.php に wp_footer があると思います。

wp_footer が呼ばれると上記コードが読み込まれるようになります。

var offset = 800;
↑この値を小さくすると ボタンが早く出現します。

var duration = 300;
↑この値を小さくすると戻るスピードが速まり、大きくすると遅くなります。

style.css に追加

下記を style.css に追加して下さい。

media screen で横幅が960px以上の時は少し左上寄りにボタンを出してます。

ボタンの位置は bottom と right の数字で調整してね。

このように表示されます

トップへ戻るボタン(PC)

↑ パソコンでの表示
↓ スマホでの表示

トップへ戻るボタン(スマホ)

以上です。ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。

*