WordPressでホームページを作るには

スマホページで最下部にお知らせなどを固定表示させる方法【コピペ対応】

投稿日:2019年4月12日 更新日:

­スマホでサイトを閲覧すると出てくる、最下部の案内を自サイトで表示させたいときの方法です。

クライアントサイトでのケース、WordPressのテーマOnepress使用の場合の方法を解説します。

style.cssとfooter.phpを編集します。

メニューの「外観」の「テーマ編集」の 「footer.php」 「style.css」とにソースを追加します。

footer.phpの編集

phpとhtmlを組み合わせたソースを追加します。

フッターCTAソース1

ここでは、スマホの場合に特定のページの案内を表示させたいとして、その特定ページでは、ここでは、特定ページが投稿ページとして、固定ページのみで表示させる仕様を採用してます。

“<?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を追加します。

フッターCTAソース2

<!-- 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ソースの表示は上記で出来たので、背景や横幅、文字上下の余白など装飾をします。

フッターCTAソース3

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%くらい、
最下部に固定表示、
他のどんな要素よりも階層は手前に表示させる、
テキストは真ん中に表示、かつ太字
といった感じです。

最下部の案内表示の完成イメージ

下記の写真のようになりました。

フッターCTAサンプル

上記のソースで、変えたい場合の注意点は、冒頭の<?phpの部分はスペル間違えると、ページ自体にエラーが出て表示されなくなるかもしれないので、スペルチェックしながら、変更してみてください。

もし、不備不明ありましたらお気軽にご連絡ください。






Web担当者として月額サポートします。

Web365は貴社のWeb担当者として、制作改善運用をワンストップ定額サポートしています

・成果にこだわるサイト制作改善をお望みの方
・良いweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方


是非Web365までご相談ください。






Web制作+Webマーケティングの個別講座開講中

Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております


・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方


どうぞWeb365の個別講座をご覧ください。

WordPressでホームページを作るには

執筆者:

関連記事

fontAwesomeが表示されない対処方法はフォントファミリーに設定すること

このサイトなのですが、fontAwesomeという、外部サイトの情報から矢印やメール電話などアイコンを表示してくれるCSSを連携しています。初期設定やバージョン更新でよくあるのですが、そのアイコンが表 …

文字起こしは音声データを口頭でGoogleドキュメントに音声入力するがなんだかんだ一番かもです

文字起こしは音声データを口頭でGoogleドキュメントに音声入力するがなんだかんだ一番かもです。 クライアントさんの話を聞き書きし、記事化する業務をしています。 その際に、音声データを文字起こしする必 …

【事例】Webサイトの保守運用を外注依頼すると何をしてくれるのか?

Webサイトを制作業者に依頼し納品後に発生する「保守運用・セキュリティ」の業務。 あれは実際何をしてくれるのか。 Web365の場合で事例解説します。   保守運用の大きなタスクは3つ Webサイトの …

【秒速解決】WordPressの管理画面が真っ白の対処法_サーバー【ロリポップ】

Word Pressのログイン画面だったり、管理画面が真っ白になってお手上げ、という事象があります。管理しているサイトで発生したので、対処解決方法を解説します。     WordPressの管理画面が …

WordPressのテキストモードでタグボタンを追加する方法

Web担当業務でクライアントサイトに見出しや太字などのタグがリセットされていたのでCSSの設定した際に、エディタ上のテキストモードでタグボタンを追加する方法を解説します。   下記画像の青枠 …

Androidで確認するとサイトの右にできる余白を消す方法

iPhoneでは普通のサイトもAndroidで確認するとサイトの右に余白ができることがあります。今回はその解消方法です。 調べると3つほど解決法があります。 min-widthを指定してみる view …

【秒速解決】Word Press Popular Postsでウィジェット保存できないときの解決方法

Word Pressのプラグイン「Word Press Popular Posts」でウィジェット保存できない挙動があったので、その解決方法を解説します。 ウィジェット保存しようとしたときにこんな画面 …

^
;