WEB構築・プログラミング

ワードプレス(WordPress)でフッターCTAを設置する方法<応用編>

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

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

ワードプレス(Wordpress)でフッターCTAを設置する方法<基本編>サイトの構成、デザインにもよりますが、フッターCTAというのは導線上、有効です。 人はわがままですから、質問したい時に質問したいの...

少しスクロールしたら表示されるフッター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>

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

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

なお、ここでは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

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

例えば、4つのボタンを設置する場合、フッター(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」で背景色を選び、デザインを統一すれば完成。

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

ワードプレス(Wordpress)でフッターCTAを設置する方法<基本編>サイトの構成、デザインにもよりますが、フッターCTAというのは導線上、有効です。 人はわがままですから、質問したい時に質問したいの...

 

 

ABOUT ME
HICO(ぞろ屋)
バーテンダー➡料理人➡シニアソムリエ➡飲食店運営➡トップセールス・マーケター➡WEB制作/ECサイト運営/WEBライティング。 幅広い経験とスキルを活かしデザイナーやエンジニアでは作れない持続性のある戦略的サイト構築が得意。実はコンテスト受賞経験もあるシニアソムリエとしての顔も持つ。
大きな時代の変革期、負けない戦略はありますか?

世はまさに明治維新前後のような大変革期。人生も、ビジネスも『負けない戦略』が必要不可欠の時代となりました。

HICO’S BLOGでは、小規模事業のための勝てるホームページ制作や売れる仕組み作り、ビジネスモデル・マーケティングなど、時代や他社に【負けないコンテンツ】を忘備録としてとどめています。

ニュースレターでは<月に一度>当ブログコンテンツを定期的に配信していますので、ぜひあなたのビジネス、人生にお役立てください。

 

この記事も読んでみませんか?