STINGER7の「ページトップへ戻るボタン」が一番上まで戻らなくなったときの修正方法

page-top-button-link-change-thumbnail

ヘッダーの横幅を画面いっぱいに広げるカスタマイズをしました。

参考にしたのはこちらのサイトです。

参考Stinger7:ヘッダー画像を横幅いっぱい(横幅100%)に広げる方法 | WebCraftLog

ただ、この方法だと「ページトップへ戻るボタン」の戻り位置が、グローバルメニューの下で止まってしまいます。

ページトップへ戻るボタン

ページトップへ戻るボタン

これは、STINGER7の「ページトップへ戻るボタン」は#wrapperまで戻る仕組みになっているためです。

上手く戻らない

上手く戻らない

今回はそれを一番上まで戻るように修正する方法のご紹介です。

修正の手順

修正は以下の手順でおこないます。

  • 子テーマにfooter.phpをコピー
  • アンカーポイントを#wrapperからheaderに変更

1.子テーマにfooter.phpをコピー

子テーマを使っている場合は、万が一に備えてfooter.phpを親テーマからコピーしましょう。

child-theme-copy-thumbnail
WordPressの大きなメリットの一つとして、サイトを自分好みにカスタマイズできるということが上げられます。 ですが、ちょっとした編

※親テーマを直接編集するのであれば飛ばしてもらっても構いません。

2.アンカーポイントを#wrapperからheaderに変更

footer.phpの33行目に下記のような記述があります。

<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div>

この部分のアンカーポイントを#wrapperからheaderに変更します。

<!-- ページトップへ戻る -->
<div id="page-top"><a href="header" class="fa fa-angle-up"></a></div>

これで一番上まで戻るようになりました。

上手く戻った

上手く戻った

WordPressカスタマイズ関連書籍

page-top-button-link-change-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

日本語が含まれない投稿は無視されます。(スパム対策)