Welcartでスマホでもページトップへのリンクボタンを表示させたい

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
上ボタン

 これ、ネット上で調べても書いているサイトなかったのですよねぇ・・・

目次

ページトップへの追跡リンクボタン設定

 生まれ年ワインショップでは、スマホページでも画面右下にページトップに戻るリンクボタンの矢印マークが出るようにしています。
上ボタン

 これは、ワインによっては説明が長いものがあったり、ヴィンテージによっては複数のワインをご紹介でき、下までスクロールしたあとに、やっぱり最初に見たワインをタップしたい場合に、戻り易くするためです。

 しかし、Welcart Basicのテーマでは、このリンクボタンはPCでのみ対応されています。私は、これはスマホこそ必要だと思いますが、この初期設定には困りました。

 そこで、フォーラムで質問すると、

トップへ戻るのリンクボタンについて
<?php wp_is_mobile(); ?>
という WordPress の関数で条件分岐させ、
ユーザーがモバイルデバイスを使ってページを訪問しているかどうかをチェックし、
PC で閲覧している場合にのみ表示させています。
タブレットやスマホでも表示させたい場合は、
Welcart Basic の子テーマ作成し、footer.php を修正する必要があります。
どうぞよろしくお願いいたします。

という回答をしていただきました!

 早速、子テーマのfooter.phpにて、<?php wp_is_mobile(); ?>を削除しました。
※この<?php wp_is_mobile(); ?>で、モバイルかどうかをチェックしているとのことなので、削除するとレスポンシブルデザインが崩れることもあるのでしょうか?
 その後front-page.phpに入れた画像が、スマホで最適化されないのはこのせい?ただし、これは「カスタマイズ」>「固定フロントページ」でフロントページを固定ページにすることで解決されました。

 これで見事、上向き矢印のリンクが画面右下に表示されました。しかし、PC同様の設定のため、スマホでは画面右下からの距離が離れすぎている・・・

 そこで、子テーマのスタイルシートstyle.cssにて次のように設定しました。

/* =toTop(スマホでの上へのリンクボタンの位置調整)– */
@media only screen and (max-width: 740px)
{
#toTop {
position: fixed;
right: 5%;
bottom: 5%;
}}
/* =toTop(スマホでの上へのリンクボタンの位置調整) (終了)– */

これで、位置表示もバッチリとなりました^^色を変えたい方も、ここで変更したらOKです!

お願い

 検索でここにたどり着いた方は、自営業者さんでWelcartを導入しようと思っている方だと思います。役に立った方は、ビジネスでの贈り物に当店生まれ年ワインショップもしくは、日本初のプレゼント専門ワインショッププレゼントワインショップをご利用いただけると嬉しいですm(__)m

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

生まれ年ワインショップ

生まれ年ワインの魅力は何といっても、生きていた時間を飲むということです。自分と同じ年数を生きている飲食物なんて考えられますか?
大切な方の特別な記念日に、忘れられない生まれ年ワインを贈りませんか?

『生まれ年ワインショップ』へ

SNSでもご購読できます。

コメント

コメントを残す

*

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください