ワードプレスサイトでフッターCTAを設置する方法＜応用編＞

サイト制作において、フッターCTA(Call to Action）あるいはフローティングメニューを設置するのはユーザーの利便性を考えると、有効です。

基礎的な設置方法は下記の記事で書きましたので、今回はその応用編を忘備録として控えておきたいと思います。

少しスクロールしたら表示されるフッターCTA

トップページを開いた瞬間から、表示されると、時にはうっとうしい場合があります。

はじめて訪問した時には気にならなくても、何度か訪れると、目障りになってくるものです。

ユーザーにそんな感情を抱かせるのは良くありません。

そこで、少しスクロールした時に表示させる方法があります。

HTMLの記述

＜基本編＞同様、フッター（footer.php）のbodyタグの前に下記のようなHTMLを入力します。

<div id="footerFloatingMenu">
<a href="#"><img src="画像のURL"></a>
</div>

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

最初の３行は＜基本編＞に記載したコードですので、すでに記載済みの場合はそれ以下を記載します。

これで、少しスクロールすると表示されるようになります。

なお、ここでは200pxほどスクロールすると表示させる設定にしており、もう少しゆっくり表示させたい場合は、200を500に帰れば、500pxに変えれば良い。

スマホにだけフローティングメニューを表示させる

とはいえ、PCとスマホの画面表示では、大きく異なります。

PCではサイドバーにもバナーを貼っており、一画面での情報量が多すぎる場合、フッターCTAがあると、かえってごちゃごちゃしてしまいます。

そんな時は、PCでは表示せず、スマホだけ表示させる方法が良いでしょう。

設定は簡単。

表示するdivタグ全体を、ifで囲みます。

こんな感じ。

<?php if(wp_is_mobile()) : ?>
<div id="footerFloatingMenu">
<a href="#"><img src="画像のURL"></a>
</div>
<?php endif ?>

1行目と4行目が、ifです。

wp_is_mobileとは、「モバイルの場合はdivタグを表示する」ということ。

ちなみに「モバイル」にはスマホ・タブレット・携帯が含まれます。

流行りのアイコンで表記するフッターCTA

画像ではなく、アイコンで表記するのは今の流行りのようです。

例えば、４つのボタンを設置する場合、フッター（footer.php）のbodyタグの前に下記のようなHTMLを入力します。

<div id="footerFloatingMenu">
<a href="#"><img src="画像URL"></a>
<a href="#"><img src="画像URL"></a>
<a href="#"><img src="画像URL"></a>
<a href="#"><img src="画像URL"></a>
</div>

そして、cssに下記のような記述をします。

#footerFloatingMenu {
  display: block;
  width: 100%;
  background-color: #000;
  position: fixed;
  left: 0px;
  bottom: 0px;
  z-index: 9999;
  text-align: center;
}

「background-color」で背景色を選び、デザインを統一すれば完成。

もう一度＜基本編＞を確認したいときは下記をご参考ください。