ページの先頭に戻るボタンを自作してみた

WordPressには色々なプラグインがあって、簡単に色々な機能が追加できるので便利なのですが、WordPressの高速化をしている段階で「Scroll To Top」というプラグインを外して自作する事にしました。その理由は以前の記事で書いてます。
レンダリングをブロックしている JavaScriptをフッターに移動させる

上記記事を読んで頂けると分かるのですが、レンダリングブロック(読み込みの邪魔)していたjQuery本体をフッターに持っていく作業をした時にどうしてもこの「Scroll To Top」というプラグインをどうにかする必要がでてきました。という訳で今回はこの機能を自作します。

もちろん「Scroll To Top」というプラグインに罪はなく私のわがままです。それまでは不具合なく利用させて頂きました。

Scroll To Topを自作するメリット

実際にページの先頭に戻るボタン「Scroll To Top」を作成して思ったのですが、これは結構メリットがあります。

  • PCページとスマートフォンページでサイズや色を手軽に変更できる
  • プラグインの更新でスタイルが初期状態になる事がない
  • ボタンをクリックした時にURLの最後に「#top」がつかない

これまでプラグインを利用している時にはプラグインの更新される度にプラグインのCSSを編集しなおしておりましたのでこの手間が省けます。それでPCページとスマートフォンページでボタンサイズを手軽に変更する事もできます。

そしてなによりボタンをクリックした時にURLの最後に「#top」がつかないのがメリットです。

プラグイン「Scroll To Top」を使っていて先頭に戻るボタンを押すとURLの最後に「#top」が付きます。

この状態でブックマーク等をすると「http://〇〇.com/#top」というURLで登録されます。つまりブックマーク数が分散される事になりますね。

ページ先頭にスクロールするボタンの作り方

まずは子テーマに「footer.php」を追加しておきます。親テーマの「footer.php」の内容を全部コピーして子テーマの「footer.php」に貼り付けておきます。既にある場合は不要です。

子テーマに「footer.php」を追加できたらそのファイルを開いて一番最後の方にある「/body」という部分を探します。その直前に次の記述をします。正確には「wp_footer()」の後に書いておけばOKです。

ここのpタグで囲まれた部分(▲TOP)がボタンに表示されるテキストになりますのでお好みで変更してもOKです。ただ、スマートフォンでも同じテキストになるのであまり長くならないようにしておきます(ボタンのサイズによっては改行されるため)。

scroll-1

ここのボタン部分には「id=”scroll-top」という名前を付けておきました。上記のコードを入れたら「保存」を忘れずに。

次に子テーマのスタイルシートに記述していきますが、TwentyTwelveのようなレスポンシブデザインのテーマの場合はPCページのスタイルとスマートフォンページのスタイルをそれぞれ指定できます。

まずはPCとスマートフォン共通部分のスタイルを子テーマのスタイルシート(CSS)に書きます。

次にボタンのサイズPC用を追加。

「@media screen and (min-width: 600px)」でブラウザのサイズが600px以上の場合という条件分岐ができます。つまりPCのページならこのサイズにしますという事です。

それと注意点ですが、サイズを変更する場合は「#scroll-top」の「ボタン高さ(height」と「#scroll-top p」の「文字の高さ(line-height)」という部分は同じ数字にしておいて下さい。

これを同じにしておくことでボタンのテキスト部分が垂直方向の真ん中に来ます。ボタンのテキスト部分が上に寄ったり下に寄ったりを解消できます。

それと「display:none」でボタンは非表示にしておきます。これは後でスクリプトを使ってフェードインさせたりフェードアウトさせるためです。

続いてスマートフォン用のボタンサイズを指定しましょう。先ほどブラウザサイズが600px以上の場合という条件分岐をしたので599px以下の場合という条件分岐でスマートフォン用のサイズを指定します。

「@media screen and (max-width: 599px)」というのがブラウザサイズ599px以下ならという条件分岐です。PC用とスマートフォン用でボタンの横幅を「150px」と「120px」に変更して、表示位置「right,bottom」も若干変更しました。

このようにスタイルシート1枚で条件分岐できるのがレスポンシブデザインの良い所です。

スクロールボタンを機能させる

さて、スタイルシートができましたので後はJavaScript(jQuery)の記述をしてWordPressで出力するようにします。これをしないと機能しません。レンダリングブロック(読み込みの邪魔)にならないようにフッターで出力します。そう、WordPress高速化のためにというのが目的でした。

さて、自作のJavaScriptをWordPressで利用する方法は別記事で書いておりましたので次の記事を参考にしてスクロールトップボタンを機能させてみましょう。
自作のJavaScriptをWordPressで利用する方法

最終更新日:2019/08/09

おすすめのASP
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

ページの先頭に戻るボタンを自作してみた”に15件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    Okingatarashi様

    返信ありがとうございます。この部分の高さと文字の大きさを大きくしてみました。スタイルシートに以下を追加してみて下さい。

    これで反映されるか確認をしてみてください。高さ(height)で調整して、行間(line-height)で品番のテキストを中央あたりにくるようにしてます。

    もしこれで反映されない場合にはお手数ですが再度コメント下さいませ。

  2. Okingatarashi

    しげぞう様

    こんにちは。お世話になりっぱなしの又、私です。
    HELP!をお願いしします。いつも、説明が下手で、ごめんなさい。

    販売ページですが、Add to Shoping cartの上の品番の入った帯部分の件です。

    これはBOX?とかみたいなのですが、高さを高くして文字サイズを大きく表示したいですが、
    その場合は、どうしたらよいでしょうか?

    6/22今現在、混乱したので追加のスタイルはバックアップを取って消した状態にしています。
    何度も申し訳ないと思うのですが、出来たらご指導下さい。宜しくお願いします。 

  3. Okingatarashi

    しげぞう様
    こんにちは。いつも本当にお世話になっています。遅いなんて、思っていません。どんなに助かっているか・・・
    透明度・・・そう言う事なんですね!
    しげぞう様が居てくれるお蔭で、こんなんが書けるようになっています。
    ありがとうございます。

    そっか!グレーか!サイドバーの色合いに揃えるのは有かも!と、同じ色でやってみたら今一…どうかな?何故、薄い色じゃないんだ?でした。ポンコツ炸裂!です。

    そうなんです!ここをもう少し見やすくしたくて、
    帯の中に、文字 じゃなくて、文字の下に太線。(うっすら線は消したかったのにね)
    にするのは、どうだろう・・・と思っています。
    現状でも、もっと大きい文字にしてあるのですが
    帯幅の変え方が分からないから・・・字、でっかくならない?って感じです。
    出来れば、ご教授を、宜しくお願いします。

  4. しげぞう 投稿作成者

    Okingatarashi様

    返信ありがとうございます。全然迷惑でないですよ(笑)前回の質問の意図を勘違いしてまして今回、やっと理解しました。すみません!!

    えっと、薄くなっているのがCSSで「opacity」を使ってると思うのですが、これだと全体(テキストを含め)が薄くなります。なので、既に薄くなった色(カラー)を探して背景色として設定してやればいいかなと思いました。

    スタイルシートに以下の記述を追加して下さい。

    背景色は既に薄くなった色(現在の色)に近い色を探して見ましたので、多分近い色になるかと思います。もし上手く反映されない場合にはお手数ですが再度コメント下さい。

  5. Okingatarashi

    しげぞう様
    こんにちは。いつもお世話になりっぱなしになって居ります。
    ご迷惑ばかりのHELP!です。ごめんなさい。

    販売のページですが、カートに入れるボタン(赤い Add to Shoping cart)上の薄黄緑のボーダーですが、「このページのボタンの色を薄くする」を利用して、薄くしてみたのですが、
    重要な文字まで薄くなってしまいました。薄黄緑は薄くして、文字を薄くしない様にする事って
    出来ますか?
    ご教授願えますと、助かります。宜しくお願いします。

  6. しげぞう 投稿作成者

    Okingatarashi様

    お久しぶりです!返信が遅くなってすみません。サイトを確認してみたのですが、特におかしい感じはしないですが、サイドバーの文字色が薄いグレーなので、この部分の帯の色も基本の薄いグレーでもいいかな?と思ったりします。

    品番の文字色は既に太字(bold)にされているようですので、後は文字の大きさとか文字の色でもう少し目立つ感じにできたら良いかもしれませんね。

    スタイルシートでの装飾自体も特に問題はなさそうですが、透明度(opacity)はここでは不要かと思います。これはコンテンツが重なる場合に使います。重なるコンテンツの下の部分を少しだけ見せたい場合に使ったりするのですが、この帯の部分では不要かと思います。

    それよりも帯の色や文字のカラー、文字の大きさでメリハリを付けた方が良い感じがしますので、一度文字の大きさや背景色で調整してみると良いと思います。

    もし装飾してみて気に入らないとかもっと目立つようにしたいなどありましたらまたコメント下さい。希望に合うような装飾も考えてみますね!