フッター固定メニューをスマホにだけ表示させる。

iPadフッター固定メニュー表示なし

SANGO」の魅力のひとつに、閲覧者が迷わないユーザビリティの良さがあります。

モバイル端末で表示されるフッターの固定メニューはホントに素晴らしい!!

ただ、振り分けが解像度ではなく、端末がモバイルかPCかで振り分けてあるので

iPad Proで見ても固定メニューが表示されるわけです。

iPadフッター固定メニュー表示あり

iPadフッター固定メニュー表示あり

 

いや、あってもいいんでしょうけど、コンテンツ部分の表示はPCと同じなので、サイドバーありに設定してると、あまり必要じゃなかったり。

なので、このフッター固定メニューをスマホでは表示、タブレットなどでは非表示にしてみます。

フッター固定メニューがどこで制御されているか探ってみる

SANGOのフォルダの中を探索してみると・・・

SANGO
├library(フォルダ)─functions(フォルダ)─sng-function.php
├parts(フォルダ)
├・・・
footer.php
├・・・
├・・・

こんな風になってました。

固定メニュー自体はfooter.phpに記述がありました。

footer.php
</div>
</footer>
</div>
<?php wp_footer(); ?>
<?php footer_nav_menu(); //モバイルフッターメニュー
?>
<?php go_top_btn(); //トップへ戻るボタン
?>
</body>
</html>

 

「footer_nav_menu」という名前で定義されてる模様。

では、その定義をされてる箇所を確認してみる。

それは、「sng-function.php」にありました。

ホント、「SANGO」は親切です。わかりやすくって助かります。

sng-function.php

/*******************************
モバイル用フッター固定メニュー
*******************************/
if( ! function_exists( 'footer_nav_menu' ) ) {
function footer_nav_menu(){
if(wp_is_mobile() && has_nav_menu('mobile-fixed')) {//モバイルのみ
echo '<nav class="fixed-menu">';
wp_nav_menu(array(
'container' => false,
'theme_location' => 'mobile-fixed',
'depth' => 1
));
echo '</nav>';

//フォローボタン機能
if(get_option('footer_fixed_follow')){
$tw = (get_option('like_box_twitter')) ? 'https://twitter.com/'.esc_attr(get_option('like_box_twitter')) : null;
$fb = (get_option('like_box_fb')) ? esc_url(get_option('like_box_fb')) : null;
$fdly = (get_option('like_box_feedly')) ? esc_url(get_option('like_box_feedly')) : null;
$insta = (get_option('like_box_insta')) ? esc_url(get_option('like_box_insta')) : null;
?>
<div class="fixed-menu__follow dfont">

<?php if($insta) : ?>
<a href="<?php echo $insta; ?>" class="follow-insta" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i> Instagram</a>
<?php endif;
if($fb) : ?>
<a href="<?php echo $fb; ?>" class="follow-fb" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i> Facebook</a>
<?php endif;
if($tw) : ?>
<a href="<?php echo $tw; ?>" class="follow-tw" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i> Twitter</a>
<?php endif;
if($fdly) : ?>
<a href="<?php echo $fdly; ?>" class="follow-fdly" target="_blank" rel="nofollow"><i class="fa fa-rss"></i> Feedly</a>
<?php endif; ?>
</div>
<?php } //END フォローボタン

//シェアボタン機能
if(get_option('footer_fixed_share')) { ?>
<div class="fixed-menu__share sns-dif normal-sns">
<?php insert_social_buttons(); ?>
</div>
<?php } //END シェアボタン ?>
<script>
$(document).ready(function() {
$(".archive a[href = '#sng_share']").closest('li').css('display','none');
$(".fixed-menu a[href = '#']").click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
})
$("a[href = '#sng_share']").click(function(event) {
event.preventDefault();
$(".fixed-menu__share , a[href = '#sng_share']").toggleClass("active");
$(".fixed-menu__follow, a[href = '#sng_follow']").removeClass("active");
})
$("a[href = '#sng_follow']").click(function(event) {
event.preventDefault();
$(".fixed-menu__follow, a[href = '#sng_follow']").toggleClass("active");
$(".fixed-menu__share, a[href = '#sng_share']").removeClass("active");
})
});
</script>
<?php
}
}
}

スタイルシートの場合は親テーマのスタイルシートを子テーマのスタイルシートが上書きするのとは違い、親テーマのfunctions.phpは、子テーマの後から読み込まれるので、通常上書きはできないのだけど、ありがたいことに、親切なテーマ「SANGO」は、こんなところも気が利いていますね。一行目で「if( ! function_exists())」の記述があり、子テーマに同名の関数がある場合は、親テーマの関数を読み込まない仕様にしてあります。これなら、子テーマのfunctions.phpに同名の記述をしても問題なく上書きしてくれそう♪

参考 functions.php で定義済の関数をオーバーライドする方法 ~WordPress 覚書き~Zack一丁目

3行目の「if(wp_is_mobile() && has_nav_menu(‘mobile-fixed’)) {//モバイルのみ」の部分の「wp_is_mobile」はWordpressの関数で、詳しくは以下を参照。
参考 関数リファレンス/wp is mobileWordpressCodex日本語

子テーマのfunctions.phpに追記

sango-theme-child
functions.php
└style.css

*functions.phpの編集は慎重に。特に最下部に要らないスペースがあったりするとエラーでサイトが真っ白になったりすることがあります。バックアップをした上で挑戦してくださいね。責任は負えません

モバイルを定義

まずは、モバイルを定義しなおします。

参考 【WordPress】is_mobile()でスマホ・タブレット・PCの表示を条件分岐をする方法KAZULAND 参考 【WordPress】wp_is_mobile()でPCとスマートフォンで表示を切り替える方法【条件分岐タグ】HappyWebDesign
functions.php
/*******************************
モバイルを定義(is_mobile)
*******************************/
function is_mobile() {
  $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        '^(?=.*Android)(?=.*Mobile)', // 1.5+ Android
        'Windows.*Phone', // *** Windows Phone
        'dream', // Pre 1.5 Android
        'CUPCAKE', // 1.5+ Android
        'blackberry9500', // Storm
        'blackberry9530', // Storm
        'blackberry9520', // Storm v2
        'blackberry9550', // Storm v2
        'blackberry9800', // Torch
        'webOS', // Palm Pre Experimental
        'incognito', // Other iPhone browser
        'webmate' // Other iPhone browser
  );
  $pattern = '/'.implode('|', $useragents).'/i';
  return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

wp_is_mobileをis_mobileに変更

そして、親テーマの先程のコードをそっくりコピペして、「wp_is_mobile」を「is_mobile」に変更(一カ所)。

functions.php

/*******************************
モバイル用フッター固定メニュー
*******************************/
if( ! function_exists( 'footer_nav_menu' ) ) {
function footer_nav_menu(){
if(is_mobile() && has_nav_menu('mobile-fixed')) {//モバイルのみ
echo '<nav class="fixed-menu">';
wp_nav_menu(array(
'container' => false,
'theme_location' => 'mobile-fixed',
'depth' => 1
));
echo '</nav>';
//フォローボタン機能
if(get_option('footer_fixed_follow')){
$tw = (get_option('like_box_twitter')) ? 'https://twitter.com/'.esc_attr(get_option('like_box_twitter')) : null;
$fb = (get_option('like_box_fb')) ? esc_url(get_option('like_box_fb')) : null;
$fdly = (get_option('like_box_feedly')) ? esc_url(get_option('like_box_feedly')) : null;
$insta = (get_option('like_box_insta')) ? esc_url(get_option('like_box_insta')) : null;
?>
<div class="fixed-menu__follow dfont">
<?php if($insta) : ?>
<a href="<?php echo $insta; ?>" class="follow-insta" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i> Instagram</a>
<?php endif;
if($fb) : ?>
<a href="<?php echo $fb; ?>" class="follow-fb" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i> Facebook</a>
<?php endif;
if($tw) : ?>
<a href="<?php echo $tw; ?>" class="follow-tw" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i> Twitter</a>
<?php endif;
if($fdly) : ?>
<a href="<?php echo $fdly; ?>" class="follow-fdly" target="_blank" rel="nofollow"><i class="fa fa-rss"></i> Feedly</a>
<?php endif; ?>
</div>
<?php } //END フォローボタン
//シェアボタン機能
if(get_option('footer_fixed_share')) { ?>
<div class="fixed-menu__share sns-dif normal-sns">
<?php insert_social_buttons(); ?>
</div>
<?php } //END シェアボタン ?>
<script>
$(document).ready(function() {
$(".archive a[href = '#sng_share']").closest('li').css('display','none');
$(".fixed-menu a[href = '#']").click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
})
$("a[href = '#sng_share']").click(function(event) {
event.preventDefault();
$(".fixed-menu__share , a[href = '#sng_share']").toggleClass("active");
$(".fixed-menu__follow, a[href = '#sng_follow']").removeClass("active");
})
$("a[href = '#sng_follow']").click(function(event) {
event.preventDefault();
$(".fixed-menu__follow, a[href = '#sng_follow']").toggleClass("active");
$(".fixed-menu__share, a[href = '#sng_share']").removeClass("active");
})
});
</script>
<?php
}
}
}

アップロード

FTPソフトでアップロードして上書き。

スマホとタブレットをお持ちなら確認してみてください。

スマホには、固定メニューが表示されますが、iPadなどのタブレットでは表示されなくなりました。

iPadフッター固定メニュー表示なし

iPadフッター固定メニュー表示なし

スマフォの場合固定メニューあり

あとがき

SANGO」の、構造は細かく細分化されてるので難しそうに見えるけど、実は、とても分かりやすく構成されてて、色々カスタマイズされることも、もしかしたら、このテーマを参考書みたいに使われることも想定内なのかもしれない。

ホントに、太っ腹だね♪

参考 心地よさを追求したWordpressテーマ「SANGO」SANGO

 

コメントを残す

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