Simplicity2、グローバルメニューを固定させてみる

Simplicity2って本当にすごい。
とは言っても今日はグローバルメニューのスクロール時に固定させてみたいと思ってGoogle先生どこを参考にしましょうか？

ってことでやってみました。

自分が使うだけなので、CSSはログイン時はアドミンバー？の下に固定され、ログインしていないときは上に固定としました。

分岐タグをつかってCSSを分けた訳ですね。

if ( is_user_logged_in() ) {
//ログインしている時は表示
	echo 'Welcome, registered user!';
} else {
//ログインしていない時に表示
	echo 'Welcome, visitor!';
}

わいひらさんの記事でもありましたが、今回は上のやり方を実践しました。
自分的なメモなので、この記事を見た方には分からないですね。

私へのオボエガキ

<?php
function succeed_globalNavi() {
    echo <<< EOF
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
  jQuery(function($) {
    var nav = $("#navi"),
      offset = nav.offset();
    $(window).scroll(function() {
      if ($(window).scrollTop() > offset.top) {
        nav.addClass("fixed");
      } else {
        nav.removeClass("fixed");
      }
    });
  });
</script>
<style type="text/css" media="all">
EOF;
    if (is_user_logged_in()) { //ログインしている時は表示
        echo "#navi.fixed{top:32px;}\n";
    } else { //ログインしていない時に表示
        echo "#navi.fixed{top:0px;}\n";
    }
    echo <<< EOF
#navi.fixed{position:fixed;width:100%;z-index:1000;background:rgba(51, 51, 51, 0.7);border-bottom:1px solid #333;}
#navi.fixed ul > li{border-left:1px solid #fff;}
#navi.fixed ul > li:last-child{border-right:1px solid #fff;}
#navi.fixed a{float:none;display:table-cell;vertical-align:middle;color:#fff;}
#navi.fixed a:hover{color:#333;background:#fff;}
</style>
EOF;
}
add_action('wp_footer', 'succeed_globalNavi');

グローバルナビゲーションを固定する方法でした。