Simplicityの特徴 › フォーラム › Simplicityについての質問 › スマホでグローバルナビをPCのように表示するには
- このトピックには5件の返信、2人の参加者があり、最後に
YKにより11年前に更新されました。
-
投稿者投稿
-
-
2015年5月20日 7:15 PM #26808
YK
ゲストお世話になっております。
スマホのグローバルナビはボタンが小さくなっており、クリックしないとタイトルがでてきません。私はカテゴリをナビに入れているのですが、友人からカテゴリがなくてわかりにくいと言われました。友人に詳細をきいてみると、グローバルナビの存在に気づかなかったとのことです。そこで、グローバルナビに誰でもすぐに気づくように、PCで表示されているときのようにクリックしなくても常に表示されているようにしたいと思います。もし簡単に出来る方法がありましたら教えていただけないでしょうか。私は初心者レベルでカスタマイズ等は全然詳しくありません。
どうかよろしくお願いします。
-
2015年5月20日 10:45 PM #26812
わいひらキーマスター残念ながら簡単にできる方法はないです。
デベロッパーツールなどを使って、スタイルシートを調整するしかないです。
デベロッパーツールの使い方
HTMLクイックリファレンス -
2015年5月21日 12:44 AM #26817
YK
ゲストご回答ありがとうございました。
リンクを確認してみましたが、私にはかなり難しくて無理でした。
今後もっと勉強したいと思います。 -
2015年5月21日 10:28 AM #26824
hidekichi
ゲスト俺ならこうするシリーズ(笑)
簡単ではありませんがやり方だけ。スマホのグローバルメニュー部分はそのままで、今回は、メイン記事の上にカテゴリーの表示をします。
親テーマbefore-main.php(子テーマにbefore-main.phpがあるならそれで(未確認))に以下のように書きます。準備として、is_mobile()でモバイル端末の時のみと言う設定を入れておく。
<?php if (is_mobile()): ?> // 以下のどれかしらのタイプを書き込む(追記する) <? endif; ?>◆タイプA ウィジェットのような出力
<div class="test"> <?php wp_list_categories(); ?> </div>このように書けば、.test ulあるいは、.test li等のようにしてスタイルすることができます。
◆タイプB Pタグでカテゴリのリンクを囲む
<div class="test"> <?php $cat_all = get_terms( "category", "fields=all&get=all" ); foreach($cat_all as $value): ?> <p><a href="<?php echo get_category_link($value->term_id); ?>"><?php echo $value->name;?></a></p> <?php endforeach; ?> </div>これもタイプAと同様に、.test p等に対してスタイルすることができます。またpタグの部分を変更すれば他のタグにすることもできます。
◆タイプC 一行に「” | “」で区切ったリストとして書き出す。
<div class="test"> <?php $cat_all = get_terms( "category", "fields=all&get=all" ); foreach($cat_all as $value){ $cat_list_array[] = '<a href="' . get_category_link($value->term_id) . '">' . $value->name . '</a>'; } echo "<div class='test'>"; echo implode(" | ", $cat_list_array); echo "</div>"; ?> </div>タイプBの別の出力の仕方です。この場合、.testにはスタイルすることができますが、区切っている部分の要素に対してはスタイルできないので、書き出している部分を変更する必要があります。例えば、
echo implode("<span class='separate'>|</span> ", $cat_list_array);などとして、親・子いずれかのテーマのstyle.cssに、上記例なら、
.separate { color: #ccc; margin: 0 5px; }と言うようなスタイルを設定すれば、色が#ccc(薄いグレー)で、|の左右に5pxの余白ができます。
1行と言ってもいわゆるインラインというやつで画面端に行けば、勝手に改行するので複数行になるかも知れません。フォントサイズなどは.testに対して行ったり、.test aとかにすれば良いと思います。before-main.phpは親テーマにしかなかったように思うので(子テーマにあればそれで(未確認))、親テーマのbefore-main.phpを利用する場合は、アップデートの際、上書きされ設定が無くなってしまうのでバックアップしておくようにしておいて下さい。
今回は、before-mainに書きましたが、色んな所にカテゴリーを出力することは可能です。
最も簡単なのはウィジェットを利用することですが、上記typeCのようにすれば、インラインで書き出せるので記事中に書き出したり、あるいは現在の記事のカテゴリをまた別の方法で求めたりして、もし同じカテゴリの場合は、それだけ大きく「これが今見てるカテゴリだ」と言う主張をすることもできます。あ、ちなみに最新のSimplicityの場合、各部いずれかのウィジェットで「カテゴリ」を追加すれば表示はできます。色んな場所でウィジェットを追加すれば表示はできるのですが、その都度「#categories-XX」というようなIDを調べる必要があるのでスタイルは(いずれ変更する時に)面倒です(→これはわいひらさんの説明の通りする必要があります)。
デザインの変更がないとか少ない場合は、一度設定しておけば良いので良いのですけれども、#categories-XXのXXの部分はウィジェットの設定をするたびに色々変更されるかも知れないので注意が必要です。 -
2015年5月21日 3:36 PM #26839
わいひらキーマスターなるほど、before-main.phpを使うというのも手ですね。
スタイルさえうまく設定できれば、それが一番簡単な方法かもしれませんね。
アップデートにも対応できますし。 -
2015年5月23日 3:20 AM #26917
YK
ゲストhidekichiさん、詳しいご説明ありがとうございました。まだ勉強不足で自分ではできませんが、今後勉強して参考にさせていただきます。
-
-
投稿者投稿
- トピック「スマホでグローバルナビをPCのように表示するには」には新しい返信をつけることはできません。