「ブログ内検索」をスマホやタブレット表示の際に、本文上に置く方法は?

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも 「ブログ内検索」をスマホやタブレット表示の際に、本文上に置く方法は?

  • このトピックには8件の返信、2人の参加者があり、最後にMaruにより8年、 4ヶ月前に更新されました。
8件の返信スレッドを表示中
  • 投稿者
    投稿
    • #59756
      Maru
      ゲスト

      「ブログ内検索」ですが、パソコン表示の際はサイドバー上部に表示されて使いやすいものの、スマホやタブレットで表示させた場合は、記事もしくは過去記事一覧の更に下に表示されてしまいます。
      現実的には使えない状態です。

      ページを開いたときに検索ワードを入れて記事を検索するケースが多いので、できれば本文上に置きたいのです。
      これを「簡単に」実現する方法はないものでしょうか?

    • #59760
      アバター画像わいひら
      キーマスター

      「投稿本文上ウィジェットエリア」に「検索ウィジェット」を言えるのではダメなのでしょうか?

    • #59804
      Maru
      ゲスト

      わいひら様
       ありがとうございます!その方法でできました。
       ただ、ちょっと気になる点があります。
       ・本文のすぐ真上になるのでわかりづらい。
       ・スマホ画面ではともかく、、パソコン画面ではサイドバーの検索と重複する。
       ・(投稿ページだけでなく固定ページにも付けたとしても)トップ画面では表示しない。
       というところが残念です。
       「常にページタイトルの上」に出せれば良いのですが、それでもトップ画面には出ません。
       やはり難しいでしょうか?

    • #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 を変更すれば、見た目は変えられます。お気に召さなければ、無視されてください。

    • #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>
    • #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');
      ?>
    • #59819
      かうたっく
      ゲスト

      コピペしっぱなしでした。Simplicity2 child: before-main.phpに以下をいれるのがスマートかもです。

      <?php //サーチフォームを読み込む
        get_template_part('searchform');
      ?>
    • #59821
      Akira
      ゲスト

      確かに!ウィジェットエリアを作る必要はないですね。

      searchform.php を before-main.php に直接設置すればいいですね。

    • #59854
      Maru
      ゲスト

      わいひら様 Akira様

      いろいろありがとうございます。
      やってみたいのですが、私の知識的に厳しいところがありますので、バックアップを取りながら1つずつ試させていただきます。
      どうもありがとうございました。

8件の返信スレッドを表示中
  • このトピックに返信するにはログインが必要です。
スポンサーリンク
アドセンス(大)
アドセンス(大)