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

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

投稿日:

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

クライアントサイトでのケース、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の部分はスペル間違えると、ページ自体にエラーが出て表示されなくなるかもしれないので、スペルチェックしながら、変更してみてください。

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

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

執筆者:

関連記事

WordPressで「更新を失敗しました」と出たときの対応方法

WordPressの編集時に更新を押すと、「更新を失敗しました」と出たときの対応方法について解説します。 対応方法は検索すると色々出てきますが、主要な原因では、 WordPress新エディタ「Gute …

【完全網羅】WordPressの費用は?ホームページ作成運用の料金相場まとめ

企業でコーポレートサイトとしてWordPressを採用する際、費用はいくらかかるのか?相場やサービス別など網羅的にまとめました。 この記事読了後は、WordPressでの費用感が理解でき、収支計算の参 …

【簡単】WordPressで独自のショートコードを作成し、本文に挿入する方法

WordPressで独自のショートコードを作成し、本文に挿入する方法を解説します。お決まりの文章や、機能などは、ショートコードを書くだけで、ページに実装できると効率的です。ショートコードの作成方法と、 …

WordPressの企業サイト事例

WordPressの企業サイト事例とテーマ選【徹底解説】

【5分で理解できます】 WordPressで企業サイト構築の検討に役立つ記事です。 WordPressで企業サイトを構築するメリット・デメリットやWordPressの企業サイトに向いてるか判断する7つ …

画像のサイズの変更、データ量の圧縮などあれこれできる便利サイトのご紹介

記事やサイトを作成する際に、画像のサイズの変更や、データ量を軽くするための圧縮などしたいときに簡単にできるサイトをご紹介します。サイズや圧縮以外にもあれこれできる便利サイトです。   一括で画像編集で …

;