【WordPress】スマホ表示で画面下部にバナーを固定する【css/php】

WordPress（ワードプレス）で作成したWEBサイト（ブログ）をスマホ表示したときに、画面の下部にお知らせバナー等を固定表示させたい場合、「フローティングメニュー」の応用で解決します。

まず、cssに下記のコードを追加します↓↓↓

#footer_ban {
margin: 0 auto;
padding: 0;
width: 100%;
overflow: hidden;
display: table;
position: fixed;
bottom: 0;
left:0;
background: #f0f0f0;
z-index: 9999;
line-height:0;
}

そして、footer.phpファイルのフッター部分に下記コードを追加します↓↓↓

<?php if( wp_is_mobile()) : ?> 
<div id="footer_ban">
ここにバナーのタグ
</div>
<?php endif; ?>

これで表示されますが、下記コードをfooter.phpに追加することでスクロース後に表示されるようになります↓↓↓

<script>
jQuery(function() {
 var topBtn = jQuery('#footer_ban');
 topBtn.hide();
 jQuery(window).scroll(function () {
 if (jQuery(this).scrollTop() > 200) { // 200pxで表示
 topBtn.fadeIn();
 } else {
 topBtn.fadeOut();
 }
 });
});
</script>