ページトップのデフォルト化
WEBWordPress
CSSHTMLJavascript
静的サイトをWordPressに移行すると、必ずぶつかる「JSやPHPがうごかなくなっちゃった問題」
もう、うんざりですよ。
長いこと「WPにしても問題なく動くようにするにはどうしたらいいか」考えてきましたけども、とりあえずひとつクリアできたようなので、記録しておきます。
▼参考サイト
https://www.webopixel.net/javascript/538.html
jQueryでスクロールすると表示する系いろいろ
ポイントは、JavaScriptをHTMLに直書き。
外部ファイルにするとテンプレート変更したらはずれちゃうからね。
<p id="pagetop"><a href="#">▲<br>PAGE TOP</a></p> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> $(function() { var topBtn = $('#pagetop'); topBtn.hide(); //ここまで下がったらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 300) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スクロールしてトップ topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 1000); return false; }); }); </script>
画像も使わない。
CSSだけで装飾する。
#pagetop { position: fixed; bottom: 30px; right: 15px; font-size: 10pt; } #pagetop a { color: #fff; width: 80px; padding: 18px 0; text-align: center; display: block; border-radius: 5px; text-decoration: none; background: #666; } #pagetop a:hover { text-decoration: none; background: #999; }
静的サイトでもこういう作り方にしておけば、いざWordPressにするとなっても慌てずに済む。
それが大事。