投稿者:: @agito

↑

Astraテーマのヘッダービルダーのように、ロゴの隣などに好きなパーツを配置できること。

Astraテーマのヘッダービルダーというのは、添付画像の部分の機能のことですよね。
プロ版にアップグレードしてまでは試してないんですけど、推測するにこれを一から、この機能追加するにはCocoonを再度作る以上の労力がかかりそうな気がします。
Astraテーマは有料テーマで、開発人数もそれなりにある（一人開発なら相当なエキスパート）から、これだけ作りこめる部分があるかと思います。
恐れ入りますが、ちょっとこの機能の実装は僕には難しいです。

投稿者:: @agito

↑

functions.phpを編集してウィジェットエリアを追加して「検索バー」を入れてみました。ネットの情報のコピーでロゴの下側に「検索バー」を表示できましたが、横並びにすることができませんでした。

この状態ができているのであれば、CSSの追加でできそうな気もします。
上記の状態のテストサイトなどを見せて頂ければ、横並び用のCSSを書けるかもしれません。
※実際のソースコードを見ないと必ずできるとは言い切れないので、あらかじめご了承いただければ幸いです。

●ご参考

https://youtu.be/7TFMLQ9rh28?si=5JbvEj_gYWfNi7hh

こちらの動画が参考になるかと思います。
Astraのように、UI上で自由に部品配置を実現するには、わいひらさんがおっしゃるように、かなりの作り込みが必要かと思います。

ヘッダーメニューに検索ボタンを付けたいなら、スキン「grayish」を選択すれば可能です。

他の方も仰っているように。
ヘッダーに検索窓？を追加するためだけに、いろいろするのは、ちょっとコストに見合わない気がします。

そうすることで、他の方にも有益で、たくさん使っていただけるということであれば、まだ良いですけれど。
そうでもなさそうに感じますね。

しっかりご質問を確認していませんし、時間もありませんので、ちょっと触ってみただけですけれど。
（完成イメージのご提示がありませんので、どんなイメージか分からないということもありますね）

以下のように、検索ウィジェットを追加すると、ロゴの下に入りますので。

add_action('wp_header_logo_after_open', function () {
  the_widget( 'WP_Widget_Search' );
}); 

@yhira ご返信ありがとうございます。

作るのはかなり大変なのですね・・・承知致しました。
テストサイトの作り方がよく分からないので、（テストサイトという概念を始めて知りました）AIに聞きまくってロゴの右側に検索バーを表示させることが出来ました。私は全く意味を理解していませんが。
なぜか検索バーの長さを長くすることができませんでした。そこが悔しいですが、取り敢えずは解決しました。以下のようになりました。

CSSに以下を追加

/* PCサイズでの強制横並び（決定版） */
@media screen and (min-width: 1024px) {

/* 1. ロゴと検索バーを包む親要素を強制的にFlexboxにする */
#header-in {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important; /* 左寄せ */
height: auto !important;
padding: 10px 0 !important;
}

/* 2. ロゴ部分の「幅100%」を解除して左に固定 */
.logo-header {
flex: 0 0 auto !important; /* 伸び縮みさせない */
width: auto !important;
margin: 0 40px 0 0 !important; /* 右側に40pxの隙間 */
}

/* 3. PHPで追加された検索バーの枠を右側の余白に広げる */
.add-header-contents {
flex: 1 1 auto !important; /* 検索窓を可能な限り広げる */
display: block !important;
   max-width: 600px !important; /* 検索窓の長さ */
margin: 0 !important;
}

/* 4. 検索フォームの中身を横幅いっぱいに */
.search-form {
display: flex !important;
width: 100% !important;
}
}

phpに以下を追加

// 1. ヘッダーロゴの直後に追加ウィジェットを出力する
add_filter('wp_header_logo_after_open', 'add_header_contents');
function add_header_contents() {
dynamic_sidebar('add-header-contents');
}

// 2. ウィジェットエリア「ヘッダー領域追加コンテンツ」を登録する
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'ヘッダー領域追加コンテンツ',
'id' => 'add-header-contents',
'description' => 'ヘッダー領域に追加コンテンツを表示するウィジェットです。',
'before_widget' => '<div class="add-header-contents">',
'after_widget' => '</div>',
));
}

@chu-ya ご返信ありがとうございます。スキンという機能も知りませんでした。まだまだ勉強不足だと実感しております。ありがとうございます。

@mk2_mk2 そのような感じを想像しておりました。
Amazonのようなイメージです。完成イメージを提示しておけばよかったですね。
AIに聞いて取り敢えずは出来ました。ありがとうございます。

@agito さん

●設定での注意

以下の設定をしているかと思います。

[Cocoon設定]→[ヘッダー]
→ヘッダーレイアウト「センターロゴ」
→キャッチフレーズの配置「表示しない」オフ

※センターロゴの場合、キャッチフレーズが表示され、キャッチフレーズ、ヘッダーロゴ、検索と横並びになってしまいます。

●CSS

/* ロゴ、ウィジェットを横並びに */
#header-in {
  align-items: center;
  display: flex;
  flex-direction: row;
}


/* 検索フォームの幅をいっぱいに */
#header-in .add-header-contents {
  padding: 10px;
  width: 100%;
}

/* ヘッダーロゴの幅を縮めない */
#header-in .logo-header {
  flex-shrink: 0;
}

@chu-ya 大門未知子 様

お陰様で解決しました！
ご親切にありがとうございます。

後にこの質問を見る人のために
ヘッダーレイアウト「センターロゴ」
キャッチフレーズの配置「表示しない」
大門未知子 様がご提示して下さったCSSを貼り付け。
（私が前に書いたCSSは要らない）
これでロゴが左に検索バーが右に並んで、横一列にすることができました。

追記：スマホでは縦並びに戻して見やすくするには、CSSコードを以下に変えました。(AIに聞いたので最適なのかは分かりませんが、私はうまくいきました）

/* PCのみに適用（1024px以上） */
@media screen and (min-width: 1024px) {
  #header-in {
    align-items: center;
    display: flex;
    flex-direction: row;
  }

  #header-in .add-header-contents {
    padding: 10px;
    width: 100%;
  }

  #header-in .logo-header {
    flex-shrink: 0;
  }
}