ワードプレスで、モバイルのときのみ下に張り付く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 ワードプレスのコーディング・テーマやプラグインの制作などなんでも依頼できます。お気軽にご相談お送りください
