Simplicityのモバイル表示で、「検索窓」をタイトル下に持ってくる方法

https://farm6.static.flickr.com/5762/20919637280_707214c8c3.jpg

こんにちは。部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております!

スポンサーリンク

そもそも、「検索ボックス」「アクセスランキング」が遠いというひこPの要望で、モバイルは「10記事表示」とした

もともと、モバイルも、PC同様に「20記事表示」でした。

過去記事にある通り、私は、iPhoneで自分のブログにアクセスすることはありませんでしたので、モバイル表示の確認を一切しておりませんでした。しかし、スタッフのひこPから「アクセスランキングが遠いッス」と言われ、調べて、モバイルだけ10記事表示にしました

【WordPress】Simplicityで「モバイル表示の新着記事数をPCと変える」事にチャレンジ!「function.php」で「is_mobile」をいじったらできたぜ!
【WordPress】Simplicityで「モバイル表示の新着記事数をPCと変える」事にチャレンジ!「function.php」で「is_mobile」をいじったらできたぜ!
こんにちは。WordPress初心者の部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております! 別記事でもアップした通...

これね。コレで出来た。

次に、マネさんに「検索ボックスまで遠いんだよね〜」と言われた。マネさんみたいに「ほとんどモバイルアクセス」の場合、検索窓が重要なことに気付いた

マネさんに言われるまで気付きませんでしたが、確かに、他のブログ(例えばgori.me)では、「検索ボックス」が一番上にあるんです。「タイトル」の下が「主要カテゴリー」で、その下に「検索ボックス」があります。うーむ、コレか。コレがナイスなのか。そう思いました

そして、ちゃぼPの出番。コードを紹介!

調べてもわからなかったので、ブログスタッフ「ちゃぼP」に聞いてみました。すると、速攻コードが送られてきました

「header.php」にブチ込め!

最後の方、

<!-- main -->

の上に、

と入れれば、simplicityで標準の検索窓がちょうど「キャッチフレーズ」の下に表示されると思います。

また、Googleカスタム検索を入れたい場合は

を入れることでOKなはずです

検索窓と、ウィジェットの設定について

この設定はモバイルだけ検索窓を上部に設置するようになっていますので、PCの場合は表示されませんが、このままですと、ウィジェットで設定している検索ボックスも表示されてしまいます。

モバイルの場合はバナー直下の検索ボックスだけ、PCの場合はサイドバーのウィジェットだけを表示するようにすればいいと思うので、一旦今の検索ボックスを削除して、simplicityのカスタマイザー機能にある「パソコン用テキストウィジェット」にカスタム検索ボックスを設定すればいいと思います。

image

このように、サイドバーウィジェットを「パソコン用テキストウィジェット」にして、Googleカスタム検索のコードを入れると、PC、タブレットでは、右メニュー最上段にGoogleカスタム検索の検索ボックスがでるはずです。

そうすることで、
モバイル→バナー直下の検索ボックスのみ
PC→サイドバーの検索ボックスのみ
で使い分けができるんじゃないかと思います。

image

モバイル表示では、記事一覧ページでも、記事表示ページでも、きちんと、タイトル下にGoogleカスタム検索のボックスが来ていることがわかります

ああ。完璧だよ。完璧に出来ているよ

ウチのブログを見れば分かる通り、完璧にGoogleのカスタム検索が、モバイルの一番上に表示されるようになった。マネさんも大喜びだ!マネ男も喜んでいるぞ!

ちゃぼPのカスタマイズ能力で、これからもSimplicityをガンガンいじっていくぜ!今後ともよろしく!

【WordPress】Simplicityで、「Googleカスタム検索」をサイドバーウィジェットにつける方法
【WordPress】Simplicityで、「Googleカスタム検索」をサイドバーウィジェットにつける方法
こんにちは。WordPress初心者の部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております! さて、今回は、...

Googleカスタム検索については、こちらからどうぞ!

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

この記事の関連カテゴリ

サイト内検索