ワードプレスで、モバイルのときのみ下に張り付くDIVを作る

ワードプレスで、モバイルのときのみ下に張り付くDIVを作るPHPコードをご紹介いたします。

スマホで表示しているときのみ下に張りついて動かないDIVを出力する

※このコードはテーマのFooter.phpに張り付けると動作します。

<?php
if(wp_is_mobile()){
?>
     <div style="width:100%;position:fixed;bottom:0px;background-color:white;">
        DIVの内容
     </div>
<?php } ?>

コードの解説
wp_is_mobile()はワードプレスの組み込み関数で、現在アクセスしているデバイスがスマホ(モバイルデバイス)かどうかを判定します。

このDIVには下記のスタイルを付与し、最下部に張り付くようにしています。
width:100%; →横幅を100%にします
position:fixed;　→画面のスクロールに関係なく配置するという意味になります
bottom:0px;　→下から０ピクセルの位置に配置します
background-color:white; →このDIVの背景色を白にしています

DIVの中に画像を置いてリンクさせるには次のようなコードにします。

<?php
if(wp_is_mobile()){
?>
     <div style="width:100%;position:fixed;bottom:0px;padding:0px;">
        <a href="リンク先"><img src="画像のURL" style="width:100%;height:auto;"></a>
     </div>
<?php } ?>

width:100%;height:auto;→画像のスタイルは横幅100%、縦横比を守って高さを自動調整するにはheight:autoを指定します。

参考になりましたら幸いです。

WordPress ワードプレスのコーディング・テーマやプラグインの制作などなんでも依頼できます。お気軽にご相談お送りください