「Simplicity」 スマホ表示にグローバルナビを設置するカスタマイズ

スマホ表示用のグローバルナビを設置しよう!

Simplicityでは、3つのスマホ用のメニューが用意されていますが、メニューを出すにはアクションが必要です。

最初からグローバルメニューを出しておけば、慣れていない訪問者にも気づいてもらえます。 PC表示とは違った形のグローバルメニューを設置するするカスタマイズを紹介します。

スポンサーリンク

 Simplicityのスマホ表示時のメニュー

PC表示にあるグローバルナビはスマホ表示では出てきません。 スペースの関係もあり普段は隠れています。

2016y03m12d_001453842

Simplicityはさまざまな機能がカスタマイザーで設定できますが、スマホメニューは次の3つが設定できます。(simplicity2.01及び1.9.3の仕様)

アコーディオン(デフォルト)

333

アコーディオンツリー

menu

 モーダルメニュー

222

この3方式は、メニューボタンを押すことでメニュー(カテゴリ)がでてきます。 限られたスペースしかないスマホ画面でも非常に便利です。

でも気づかれないかも・・・?

この便利な3つのメニューですが、もしかして気づかれないかもしれません。

おそらく慣れていない人の多くは、アイコンやMenuという文字からは、カテゴリを選べるとは思わないでしょう。

だから、このブログがそうであるように、複数のジャンルがある場合カテゴリが選べると非常に便利です。

例えば、「子育て」に興味がある人は子育ての記事だけの一覧を見たいに違いありません。 そのためにも、PC表示のグローバルナビのようにぱっと見て気づくメニューがあると便利です。

前置きが長くなりましたが、スマホ表示でのグローバルメニューのカスタマイズを紹介します。
AIUEO Lab2様の記事を参考にさせて頂きました。

さっそくカスタマイズ!!

555

これを作っていきます。

まずは、子テーマ(又は本テーマ)の「before-main.php」を開きます。
その中にある
//例えば、3カラムの左サイドバーなどをカスタマイズで作りたいときなどに利用します。
を探してください。

その下に以下のコードをコピペしてください。

<?php if ( wp_is_mobile() ) : ?>

<div id="sm_nav">
<span class="category"><a href='http://AAAAA/'>メニュー1</a></span>
<span class="category"><a href='http://BBBBB/'>メニュー2</a></span>
<span class="category"><a href='http://CCCCC/'>メニュー3</a></span>
<span class="category"><a href='http://DDDDD/'>メニュー4</a></span>
</div>

<?php else: ?>
<?php endif; ?>

mobile関数を使っていますので、モバイル(スマホ)のときだけ適用(表示)されます。

AAAは、そのカテゴリのURLです。
PCのグローバルナビで、カテゴリ一を選ぶとそのカテゴリーの記事一覧になるので、表示されてURLをコピペしてください。

メニュー1の部分が表示されるメニュー名です。
表示名の文字数でそれぞれのメニューの幅が決まります。

次に子テーマ(又は本テーマ)のスタイルシートを開きます。 そこの一番下にでも、以下をコピペしてください。

#sm_nav{
 text-align: center;
}
#sm_nav .category{ 
 background-color: #35A6A0; 
 padding:8px; 
 line-height: 230%;
 font-size:90%;
border-radius: 4px;
}
#sm_nav a{
 color: #FFFFFF;
 text-decoration: none;
 word-wrap: break-word;
}

5行目のbackground-colorでメニュー部分の背景の色を変えます。

6行目のpaddingはメニューの背景の範囲(文字からどのくらいの距離まで背景をつけるか)とメニューとメニューの間隔を調整できます。 画面左端との距離も兼ねています。
ご自分の環境の合わせて調整してください。

7行目のline-heightは、2行以上になるときの行間です。3行目の背景の幅にもよるので、それに合わせて調整してください。

9行目のborder-radiusは、メニュー背景の角の丸みを調整します。お好みで変えてみてください。

12行目のColorでメニューの文字色を変えられます。

注意点

2行目以降は、メニューは真ん中によります。

ライフレシピでは、すべてのカテゴリを載せないで、主要なカテゴリに絞って1行に収めました。
以上のカスタマイズでスマホのときだけ、設定したグローバルナビがでてきます。

追記

参考までに、ライフレシピでのコードのキャプチャをのせておきます。

2016y09m21d_132555986 2016y09m21d_132703591

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク

コメント

  1. 始めてWordpressというものを扱おうとしている者です。

    今まさに当記事の設定を施そうと、手順を探っていたところでした。
    無事に設置できました、有難うございます(`・ω・´)

    「before-main.php」の7行目、「>」の閉じタグが抜けてましたので、念のためお伝えしておきますね(*・.・)ノ★

    • goma より:

      鹿目ほむほむ様  コメントありがとうございました。お役に立ててうれしいです。閉じタグのご指摘大変ありがとうございます。大変助かりました。
      (2016.05.20に修正いたしました)

  2. Axsxxhx より:

    質問失礼します。(;’∀’)
    Stingerplus+で同様のことはできませんか??

    子テーマ(又は本テーマ)の「before-main.php」
    ってどうやって開けばいいんですか??

    素人ですみません。

    • goma より:

      ご質問ありがとうございます。before-main.phpの開き方についてのご質問ですが、Simplicityについてでいいのでしょうか?それでしたら、本テーマ、子テーマいずれにもありますので、ダッシュボードの外観から開けます。もし、Stingerplus+でのお話でしたら、テーマが違いますのでbefore-main.phpはありません。

  3. […] ・ヨメレバ・カエレバを綺麗に貼るCSSカスタマイズ ・スマホ表示にグローバルナビを設置するカスタマイズ ・Simplicity2でPush7通知ボタンを使用する方法 […]

  4. tissue より:

    goma様
    初めまして!色々検索して、たどりつきました!初心者のモノです。参考にさせてもらいましたが、なぜか?cssはちゃんと動いてるみたいですが
    「before-main.php」に入れる方の、各リンクのが効いていないみたいで、入れ子構造になってしまいます!色々試してみたのですが、初心者のため解決できません!申し訳ありませんが、わかりますか?
    何でしょう?
    とりあえず、私のホームページにカスタマイズを貼っておきます!何でしょうかね?
    見ていただけると幸いです!よろしくおねがい申し上げます。

  5. ryopeijun より:

    はじめまして。

    Simplicityのグローバルメニューの件でいろいろと探しており、このサイトにたどり着きました。before-main.phpを更新して、cssもコピペさせていただき、サイトを確認したところ、ヘッダー下にメニュー項目は出たのですが、リンク先とcssが反映されません。。

    何か考えられる原因はありますでしょうか?汗

    ちなみに子テーマを編集しています!

  6. goma より:

    ryopeijunさま

    コメントありがとうございます。
    メールにお返事させていただきます。