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です。
<div id="scroll-top"><p>▲TOP</p></div>
ここのｐタグで囲まれた部分（▲TOP）がボタンに表示されるテキストになりますのでお好みで変更してもOKです。ただ、スマートフォンでも同じテキストになるのであまり長くならないようにしておきます（ボタンのサイズによっては改行されるため）。
ここのボタン部分には「id=”scroll-top」という名前を付けておきました。上記のコードを入れたら「保存」を忘れずに。
次に子テーマのスタイルシートに記述していきますが、TwentyTwelveのようなレスポンシブデザインのテーマの場合はPCページのスタイルとスマートフォンページのスタイルをそれぞれ指定できます。
まずはPCとスマートフォン共通部分のスタイルを子テーマのスタイルシート（CSS）に書きます。
/* PCページとスマートフォン共通スタイル */
#scroll-top{ /* ボタンのデザイン */
background-color:#1F5E73; /* ボタンの背景色 */
color:#fff; /* ボタンの文字色 */
text-align:center; /* ボタン内の文字を中央に */
position:fixed; /* 画面がスクロールしても固定する */
right:20px; /* 固定する場所は右から20px */
bottom:20px; /* 固定する場所は下から20px */
display:none; /* ボタン表示は最初は非表示 */
margin:0 0; /* ボタンの余計な余白はいらない */
border-radius: 10px; /* 角を丸く */
-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px;
cursor:pointer; /* カーソルを指のマークに */
opacity:0.7; /* ボタンの透明度 */
}次にボタンのサイズPC用を追加。
/* ボタンのサイズPC用 */
@media screen and (min-width: 600px) {
#scroll-top{ /* ボタンのデザイン */
width:150px; /* ボタンの横幅 */
height:40px; /* ボタン高さ */
}
#scroll-top p{ /* ボタンのテキスト部分 */
line-height: 40px; /* 文字の高さ */
}
}「@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) {
#scroll-top{ /* ボタンのデザイン */
width:120px; /* ボタンの横幅 */
height:40px; /* ボタン高さ */
position:fixed; /* 画面がスクロールしても固定する */
right:10px; /* 固定する場所は右から10px */
bottom:10px; /* 固定する場所は下から10px */
}
#scroll-top p{ /* ボタンのテキスト部分 */
line-height: 40px; /* 文字の高さ */
}
}「@media screen and (max-width: 599px)」というのがブラウザサイズ599px以下ならという条件分岐です。PC用とスマートフォン用でボタンの横幅を「150px」と「120px」に変更して、表示位置「right,bottom」も若干変更しました。
このようにスタイルシート1枚で条件分岐できるのがレスポンシブデザインの良い所です。
スクロールボタンを機能させる
さて、スタイルシートができましたので後はJavaScript（jQuery）の記述をしてWordPressで出力するようにします。これをしないと機能しません。レンダリングブロック（読み込みの邪魔）にならないようにフッターで出力します。そう、WordPress高速化のためにというのが目的でした。
さて、自作のJavaScriptをWordPressで利用する方法は別記事で書いておりましたので次の記事を参考にしてスクロールトップボタンを機能させてみましょう。
⇒自作のJavaScriptをWordPressで利用する方法
コメント
しげぞう様
本当にありがとうございます。
私がしげぞうさんのようになれるって思わないけど、
しげぞうさんが助けてくれるように、何かで誰かの役に立つようになりたいと思います。
この先、相当おんぶにだっこのお世話をかけると思います。
本当に、ご面倒な事と思いますが宜しくお願いします。
Okingatarashi様
返信ありがとうございます！反映されて良かった！！私も最初は素人からのスタートだったので、こんな風に還元出来ることが本当に嬉しいです、ありがとうございます。でもここがスタートラインなんで、今後もまた何かあれば遠慮なく連絡下さい。こちらこそよろしくお願い致します！
しげぞう様
こんにちは！本当にありがとうございます。
dekita 出来た！dekita！できたぁ〜！！
今まで教えて頂いた事や、今回教えて頂いた事で
あれこれ何度か試しました。私的に「これでどうだ！」(笑！)
になりました。本当にありがとう‼ございます。
「素人のくせに独学だけでここまでよく来たね」って、HP関係の人にも言われます。
なので、「本当に根気よく教えてくれる人が居ます」って、答えます。
6/25 OPEN させます。一人であれこれ戦って１０ヶ月。やっとスタートラインです。
頑張れたのも、しげぞうさんが根気よく助けてくれたからです。
本当に感謝します。ありがとうございます。
出来ればこれからも宜しくお願いします。
Okingatarashi様
返信ありがとうございます。この部分の高さと文字の大きさを大きくしてみました。スタイルシートに以下を追加してみて下さい。
.skuname { height: 40px; line-height: 30px; font-size: 16px; }これで反映されるか確認をしてみてください。高さ（height）で調整して、行間（line-height）で品番のテキストを中央あたりにくるようにしてます。
もしこれで反映されない場合にはお手数ですが再度コメント下さいませ。
しげぞう様
こんにちは。お世話になりっぱなしの又、私です。
HELP!をお願いしします。いつも、説明が下手で、ごめんなさい。
販売ページですが、Add to Shoping cartの上の品番の入った帯部分の件です。
これはBOX?とかみたいなのですが、高さを高くして文字サイズを大きく表示したいですが、
その場合は、どうしたらよいでしょうか？
6/22今現在、混乱したので追加のスタイルはバックアップを取って消した状態にしています。
何度も申し訳ないと思うのですが、出来たらご指導下さい。宜しくお願いします。
しげぞう様
こんにちは。いつも本当にお世話になっています。遅いなんて、思っていません。どんなに助かっているか・・・
透明度・・・そう言う事なんですね！
しげぞう様が居てくれるお蔭で、こんなんが書けるようになっています。
ありがとうございます。
そっか！グレーか！サイドバーの色合いに揃えるのは有かも！と、同じ色でやってみたら今一…どうかな？何故、薄い色じゃないんだ？でした。ポンコツ炸裂！です。
そうなんです！ここをもう少し見やすくしたくて、
帯の中に、文字 じゃなくて、文字の下に太線。(うっすら線は消したかったのにね)
にするのは、どうだろう・・・と思っています。
現状でも、もっと大きい文字にしてあるのですが
帯幅の変え方が分からないから・・・字、でっかくならない？って感じです。
出来れば、ご教授を、宜しくお願いします。
Okingatarashi様
返信ありがとうございます。全然迷惑でないですよ（笑）前回の質問の意図を勘違いしてまして今回、やっと理解しました。すみません！！
えっと、薄くなっているのがCSSで「opacity」を使ってると思うのですが、これだと全体（テキストを含め）が薄くなります。なので、既に薄くなった色（カラー）を探して背景色として設定してやればいいかなと思いました。
スタイルシートに以下の記述を追加して下さい。
.skuname { background-color: #e3eeb4; opacity: 1; }背景色は既に薄くなった色（現在の色）に近い色を探して見ましたので、多分近い色になるかと思います。もし上手く反映されない場合にはお手数ですが再度コメント下さい。
しげぞう様
こんにちは。いつもお世話になりっぱなしになって居ります。
ご迷惑ばかりのHELP!です。ごめんなさい。
販売のページですが、カートに入れるボタン(赤い Add to Shoping cart)上の薄黄緑のボーダーですが、「このページのボタンの色を薄くする」を利用して、薄くしてみたのですが、
重要な文字まで薄くなってしまいました。薄黄緑は薄くして、文字を薄くしない様にする事って
出来ますか？
ご教授願えますと、助かります。宜しくお願いします。
Okingatarashi様
お久しぶりです！返信が遅くなってすみません。サイトを確認してみたのですが、特におかしい感じはしないですが、サイドバーの文字色が薄いグレーなので、この部分の帯の色も基本の薄いグレーでもいいかな？と思ったりします。
品番の文字色は既に太字（bold）にされているようですので、後は文字の大きさとか文字の色でもう少し目立つ感じにできたら良いかもしれませんね。
スタイルシートでの装飾自体も特に問題はなさそうですが、透明度（opacity）はここでは不要かと思います。これはコンテンツが重なる場合に使います。重なるコンテンツの下の部分を少しだけ見せたい場合に使ったりするのですが、この帯の部分では不要かと思います。
それよりも帯の色や文字のカラー、文字の大きさでメリハリを付けた方が良い感じがしますので、一度文字の大きさや背景色で調整してみると良いと思います。
もし装飾してみて気に入らないとかもっと目立つようにしたいなどありましたらまたコメント下さい。希望に合うような装飾も考えてみますね！
しげぞう様
HELP!の続きです。
青緑色の帯の中に文字が入っていますが、
これ…帯分の長さの太線が入る方がきれでしょうか…
はっきり区切りをつけるには帯の色(基本は薄いグレーでした)が変わればいいかな？と、思ったのですが、ちょっと、うるさいかな？と、迷います。
単純に青緑の色番が問題で赤色帯に文字を白とか。が、いいのか？この場合も透明タイプにしたいのです。
又は、帯でなく太線にして、
赤い太線にして、文字の色をいつもの濃いグレーとか。
太線ににする時はどう書いたらいいでしょうか？線と帯はどちらがいいと思われますか？アドバイスも頂けないかと思います。
ご面倒ばかりで申し訳なく思います。出来れば宜しくお願いします。
しげぞう様
ご無沙汰してます！こんにちは。
HELP!の私です！
サーバー引越し、データのインポートとエクスポートでは上手くいかず、結局、ちまちまコピペを駆使して移しました…ポンコツなので仕方ないですね。どのみち、データ量がそんなにないから、根気だけで乗り切り終了しました。アドレスに www. 付に変わりました
因って、HELP!です。
の下の方ですがカートに入れる、オレンジ色のボタン上の青緑の太線、品番名と色番のある部分ですが
/*—- sku-name —*/
.item-info .skuname {
font-family: tahoma;
fonnt-size: 26px;
color: #ff0000;
font-weight: normal;
min-height: 30px;
margin-bottom: 1.42857em;
padding: .357143em;
background-color: #0090a8;
opacity: 0.6;
}
と入れて、装飾したのですが。青緑の透明度を指定したつもりが文字色まで透明になってしまいます。文字の色は不透明でいいのですが。
お忙しい事と思いますが教えて頂けると助かります。宜しくお願いします。
乃風様
返信ありがとうございます。ボタンを円形にという事ですが、これはどこかでフリーの素材を探してくる必要があるかと思います。フリー素材で円形の画像を探してきて、ペイント等を使ってサイズを調整し、それをメディアにアップロードする作業が必要になります。
アップロードしたらその画像のURLをコピーしてスタイルシートに次のようにコードをいれます。
#scroll-top{ /* ボタンのデザイン */ background-image: url("http://●●"); /* ボタンの画像URL */ }私の場合はボタンに画像を使わない派（笑）なので、ちょっと検証はしてませんが、これで行けると思います。
いつもお世話になっております。
しげぞうさんと同じ、自作のページの先頭に戻るボタンを、無事に表示させることができました。△マークや文字、色はそのままでいいのですが、形だけ円にしたいので、その方法を教えてください。
私の場合、子テーマのスタイルシートで、文字の大きさを１４ｐｘから１８ｐｘへと変更しています。行間もプラス４ｐｘで調整してみました。必要かどうかは分かりませんが、参考のため、私のＵＲＬを添付しておきます。よろしくお願いします。
楽しみに待っております。
乃風様
報告ありがとうございます。上手く子テーマの作成ができたようで良かったです。乃風様のスクロールトップはおそらくプラグインで実装されているのではないかと思います。なので、プラグインで「Scroll To Top」を停止すれば削除できるかと思います。「Scroll To Top」のプラグインを停止して確認してみてください。上手く消えていれば後は自作のスクロールトップを作成して追加すればOKです。
また分からない部分があれば再度コメント下さいませ。
しげぞうさん、こんばんは。「content.php」のおかげで、私は子テーマをマスターできたみたいなので、ちょっと自信がつきました。それで、上記も全てスムーズにできました。これから「自作のJavaScriptをWordPressで利用する方法の別記事」に行くところだったのですが・・・。
この時点で、ふと思ったのですが、最初に作って既に私のURLにのせてしまったあの基本のスクロールトップマークを削除するにはどうすればいいのでしょうか？