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

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

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

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

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

Web365とは

Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行しています。

Web365について詳しく知りたい方は「Web365とは」ご覧ください。

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制作+Webマーケティングの個別講座開講中

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


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


どうぞWeb365の「自社のWebサイトを自身で作りたい、改善したい人のオーダーメイド個別講座」をご覧ください。






外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。

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

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


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

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

執筆者:

関連記事

【体験】オンラインビジネスチャットサポートってなに?無料体験の流れと機能を解説

Webサイトの閲覧ユーザーの満足度をあげる機能「オンラインビジネスチャットサポート」、つまりチャットってどんなものなの?いちサービスを無料体験してみた流れと機能解説などしてみたいと思います。 Web3 …

【事例】WordPressの Contact Form 7 の不具合改善、SMTPプラグインを

【事例】WordPressの Contact Form 7 の不具合改善、SMTPプラグインをいれておこう

WordPressの Contact Form 7 の不具合改善、SMTPプラグインをいれた解決事例を解説します。 クライアントサイトで対応例です。 Web365とは Web365は、外部Web担当者 …

【解説】WordPressの保守、バックアップのプラグイン BackWPupをいれておこう

【解説】WordPressの保守、バックアップのプラグイン BackWPupのいれ方、バックアップ方法の一例を解説します。 クライアントサイトで対応例です。   Web365とは Web365は、外部 …

【解説】売上規模0から数十万円のECサイトを制作するときの考え方とサービス比較

【5分で読めます】 クライアント事例として、ECサイト(eコマース、つまりオンラインショップ)を新規作成したいときに、「なにで、どう作ればよいか?」ついての全体感と直近サービス列挙から提案事例を解説し …

WordPressの企業サイト事例

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

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

【チュートリアル】WordPressで記事の途中からパスワード保護出来るプラグインを使った有料販売の方法

WordPressで記事の途中からパスワード保護出来るプラグインを使った有料販売の方法を解説します。 プラグイン1つと簡易なECショップので対応します。 ・記事の途中からパスワード保護出来るプラグイン …

【簡単】商材ページ、13のポイントを意識して簡単につくる方法

クライアントサイトで、実際にコンテンツ作成するときに、重要なページ商材ページがあります。 どんな構成で作成すると良いのか? 商材自体の訴求ポイントの項目と、Webコンテンツとしての構成面と合わせて、1 …