これまで愛用していたプラグインに 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)

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

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

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