Last Updated on 2019年6月28日 by ぞん
目次
こんなやつ
「自分と友人と米領サモアからしかアクセスがないのに、そんなボタンいるのか?」
という問いが頭の中を駆け巡りましたが、 ボタンが欲しくなったのだから仕方ありません。
というわけで、下記のサイトを頼りにさせていただきました。
(プラス wordpressで動かない場合は、$をjQueryに置き換える by 他のサイト)
参考:スクロールでページトップへ戻るボタンを表示させる方法まとめ!
プラグイン「Simple Custom CSS ans JS」で、HTMLとCSSとJSの記述をしました。
「なぜここにコードを記述したら反映されるんだろう~」とか思いながら。
“素人はワードプレスにしとけ“と言われる理由がよくわかりますね(笑)
ところで、ボタンを作りながら検索をかけていると、”レンダリングブロック“という言葉がひっかかりました。おそらく、ボタンの動きにJSが使われているので、その絡みで検索にひっかかってくるのかなと。
「すぐに気が散ってしまうタイプ」である私は、そっちに心を奪われ、それらの記事を読んだところ…
全然わかりませんでした(きっぱり)
が、どうやら、サイトの表示スピードに関係あるのだということだけわかりました。もはや、ボタンのことなどすっかり忘れ、「PageSpeed Insights」とやらで、チェックをしたところ…
「モバイル43、パソコン68」でした。
パソコン68はなんとか平均的ですが、モバイル43は余裕で不合格です。
体感的には、スマホで見ても「そんなに表示遅いか?」って感じだったのですが、
ちょうど読んでいた記事にコードがあったので、functions.phpに貼ってみました。
「モバイル79、パソコン91」に上がりました。
「すっげ~」と喜んだものの…
トップページのスライダーが動かなくなっていました。
一部のページで写真が見えなくなっていました。
グローバルメニューのドロップダウンができなくなっていました。
とりあえず、編集画面で見てみようか~と思ったら、
固定ページも投稿ページも、真っ白になって開かなくなっていました(げっ!)
すぐに元に戻しました。
怖い思いをしましたが、「戻せた」ことに気を良くした私は、違うサイトにあったコードを、懲りずにfunctions.phpに貼りつけてみました。
先のコードは、JSの読み込みを遅らせるもので、次のはJSの読み込み位置を移動するもののようです。方法が違うのなら、うまくいくのかもしれないと思い、試してみました。
「モバイル62、パソコン70」になりました。
特に不具合も起きませんでした。「スマホの点数が改善されたので、これでいいのでは?」という気分に。
もうすっかり、検索キーワードが、「上に戻るボタン」ではなく「サイト読み込み速度」になっていました。
そのため、検索結果が「サイトの表示を速くするプラグイン」になりました。
4つ入れてみました。
結果、「モバイル84、パソコン98」となりました。
何回か測定してみたのですが、10~20ぐらいは点数が前後しました。
特にモバイルは変動が大きかったです。とはいえ、50を切るようなことはなさそうです。プラグインって素敵。
以下、私個人の感想となりますが、
プラグイン③④は、即効性がすごいです。
プラグイン①②は、塵も積もればで威力を発揮しそうです。
もしや、合格点(80点らしい)を出すだけなら、これらのプラグインだけでよかったのでは?
編集画面が真っ白になる恐怖を味わう必要はなかったのでは…という気がしています。
私がやりたかったのは、「上に戻るボタン」を表示することだったのです。。。
ボタンもできました。
タイトルも変えるべきではwww
タイトル変えましたw