コピペで簡単カスタマイズ!Lightningのヘッダーに検索窓を設置する方法


  1. Staff Blog
  2. WordPress
  3. コピペで簡単カスタマイズ!Lightningのヘッダーに検索窓を設置する方法

この記事は「Vektor WordPress Solutions Advent Calendar 2022」の12月2日の記事になります。
Lightningのヘッダーに検索窓を追加したいけど、どうやればいいのかわからない人向けに、コピペで簡単にカスタマイズできるような記事になっています。

こんにちは、スタッフの久納です。
前回の、石川さんによる「ベクトル製品の今後の展開について」の記事に引き続き、「Lightningのヘッダーに検索窓を設置する方法」を紹介していきたいと思います。

わたしは普段、デザイン業務やVWSフォーラムなどの返信をしています。ある日フォーラムを巡回していると、「Header Navigationに検索窓を設置したい」という投稿を見かけました。

ヘッダーに検索窓があるサイトはよく見かけますよね。Lightningでもヘッダーに検索窓をつけたいなと思う方は多いと思います。
実はLightningでも簡単に設置する方法がありますので、実装方法を種類別に紹介していきます。ぜひ参考にしてみてください!

【Pro機能】ウィジェットのヘッダー右側エリアに配置

Lightning G3 Pro Unit の機能でヘッダーレイアウト機能の「ヘッダーウィジュエットあり&ナビ貫通」にした場合に、【外観】>【カスタマイズ】>【ウィジェット】に【ヘッダー右側エリア】が表示されますので、ここへ検索ブロックを配置します。
一番シンプルで簡単な方法ですが、「ヘッダーウィジュエットあり&ナビ貫通」のレイアウトにした場合のみに表示されます。

配置したイメージは以下になります。
ウィジェットですと、検索ボックスが結構目立ちますので、ここまで目立たせたくない場合はアクションフックで挿入する方法があります。

完成イメージ

ウィジェットのヘッダー右側エリアに配置

アクションフックでロゴの横に検索窓を設置

完成イメージ

動画を再生して確認してください。

動画のように、クリックしたらテキストフォームが伸びて表示されるような動きです。動きはCSSでつけています。
アクションフックでロゴの横(ヘッダーメニューの左)に検索窓を設置しています。

では詳しいやり方を説明していきます!

※アクションフックについて詳しく知りたい方はこちらの記事をご参考にしてください。

子テーマを準備

まず、Lightningの子テーマを準備し、子テーマを有効化します。

アクションフックで検索窓を追加

子テーマのfunctions.phpのファイルに以下を追加してください。

/************************************************
 * ロゴの横に検索窓を設置
 */

function add_header_serch(){
    echo '<form role="search" method="get" class="search-form" action="'.home_url( '/' ).'">
	<input type="search" class="search-field" placeholder="キーワードを入力" value=" '.get_search_query() .'" name="s" title="検索したいキーワードを入力してください" />
	<input type="submit" class="search-submit" value="Search"/>
  </form>';
}
add_action( 'lightning_site_header_logo_after', 'add_header_serch' );

プチ解説

【Pro機能:アクションフックの場所】

Lightningのアクションフックの位置は、Lightning G3 Pro Unit の機能で【外観】>【カスタマイズ】>「Lightning 機能設定」の「開発ツール」の「アクションフックの場所を表示」にチェックを入れると表示されます。今回はlightning_site_header_logo_after の位置に検索窓を設置しています。

CSSで調整をする

子テーマのstyle.cssには以下を追加してください。

/* ---------------------------------
 ヘッダーロゴ横に検索窓
---------------------------------*/
/* デザインが崩れるので991.98px以下でform非表示 */
@media (max-width: 991.98px){
    .site-header-container form{
        display: none !important;
    }
}
.site-header-container .search-form{
    position: relative;
}
/*虫眼鏡マーク*/
.site-header-container .search-form:after {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin: 0;
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding:14px 1.5em;
}
/*フィールド*/
.site-header-container .search-field{
    position: absolute;
    top: 50%;
    transform: translateY(-50%) ;
    right: 0px;
}
/*submitボタン非表示*/
.site-header-container .search-submit{
    display: none;
}
/*テキストフィールド*/
.site-header-container form .search-field{
    z-index: 200;
    opacity: 0;
    width: 64px;
    transition: all 0.5s ease-in;
    padding: 1em 0.8em;
    cursor: pointer;
}
/*フォーカス時にテキストフィールド表示*/
.site-header-container form .search-field:focus{
    opacity: 1;
    width:155px;
    transition: all 0.5s ease-in;
    border-width:1px;
    border-radius:var(--vk-size-radius);
}

プチ解説

inputタグの.search-field のフィールドをフォーカスすると、opacityが1になり、テキストフィールドが表示されるようになっています。
フォーカス時と通常時でwidthの大きさを変えて、transition で0.5秒で横に伸びるようにしています。

991.98px以下ではヘッダー周りのレイアウトが変わるためformは非表示にしています。その代わりウィジェットで検索ブロックを入れてあげます。

スマホはウィジェットで検索ブロックを追加

幅が991.98px以下では、レイアウトが変わるため変な位置に表示されてしまうので、上のCSSでは非表示にしています。
代わりに【外観】→【ウィジェット】のモバイルナビ上部に検索ブロックを追加します。これでハンバーガーメニューをクリックした時に、メニューの中に検索窓が表示されます。

コピペでできるので簡単ですよね!
上のプチ解説に書いたように、Lightningのアクションフックの場所はLightning G3 Pro Unit の機能で【外観】>【カスタマイズ】>「Lightning 機能設定」の「開発ツール」の「アクションフックの場所を表示」にチェックを入れると表示されます。
次はアクションフックで「ヘッダートップ」に検索窓を設置します。

【Pro機能】アクションフックでヘッダートップに検索窓を設置

完成イメージ

Lightning G3 Pro Unit の機能でヘッダーの上部にメニューを配置できます。
下の完成イメージは、ヘッダー上部メニューにSNSアイコンをFont Awesomeのアイコンで並べて、一番右側に検索窓を設置します。ヘッダー上部メニューはお好みのものを入れてください。

※動画を再生して確認してください。

子テーマを準備

上記で説明したのと同じなので、ここでは省きます。

アクションフックでヘッダートップに検索窓を追加

子テーマのfunctions.phpのファイルに以下を追加してください。

/************************************************
 * header-topに検索窓を設置
 */
function add_header_top_serch(){
    echo '<form role="search" method="get" class="search-form" action="'.home_url( '/' ).'">
	<input type="search" class="search-field" placeholder="キーワードを入力" value=" '.get_search_query() .'" name="s" title="検索したいキーワードを入力してください" />
	<input type="submit" class="search-submit" value="Search"/>
  </form>';
}
add_action( 'lightning_header_top_container_append', 'add_header_top_serch' );

プチ解説

今回はlightning_header_top_container_append の位置に検索窓を設置しています。

CSSで調整する

/* ---------------------------------
 header-topに検索窓を設置
---------------------------------*/
.header-top .search-form{
    position: relative;
    top:3px;
    margin-left: 30px;
}
/*虫眼鏡マーク*/
.header-top .search-form:after {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin: 0;
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding:10px;
}
/*フィールド*/
.header-top .search-field{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}
/*submitボタン非表示*/
.header-top .search-submit{
    display: none;
}
/*テキストフィールド*/
.header-top form .search-field{
    z-index: 200;
    opacity: 0;
    width: 64px;
    transition: all 0.5s ease-in;
    padding: 3px;
    cursor: pointer;
}
/*フォーカス時にテキストフィールド表示*/
.header-top form .search-field:focus{
    opacity: 1;
    width:155px;
    transition: all 0.5s ease-in;
    border-width:1px;
    border-radius:var(--vk-size-radius);
}

プチ解説

991.98px以下ではヘッダートップのエリアは非表示になりますので、今回はformを非表示にするcssは入れていません。

スマホはウィジェットで検索ブロックを追加

上記で説明したのと同じなので、ウィジェットで検索窓を配置してください。

まとめと次回予告

Lightningには便利なアクションフックがたくさん準備してあります。
ぜひカスタマイズにご活用くださいね!

次はベクトルスタッフのChiaki Kounoさんが「Go to バンコク!ベクトルは WordCamp Asia 2023 に参加します」について書いてくれるそうですよ!バンコクー!!!
わたしはいけないので、おみやげ話を楽しみにしています(●´▽`●)

それではまた!

アドベントカレンダー参加者募集中!

ご参加者さんにはベクトルオリジナルグッズがもらえるそうですよ!!詳しくは下のリンクを見てくださいね!

この記事を書いた人

久納 美幸
デザインやCSSコーディング、フォーラム対応を担当しています。フォーラムでは「うなこ」という名前で投稿しています。

WordFes Nagoya(2013-2017)では、名古屋版わぷーを制作しました。
フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。


PAGE TOP

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。