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

【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>

参考:フローティングメニューをフッターに表示する

6行目の「200」の部分を調整することで、表示するタイミングを調整できます。

以上です。

Byさちお


Amazon.co.jpで人気の『wordpress』関連商品はこちら↓↓↓

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.