スマホでサイトを閲覧すると出てくる、最下部の案内を自サイトで表示させたいときの方法です。
クライアントサイトでのケース、WordPressのテーマOnepress使用の場合の方法を解説します。
Web365とは
Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行しています。
Web365について詳しく知りたい方は「Web365とは」ご覧ください。
この記事でわかること
メニューの「外観」の「テーマ編集」の 「footer.php」 「style.css」とにソースを追加します。
phpとhtmlを組み合わせたソースを追加します。
ここでは、スマホの場合に特定のページの案内を表示させたいとして、その特定ページでは、ここでは、特定ページが投稿ページとして、固定ページのみで表示させる仕様を採用してます。
“<?php wp_footer():?>”の下あたりに下記ソースを貼ります。
<!-- fied_フッターCTA表示ページ -->
<?php if(wp_is_mobile()) : ?>
<?php if (is_page(特定ページのスラッグ)) : ?>
<a href="特定ページURL">
<div id="footerFloatingMenu">
<i class="fa fa fa-book "></i> セミナーのお知らせ
</div>
</a>
<?php endif ?>
<?php endif ?>ソースの意味は、
もしモバイルサイズの表示で、
固定ページなら、
特定ページにリンクを貼った、セミナーのお知らせのhtmlソースを表示
といった意味です。
案内表示を、少しスクロールしたときに表示させたい
次に同じくfooter.phpに先程のソースの下、</body>の上あたりに、下記のソース、動きが出せるjQueryを追加します。
<!-- fixed_フッターCTA表示場所 -->
<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>ソースの意味は
先のhtmlのソースにあるクラスID「footerFloatingMenu」をtopBtnという変数名として、
topBtn ははじめは隠しておく、
ブラウザのウィンドウがスクロールされたらしてほしいことがある、
それは、もし200pxスクロールされたら、topBtn をゆっくり表示させて、
200px未満の場合はゆっくり非表示にさせて、
という意味です。
style.cssの編集
htmlソースの表示は上記で出来たので、背景や横幅、文字上下の余白など装飾をします。
styel.cssの最下部に下記ソースを貼ります。
/***** fixed_フッターCTA *****/
#footerFloatingMenu {
display: block;
background-color: #F08080;
width: 100%;
padding: 5% 0 5% 0;
position: fixed;
left: 0px;
bottom: 0px;
z-index: 9999;
text-align: center;
color: white;
font-weight: bold;
padding: 0 auto;
}ソースの意味は、
背景ピンクで、
横幅いっぱい、
内側の余白は上下5%くらい、
最下部に固定表示、
他のどんな要素よりも階層は手前に表示させる、
テキストは真ん中に表示、かつ太字
といった感じです。
最下部の案内表示の完成イメージ
下記の写真のようになりました。
上記のソースで、変えたい場合の注意点は、冒頭の<?phpの部分はスペル間違えると、ページ自体にエラーが出て表示されなくなるかもしれないので、スペルチェックしながら、変更してみてください。
もし、不備不明ありましたらお気軽にご連絡ください。
Web制作+Webマーケティングの個別講座開講中
Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております
・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
・Googleアナリティクスの設定、分析から改善施策の立案、レポート作成まで自身でしたい方
どうぞWeb365の「Webサイト制作、Webマーケティングの知識スキル習得するためのオーダーメイド個別講座」をご覧ください。
外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。
Web365は貴社のWeb担当者として、制作改善運用をワンストップサポートしています
・成果にこだわるサイト制作改善をお望みの方
・自社にとって最適なweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方
是非Web365までご相談ください。
【パートナー募集】
Web制作、Webコンサル、広告代理店、フリーランスの方々へのWeb改善プランの提供
Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています
・クライアントへのWebマーケティング、Web改善のプラン検討している方
・社内のWebマーケティングのリテラシーを高めたい方
・分析から改善運用まで一括でサポート依頼したい方
Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています
・クライアントへのWebマーケティング提案がしたいプラン作成をサポート
・クライアントへのWeb改善プラン実行のディレクションサポート
・社内のGoogleアナリティクスなどのレクチャー
・クライアントへのサイト分析から改善運用企画のアドバイザリーサポート
・Web系フリーランスへのWeb改善プランの提案企画書の作成サポート
・クライアントへのWeb広告運用代行
・クライアントへの計測ツール設定代行（Googleアナリティクス、eコマース、ヒートマップClarityなど）
まずは、お気軽にMTGでれきばと思いますので、Web365までご相談ください。
