失敗しない、着物リメイクしてもらうときのあれこれ

Cocoonヘッダー検索窓を表示①

この記事は約7分で読めます。
QOOPY
QOOPY

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

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

ヘッダーに検索窓の表示
PC画面(パソコン)の時グローバルメニュー

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

【Cocoon】検索ボックスをヘッダーに表示する
前回に引き続きWordPressのカスタマイズの備忘録。今回はCocoonの子テーマで検索ボックスをヘッダーのメニューに表示させるための方法を書く。...

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

一度上記の方法でカスタマイズしてみたのですが、レイアウトの調整が難しく、断念しました。そして数日後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' => 'ヘッダー領域追加コンテンツ',
            'id' => 'add-header-contents',
            'description' => 'ヘッダー領域に追加コンテンツを表示するウィジェットです。',
            '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の検索ボックス(検索フォーム)のデザインをカスタマイズする方法と、デザインサンプルを紹介します。
Cocoon検索フォームのカスタマイズ!デザイン変更、入力フォーム文字変更
WordPressテーマCocoonのデフォルト『検索窓・検索フォーム・検索ボックス』言いかたはさて置き『サイト内検索』のカスタマイズをご紹介します...
/*検索窓*/
.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カラムでサイドバーはありません、そうすると検索窓の設置場所は自ずと限られてきます。自動的にヘッダーに検索窓を・・・ということになりました。

読者がピンポイントで記事を探したい!という利便性で必要なものなんですね。

最後に

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

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

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で右端に寄せる方法があるかと思うのですが。。。。すいません。
1カラムの場合検索窓の置き場所に悩みますが、これだったら見やすくいいですよね。
ご参考になれば幸いです。

タイトルとURLをコピーしました