ソースを書き換えスマホのフッターのスクロール固定!【コピペで即使えるプラグイン】

メニュー_フッター_固定_プラグイン

コピペで簡単!プラグイン挿入で、
スマホの固定フッターを設置

システムエンジニア(SE)かっきーです。

今回は、スマートフォンで使える固定フッターのプラグインをご紹介します。

「footer.php」の「is_mobile」のみを編集

まずは「footer.php」を編集します。
スマホでしか表示させないため、「is_mobile」でスマホのみの表示に。

また、「前の記事」と「次の記事」ボタンは記事投稿ページにしか必要がないので、「is_single」で表示の切り替えをしています。

フッター

メニュー_フッター_固定_プラグイン

「次の記事」がないフッター

メニュー_フッター_固定_プラグイン

記事では「前の記事」と「次の記事」のボタン両方が表示されますが、最新の記事では「次の記事」だけが表示されず、一番古い記事は「前の記事」が表示されないようになっています。

下記のソースを「footer.php」に記載します。

<?php if(is_mobile()) { ?>
<ul class="footer_menu">
<?php if(is_single()) { ?>
<?php
$prev_post = get_previous_post();
if (!empty( $prev_post )): ?>
<li><a href="<?php echo get_permalink( $prev_post->ID ); ?>"><i class="fa fa-chevron-circle-left"></i><br>前の記事</a></li>
<?php endif; ?>
<?php
$next_post = get_next_post();
if (!empty( $next_post )): ?>
<li><a href="<?php echo get_permalink( $next_post->ID ); ?>"><i class="fa fa-chevron-circle-right"></i><br>次の記事</a></li>
<?php endif; ?>
<?php } else { ?>          
<?php } ?>
<li><a href="<?php echo home_url(); ?>/"><i class="fa fa-home"></i><br>ホーム</a></li>
</ul>
<?php } else { ?> <?php } ?>

「style.css」を編集して配置をフッターメニューのデザインを整える

cssを編集することにより、フッターメニューのデザインを整えます。

「position」「bottom」によりフッターメニューを一番下に固定してます。

また、「display」がメニューバーの横幅を制御する役目を担います。
これによりメニュー項目が増えても均等になるようにしています。

下記のコードを「style.css」に記載します。

ul.footer_menu {
margin: 0 auto;
padding: 3px 0;
width: 100%;
overflow: hidden;
display: table;
}
ul.footer_menu li {
margin: 0;
padding: 0;
display: table-cell;
vertical-align:middle;
list-style-type: none;
font-size: 10px;
}
ul.footer_menu li a i{
font-size: 24px;
}
ul.footer_menu li a {
border: none;
display: block;
color: #666;
text-align: center;
text-decoration: none;
}
.footer_menu {
position: fixed;
bottom: 0;
left:0;
background: #fff;
z-index: 9999999999;
-moz-opacity: 0.9;
opacity: 0.9;
}

「トップに戻るボタン」を実装する

メニュー項目のひとつに「トップに戻る」ボタンがあります。
このボタンを実装する場合、先ほど記載した「footer.php」「</ul>」の前にコードを記載します。

<li><a id="mobile-top" href="#wrapper"><i class="fa fa-chevron-circle-up"></i><br>TOP</a></li>

このように「</ul>」前にコードを追加することにより、メニュー項目を自在に増やすこともできます。

最後に「jsファイル」に下記コードを追加します。

jQuery(function() {
var pageTop = jQuery('#mobile-top');
//スクロールしてトップ
pageTop.click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

「jsファイル」は、wordpressの管理画面からは編集することが出来ないため、ftp通信やサーバ会社の管理画面等のファイルマネージャーから編集することができます。

それでもわからない場合は、「footer.php」の邪魔にならない箇所に「<script>タグ」で区切って記載します。

<script>
ここに上記のコードを記載
</script>

コピペですぐに実装できますので、ぜひお試しください!

うまく実装できない場合は、お気軽にお問い合わせフォームよりご連絡くださいませ。

( icon-star 前回の記事も見る



“"

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です