Simplicityの特徴 › フォーラム › Simplicity2に関する話題何でも › 「ブログ内検索」をスマホやタブレット表示の際に、本文上に置く方法は?
- このトピックには8件の返信、2人の参加者があり、最後に
Maruにより8年、 4ヶ月前に更新されました。
-
投稿者投稿
-
-
2018年4月20日 11:04 PM #59756
Maru
ゲスト「ブログ内検索」ですが、パソコン表示の際はサイドバー上部に表示されて使いやすいものの、スマホやタブレットで表示させた場合は、記事もしくは過去記事一覧の更に下に表示されてしまいます。
現実的には使えない状態です。ページを開いたときに検索ワードを入れて記事を検索するケースが多いので、できれば本文上に置きたいのです。
これを「簡単に」実現する方法はないものでしょうか? -
2018年4月22日 1:06 AM #59760
わいひらキーマスター「投稿本文上ウィジェットエリア」に「検索ウィジェット」を言えるのではダメなのでしょうか?
-
2018年4月27日 9:48 PM #59804
Maru
ゲストわいひら様
ありがとうございます!その方法でできました。
ただ、ちょっと気になる点があります。
・本文のすぐ真上になるのでわかりづらい。
・スマホ画面ではともかく、、パソコン画面ではサイドバーの検索と重複する。
・(投稿ページだけでなく固定ページにも付けたとしても)トップ画面では表示しない。
というところが残念です。
「常にページタイトルの上」に出せれば良いのですが、それでもトップ画面には出ません。
やはり難しいでしょうか? -
2018年4月28日 12:00 AM #59808
Akira
ゲストお気に召されるかは分かりませんが、このような方法もあると頭の隅に入れていただけると幸いです。
やることは、全てのページでグローバルメニューの下に検索フォームを表示するものです。やりやすさを考慮し、子テーマのみでカスタマイズをします。
●ステップ 1 : 検索フォームを削除●
サイドバーにある検索フォームウィジェットを削除します。
●ステップ 2 : ウィジェットエリアを作成●
子テーマの function.php に下記のコードを追加し、ウィジェットエリアを新規作成します。
register_sidebars( 1, array( 'name' => '検索フォーム用', 'id' => 'search-form-only-widget', 'description' => '検索フォーム用のウィジェットエリア。', 'before_widget' => '<div id="%1$s" class="%2$s">', 'after_widget' => '</div>', 'before_title' => '', 'after_title' => '', ));●ステップ 3 : ウィジェットエリアを設置●
子テーマの before-main.php に下記のコードを追加し、ウィジェットエリアを設置します。
<?php if( is_active_sidebar( 'search-form-only-widget' ) === true ) dynamic_sidebar( 'search-form-only-widget' ); ?>●ステップ 4 : CSS を追加●
子テーマの style.css に、下記の CSS を追加します。
@media screen and (min-width: 1110px) { #searchform { width: 740px; } } @media screen and (max-width: 639px) { #searchform { margin: 0 10px; } }●ステップ 5 : 検索フォームウィジェットを設置●
ウィジェット管理画面より、「検索フォーム用」ウィジェットエリアに検索フォームウィジェットを設置します。
カスタマイズ終了。
CSS を変更すれば、見た目は変えられます。お気に召さなければ、無視されてください。
-
2018年4月28日 8:08 PM #59815
かうたっく
ゲストSimplicity2 child: before-main.phpに以下を追加してURLを入れるとどうですか?
action="https://domain.com/"ココにご自身のURLを入れて、検索ウィジェットを削除。<form method="get" id="searchform" action="https://domain.com/"> <input type="text" placeholder="ブログ内を検索" name="s" id="s"> <input type="submit" id="searchsubmit" value=""> </form> -
2018年4月28日 8:27 PM #59818
かうたっく
ゲスト<form method="get" id="searchform" action="<?php echo home_url('/'); ?>"> <input type="text" placeholder="<?php echo get_theme_text_search_placeholder();//検索ボックスのプレースホルダテキストを取得 ?>" name="s" id="s"> <input type="submit" id="searchsubmit" value=""> </form>こっちの方が良いかもです。またはsearchform.phpを読み込むとか。
<?php //AMP表示するかの判別 get_template_part('searchform'); ?> -
2018年4月28日 8:30 PM #59819
かうたっく
ゲストコピペしっぱなしでした。Simplicity2 child: before-main.phpに以下をいれるのがスマートかもです。
<?php //サーチフォームを読み込む get_template_part('searchform'); ?> -
2018年4月29日 1:26 AM #59821
Akira
ゲスト確かに!ウィジェットエリアを作る必要はないですね。
searchform.php を before-main.php に直接設置すればいいですね。
-
2018年5月3日 10:05 PM #59854
Maru
ゲストわいひら様 Akira様
いろいろありがとうございます。
やってみたいのですが、私の知識的に厳しいところがありますので、バックアップを取りながら1つずつ試させていただきます。
どうもありがとうございました。
-
-
投稿者投稿
- このトピックに返信するにはログインが必要です。