アマゾンタイムセール中

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

Simlicityのスマホ表示時に下記のようなグローバルナビを設置するカスタマイズを紹介します。

 

555

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

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

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

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

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

2016y03m12d_001453842

Simplicityはさまざまな機能がカスタマイザーで設定できますが、スマホ表示では3種類のメニューから選べます。(simplicity2.01及び1.9.3の仕様)

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

333

アコーディオンツリー

menu

 モーダルメニュー

222

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

でもメニューボタンに気づかないかも・・・?

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

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

カテゴリ表示をするメリット

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

例えば、「子育て」に興味がある人は子育ての記事だけの一覧を見たいに違いありません。 そのためにも、PC表示のグローバルナビのように最初からカテゴリ名がわかるメニューがあると便利です。

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

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

555

これを作っていきます。

まずは、子テーマ(又は本テーマ)の「before-main.php」を開きます。

その中にある
//例えば、3カラムの左サイドバーなどをカスタマイズで作りたいときなどに利用します。
を探してください。

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

  1. <!--?php if ( wp_is_mobile() ) : ?-->
  2. <div id="sm_nav">
  3. <span class="category"><a href="http://AAAAA/">メニュー1</a></span>
  4. <span class="category"><a href="http://BBBBB/">メニュー2</a></span>
  5. <span class="category"><a href="http://CCCCC/">メニュー3</a></span>
  6. <span class="category"><a href="http://DDDDD/">メニュー4</a></span>
  7. </div>
  8. <!--?php else: ?-->
  9. <!--?php endif; ?-->

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

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

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

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

  1. #sm_nav{
  2.  text-align: center;
  3. }
  4. #sm_nav .category{
  5.  background-color: #35A6A0;
  6.  padding:8px;
  7.  line-height: 230%;
  8.  font-size:90%;
  9. border-radius: 4px;
  10. }
  11. #sm_nav a{
  12.  color: #FFFFFF;
  13.  text-decoration: none;
  14.  word-wrap: break-word;
  15. }

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

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

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

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

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

注意点

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

ライフレシピでは、すべてのカテゴリを載せないで、主要なカテゴリに絞って1行に収めました。

以上のカスタマイズでスマホのときだけ、設定したグローバルナビがでてきます。

追記

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

2016y09m21d_132555986 2016y09m21d_132703591

18 COMMENTS

鹿目ほむほむ

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

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

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

返信する
goma

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

返信する
Axsxxhx

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

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

素人ですみません。

返信する
goma

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

返信する
tissue

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

返信する
ryopeijun

はじめまして。

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

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

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

返信する
goma

ryopeijunさま

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

返信する
ななのばい

初めまして
スマホにグローバルナビを探してて、こちらにたどり着きました。
子テーマbefore-main.phpとスタイルシート (style.css)に設置したところ、表示はされ押せばリンク先には飛ぶのですがボタンにはならないです。

原因が分かるようでしたら教えていただけないでしょうか?

返信する
ななのばい

前にコメントを残したものです。
すみません、自己解決できました。
Google Chromeの全履歴削除したところ表示されました。希望通りのボタン化でした。ありがとうございます。

返信する
ぎんかむい

シンプリシティでスマホのヘッダーにカテゴリ表示させたくライフレシピ様のコードに自分のブログのカテゴリアドレスをコピペしたんですが、カテゴリが多いため、カテゴリ名の途中で改行されてしまいます。
カテゴリ名の間で改行する方法教えていただけたらいいのですが、よろしくお願いいたします。

返信する
goma

お返事遅くなりまして申し訳ありません。
コードが消えてしまって、見えないみたいです。
メニューとメニューの間に、<br>←カッコは実際は半角で。
をいれてみたらいかがでしょうか?

返信する
ぎんかむい

何度もすみませんが、IEでもCromで見てもメニュー名とメニュー名2の間に”  ”なにも表示されてません。(例)の下も表示されてません。

返信する

ryopeijun へ返信する コメントをキャンセル

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