ヘッダー領域内のロゴタイトル横に、検索窓を設置する方法

jQueryで、例えばサイドバーにある検索フォームをヘッダーに持っていくことは可能ですが、cssやらhtmlのレンダリングより後でjQueryが動作したりしてヘッダーの要素にjQueryを利用するのはアレなので、例外的に親テーマを使います。

親テーマを使うと言っても子テーマにheader.phpをコピーします。親テーマのアップデートに注意をしないといけませんが、親テーマのアップデートごとに子テーマに移動したheader.phpを比較して、何かしら変更・更新があれば、この後書く手順に従って親テーマheader.phpを子テーマにコピペし直して下さい。

変更更新があったかは、日付を確認したり、Simplicityのgithubを確認して変更点を確認します。

手順。

1. 親テーマheader.phpを子テーマにコピーします
2. 子テーマfunctions.phpにウィジェットエリア登録のスクリプトを書きます
3. 子テーマにコピペしたheader.phpにウィジェットエリアを表示するスクリプトを書きます
4. codepenのサンプルを参考にしてcssでスタイルします
5. ダッシュボード→ウィジェットから検索をウィジェットエリアに入れます

2) ウィジェットエリア登録 スクリプト 子テーマfunctions.php

register_sidebar( array(
	'name'          => 'ヘッダーサーチ',
	'id'            => 'header_search',
	'before_widget' => '<div class="widget header sidebar">',
	'after_widget'  => '</div>',
	'before_title'  => '<h2 class="widget-title">',
	'after_title'   => '</h2>',
) );

3) ウィジェットエリア表示 スクリプト 子テーマheader.php内

<div id="h-top"<?php //echo $h_top_style; ?>>
  <?php get_template_part('button-menu'); //モバイルメニューボタンの呼び出し?>
  
  // ここから
  <div class="header_search">
    <?php dynamic_sidebar('header_search'); ?>
  </div>
  //ここまでをここに追加

  <div class="alignleft top-title-catchphrase">

4) サンプル: headerに検索フォームを入れた時のスタイル例 | codepen
※ cssはscssで書いてあります。css欄の下向き三角からview compiledでcssに変換できます。
※ ロゴ画像がないのでタイトルで代用しています
※ デフォルトのスタイルを打ち消すスタイルをたくさん書いてますので注意して下さい。

親テーマheader.phpに変更があった場合、1からやり直して下さい。おそらくウィジェットを再登録しなくてもイケるんじゃないかと思いますが、これら作業をした際には一応確認して下さい。

完全レスポンシブのon/off、モバイル時にどのようなナビのスタイルをしているのか等わからない部分もありましたので全部ありきで書いています。不要な部分はcssにてdisplay: noneなどして消して下さい。

ちなみにサンプルはレスポンシブに対応させるために、不要なスタイルも最後の方に記載しています。
この部分は不要です。サンプル上でレスポンシブでどうなるかの確認をして下さい。

ここらも実際のサイトを見たわけではないので、このままのスタイルでどのようにレスポンシブ表示がされるかはわかりません。
Simplicityのデフォルトのメディアクエリなどが動作して表示が崩れる可能性もある(デフォルトのスタイルのメディアクエリの指定や、cssのセレクタの優先度の加減で表示が崩れる場合もあります)ので、その際には打ち消すスタイルを書く必要があります。

サンプルではmobile.cssをつかわずとも子テーマstyle.cssで全部できるようにしてあります。
子テーマstyle.cssよりも後で読み込まれるcssがある場合、それらが上書きすることがあります。
htmlに直接style属性で書かれたスタイルや、wordpressの追加css、head内にstyleタグで書き出すようなスタイルがある場合、子テーマのスタイルが上書きされることがあります。
なるべく子テーマ内のcssで完了できるように考慮して下さい。

サンプルで横並びになっていないなら、ブラウザがflexに対応してないのではなかろうかと思います。

モバイル時は縦並び、より広い画面では横並びになるようにしてあります。かつ縦センターになるようにしてあります。
firefox、あるいはchromeで確認して下さい。
フルページビューでブラウザの幅を変更したり実機で確認してみて下さい。
通常のcodepenの画面からもエディター部分とリザルトの画面の境界を動かすことで画面幅の変更ができます。

codepenは有料バージョン以外は画像をアップロードできないので、対象となる画像のアドレスがわからないとサンプルが作れません。

> 検索窓のサイズ変更

.header_searchのサイズに追従するようになってます。モバイル時には250pxが最大になっています。