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

SHARE

「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

13 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さま

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

返信する
【Simplicityカスタマイズ】スマホでも、パッと目につく上部にカテゴリを表示させたい! | Addicted to KYUN KYUN!

[…] 「Simplicity」 スマホ表示にグローバルナビを設置するカスタマイズスマホ表示用のグローバルナビを設置しよう!Simplicityでは、3つのスマホ用のメニューが用意されていますが、メニューを出すにはアクションが必要です。最初からグローバルメニューを出しておけば、慣れていない訪問者にも気づいてもらえます。 http://www.globalcontent-collabo.net […]

返信する
ななのばい

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

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

返信する
ななのばい

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

返信する

コメントを残す

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