戦略的ホームページ

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

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

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

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

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

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

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

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

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

HTMLの記述

<基本編>同様、フッター(footer.php)のbodyタグの前に下記のようなHTMLを入力します。

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

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

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

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

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

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

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

設定は簡単。

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

こんな感じ。

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

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

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

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

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

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

そして、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
HICO
ほんの小さな感動が、誰かの人生をちょっと変える。そんな食体験を通して人類に貢献することが僕の使命です。目標は「100年レストラン事業」。お金も才能も人脈もありませんが、実現させるために日々、愚直に考えていることを綴ってます。
人生のアフターコロナ対策、お決まりですか?

コロナショックにより、人の暮らしから考え方、働き方は大きく変わるのでしょう。

どうなるのか?というよりも、どう生きたいのか?

たいせつな人たちと楽しく人生を送る為に必要な資産と、生き方を、ない頭で頑張って考えてます。あなたのお役に立てれば幸いです!