ワードプレスの運営サイト内にページ上部へ戻るボタンを設置するプラグイン「Pagetop Easy Smooth Scroll」

矢印がついたボタンを押すとウェブサイトの上部にスルスルっと移動する機能がありますよね。WEBの世界では「ページの先頭へ戻るボタン（Pagetop）」と呼ばれています。先日お客様より「ページの上部へ戻るボタンが動かない」といったご相談をいただきプラグインを納品いたしました。

まず「お客様環境でなぜ動かないのか？」を検証させていただいたところウェブサイトにさまざまなバージョンのjQueryが混在しており機能がバッティングしていることが原因として考えられました。

そこで「jQueryに依存しないページの先頭へ戻る」を作成いたしました。ちなみに使用したスクリプトはご依頼主さまからの持ち込みだったので本プラグインは一般のダウンロードに公開しておりません。

ワードプレスの運営サイト内にページ上部へ戻るボタンを設置するプラグイン「Pagetop Easy Smooth Scroll」

今回はとてもいい勉強になりました。プラグインで導入した「Pagetopが動かない理由」にjQuery同士のバッティングがあるということが判明したからです。動作しない＝機能の衝突というのは収穫でした。

ワードプレスではさまざまなプラグインが配布されています。もちろん、jQueryベースで動く前提として開発されているプラグインも多いです。問題はプラグインが増えすぎた状態での機能バッティング。

jQueryのバージョンが原因ならjQueryに依存しないプラグインも必要ですよね。

大半のPagetopはjQueryで動く

当研究所に導入している「ページの先頭へ戻る」はjQueryベースで動いています。

カンタンに言えば「jQuery」があればJavaScriptのプログラミングを短縮できます。通常のJavaScriptなら何十行も書かないといけない命令文がjQueryライブラリを使えば数行で収まるのが最大の特徴です。

jQueryベースではないプラグイン

以前に「jQueryベースではないローディング画面」についてもその点を触れているのでぜひご参照ください。

ワードプレスで作成したウェブサイトにロゴ画像が表示できるおしゃれなローディング画面を導入する方法

ワードプレスには管理画面でもjQueryが使われているので今後もなくなることは多分ありません。仮に別の新技術へ置き換わったり、素のJavaScriptに移行する可能性もあるかもしれませんが、jQueryは「MITライセンス」で提供されているのでライセンス周りもGPLと非常に相性がよく置き換えるメリットがないからです。

運営者目線では動くか動かないか

サイト運営者としては「どんな技術か？」よりも「動くのかどうか？」が大切ですよね。ちなみにjQueryは2006年から始まったプロジェクトでとても便利なライブラリなので多くの開発者が使っています。

今回ご依頼で作ったプラグイン「Pagetop Easy Smooth Scroll」を有効化すると以下が表示されます。ボタンは一定量のスクロールがあった場合の限定して右下に固定で表示される仕組みですね。

なお、持ち込みのスクリプトのライセンスがはっきりしない状態だったのでご使用は本人のみで留めています。

アイコンを変更するカスタムも可

持ち込みのスクリプトではボタン内の「上向き矢印」にCSSが使われていました。

具体的に言えばCSSのborderを加工して、角度をつけて斜めにして矢印っぽく形を再現する仕組みでした。最近であればアイコンに「Font Awesome」も使えるのでカスタマイズで仕上げることも可能ですよね。

当然、CSSでボーダーを加工しても良いのですが、あらゆるブラウザで同じ解釈ができるかはまた話が違うので本来はフォントアイコンで矢印を置き換えて仕上げるのが柔軟性が高まるのかもしれません。

まとめ

本日は「非jQueryのページトップへ戻るボタン」を解説いたしました。

ご依頼主さまが「個人的に使いたい」という状況だったので特別に開発させていただきました。運営中のウェブサイトにはjQueryのバージョンが混在しており他にも動かないプラグインがあるとのこと。

もちろん、構造にもよりますが複雑な機能を実装するプラグインを入れすぎたらバッティングの可能性も上がりますよね。シンプルな作りで機能同士がケンカしないプラグインを厳選すると良さそうです。