Ｃocoonカスタマイズ・ヘッダーに検索窓を表示する方法

QOOPY

そもそも検索窓、検索バーの表示って必要なのか？と思い立った今日この頃。PC（パソコン）の画面表示の時だけ、ヘッダー部分に検索窓を付けたいな～と。そこでいい感じでカスタマイズしたので忘備録です。
ヘッダーに検索窓を表示したい方は参考にしてください。

Index

ヘッダーに検索窓を表示する
1. functions.phpにコピペしてヘッダーウィジェットを作る

ヘッダーに検索窓を表示する

WorldPressのヘッダーに検索窓とキーワード検索すると下記のサイトが出てきました。

https://yusukesakai.com/archives/268

上記のサイトを参考にＣocoonヘッダーメニューに追加して検索窓を表示する方法

一度上記の方法でカスタマイズしてみたのですが、レイアウトの調整が難しく、断念しました。そして数日後Cocoonの関数wp_header_logo_after_openを見つけて、ロゴ表示のしたに検索バーを設置することで、スタイルよく無事に検索窓を表示することができました。

cocoon設定のヘッダー設定はトップメニューにしています

functions.phpにコピペしてヘッダーウィジェットを作る

カスタマイズする前に、必ずバックアップを取りましょう。
functions.phpの記述ミスするとWebサイトが真っ白になります。

参考にしたサイト

Cocoonでヘッダー画像エリアの中にお知らせスペースを設ける方法

今度出す新刊のお知らせをサイト上で告知したいんですが、ちょうど良い場所がありません。ヘッダー画像上に適してそうな場所があるので、テーマをカスタマイズして告知スペースを設けることにしました。

//ヘッダーロゴの下に出力をする//
add_filter('wp_header_logo_after_open', 'add_header_contents');
 function add_header_contents() {
     dynamic_sidebar('add-header-contents');
 }
// アナウンス枠エリアウィジェット//
if (function_exists('register_sidebar')) {
    register_sidebar(array(
            'name' =&gt; 'ヘッダー領域追加コンテンツ',
            'id' =&gt; 'add-header-contents',
            'description' =&gt; 'ヘッダー領域に追加コンテンツを表示するウィジェットです。',
            'before_widget' =&gt; '<div class="add-header-contents">',
            'after_widget' =&gt; '</div>',
    ));
}

上記を子テーマの functions.phpにコードをコピペします。すると管理画面の [外観]→[ウィジェット] を開くと先ほどコードを追加したウィジェットエリアが出来ていています。

その中に検索ウイジェットを登録。

CSSでスタイルを調整

外観→テーマエディターからCocoon Child: スタイルシート (style.css)に以下をコピペしました。
PC（パソコン）画面の時だけ表示するので、タブレット・スマホの時は display: noneで非表示にしています。非表示しないとロゴ下に出てきます。

CSSの追記があります

参考にしたサイト下記の2つ

Cocoon 検索ボックスのデザインをカスタマイズする方法（枠、色、文字の変更）とデザインサンプル5つ

Cocoonの検索ボックス（検索フォーム）のデザインをカスタマイズする方法と、デザインサンプルを紹介します。

https://bibabosi-rizumu.com/cocoon-searchform-customize/

/*検索窓*/
.search-box {
width:100%;
margin:0 1.5px 0.5em; 
position: relative; display: flex;
}
.search-edit {
width:auto; /*入力部分の長さ*/
height:33px ;/*検索窓の高さ*/ 
background: #fff; /*入力部分の背景色*/
 font-size: 15px;
}	
.search-submit {
background: #fff; /*ボタン部分の背景色*/
color: #aeab92;/*アイコンの色*/
position: absolute; margin:6px 6px 3px; 
cursor: pointer; line-height:0; /*検索アイコンの高さや位置*/ 
border:none;padding: 0;}

.search-box input::placeholder {
font-size: 14px; color: #aeab92;/*プレースホルダーのフォント大きさと色*/
}

/*768px以下*/
@media screen and (max-width: 768px){
/*タブレット・スマホの時は非表示*/
.add-header-contents {display: none; }
}

そもそも検索窓、検索バーの表示って必要なのか？

いろいろと調べてみてホームページ（Webサイト）には検索窓は必要不可欠！のようです。そして
下記のうような記事を見つけました。

検索ボックスの場所を（ホームページ内の）どこにするかは、そのサイト自体の生命線を握るといっても過言ではないほど重要な項目の1つ

ホームページに必要不可欠！重要項目「検索ボックス」の位置パターン7選

ホームページ内のどこに検索ボックスを置くべきか……皆さんは考えたことがありますか。検索ボックスの場所をどこにするかは、ホームページの生命線を握る重要な項目の1つです。今回は、検索ボックスの位置パターンをご紹介します。

検索バーを表示サイトは1カラムでサイドバーはありません、そうすると検索窓の設置場所は自ずと限られてきます。
自動的にヘッダーに検索窓に・・・ということになりました。

ピンポイントで記事を探したい！という読者に必要なものとなりました。

最後に

ヘッダーに検索窓を表示の方法を模索して数日。
テーマによってはもっと簡単に検索窓を設置できるのかもしれませんが、ワタシ的には上記の方法がシンプルで分かり易く、ほとんどコピペでカスタマイズをしました。

モバイル表示では検索窓は虫眼鏡アイコンを表示してタップすると検索バーがでます。
やはり日々、利便性向上ですね！

CSSでスタイル調整の追記

最終的には、ロゴの横に検索窓を配置しました。Cocoon設定のヘッダーは「トップメニュー（右寄せ）」にしています。

CSSは独自でしていますので、コピペして使う時は好きな位置に調整ください。
コードはこちら

/*ロゴ表示調整*/
.site-logo-image.header-site-logo-image{padding-top:18px;padding-left:10px}

/*検索窓*/
.add-header-contents{position:relative;bottom:36px;left:285px;width:auto;}

/*768px以下*/
@media screen and (max-width: 768px){
/*タブレット・スマホの時は非表示*/
.add-header-contents {display: none; }
}

さらに追記（2020/05/29）

日々このページの訪問者が増えています、ありがとうございます。
現在、検索窓はヘッダー右端に移動してビジュアル的にもイイ感じです。気
に入っています。
ご参考なるかどうかわかりませんが、変更CSSを追記します。

/*pc*/
.add-header-contents {
    position: relative;
    bottom: 38px;
    left: 900px;
    width: 95%;　/*検索窓の横幅調整*/
}

/*1240px以下*/
@media screen and (max-width: 1240px)
.add-header-contents {
    position: relative;
    bottom: 38px;
    left: 790px;
    width: 220px;　/*検索窓の横幅調整*/
}

モバイル表示の時は .add-header-contents {display: none; } で非表示しています。
もっとスマートな方法でCSSで右端に寄せる方法があるかと思うのですが。。。。すいません。
１カラムの場合検索窓の置き場所に悩みますが、これだったら見やすくていいですよね。
ご参考になれば幸いです。