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でホームページを作るには

執筆者:

関連記事

【初心者導入編】WordPressで会社企業のホームページを作るにはまとめ

会社企業でWordPressを使ってホームページを作成制作を検討してる方(初心者)に対しまして、導入編として、メリットデメリットと制作にあたる一連の流れを網羅的に解説しています。 WordPressで …

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

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

【note更新】自サイトの問合せを増やすためのサイトグロースマップの解説_簡易版

表題、自サイトの問合せを増やすためのサイトグロースマップの解説です。 自身のビジネス用のWebサイトを作る上での最終的な目標は、 ・問い合わせを増やす・購入を増やす というところがゴールではないでしょ …

【note更新】WordPress管理画面のカスタムフィールド入力で、DB情報のサジェスト機能実装の方法

表題、WordPress管理画面のカスタムフィールド入力で、DB情報のサジェスト機能実装の方法の解説です。 例えばWordPressで、定期イベント開催など、ゲストの名前を入力していく、過去に登壇履歴 …

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

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

WordPressの企業サイト事例

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

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

検索上位へのSEO対策、画像にテキストは出来るだけいれないようにしよう

SEOを意識したサイト作りをする際に、画像とテキストは出来るだけ分けたほうがいいです。検索ロボットがテキストを認識して検索順位を決めるので、画像だと埋もれるからです。 今回は具体例と一般的な方法を解説 …

^
;