[ 解決済 ] サイト内検索窓をヘッダー上部に設置したい

[AU3638]

■ 利用テーマとバージョン :Lightning Proバージョン: 8.9.3

■ 質問内容：
サイト内検索窓をヘッダー上部に設置したいのですが、
外観→カスタマイズの「ヘッダー上部設定」では、お問い合わせボタンとお問い合わせ電話しかできず、
外観→メニューでは、「Header Top Navigation」で固定ページや投稿などはできますが、ウィジェットにあるようなサイト内検索フォームを追加することができません。
ヘッダー上部設定の右側にサイト内検索窓を表示させる方法はないでしょうか。
よろしくお願いいたします。

[対馬 俊彦]

Lightning Pro のカスタマイズ機能と標準ウィジェットではご希望のことができません。

以下のやり方でできます。

■案1. デザインスキンを追加する

デザインスキンの Fort と Pale はヘッダー右側にウィジェットを配置できます。
ただし、このウィジェットを使うとお問い合わせ電話番号とボタンが表示されなくなります。

ヘッダー上部のお問い合わせ電話番号とボタンを残したいのであれば、Variety がよいです。
Variety はこの位置に任意の HTML コードを書くことができます。

■案2. Lightning G3 を使う

近々販売開始予定の次期バージョン G3 はご希望通りのことができる仕様になっています。

■案3. アクションフックを使う

functions.php に以下の行を追加すれば、該当箇所に任意の HTML コードを出力できます。

function my_lightning_header_logo_after(){
$append_html  = '*******************************';
echo $append_html;
}
add_action( 'lightning_header_logo_after', 'my_lightning_header_logo_after' );

******************************* は任意の HTML コードです。

人によっては、HTML コードを書くやり方は難しいと感じるかもしれません。

• この返信は3年前に対馬 俊彦が編集しました。

[石川＠Vektor,Inc.]

申し訳ありません、本件 G3 ならヘッダーウィジェットに配置すれば良いのですが、ヘッダーウィジェットが正常に動作していないようでしたので現在再調整中です。

修正できましたら追って書き込みいたします。

[対馬 俊彦]

どの案がベストなのかは、ご質問者が制作中のサイトの状況にもよりますが…

・Lightning Pro を使い始めて間もない
・サイトの制作に着手して間もない
・急ぎでない

のすべての条件が当てはまるのであれば、Lightning G3 を使うのがよいと思います。

Lightning G3 のベータ版はダウンロードして使えるようになっています。

Home

先日の勉強会では早ければ4月中旬、遅くても5月には正式版が販売開始される見込みとのことでした。

※勉強会に出たようなことを書いてますが、先日は不参加であとから録画を見ました。

• この返信は3年前に対馬 俊彦が編集しました。

[石川＠Vektor,Inc.]

G3 Pro Unit にヘッダーウィジェットが配置できない不具合を修正した 0.1.3 をアップしました。

実際に配置すると以下のようになります。

HOME

G3 Pro Unit の最新版はマイページからダウンロードしてください。

マイアカウント

[AU3638]

早急なご回答ありがとうございます。

■案1. デザインスキンを追加する

ご提案にありました、Varietyスキンを入れました。
ヘッダー上部設定の項目に違いは無さそうなのですが、
検索窓を設置するには、どのようなHTMLコードをどこに入れれば宜しいのでしょうか。

また、「Variety（非推奨）」と「VarietyⅡ」の違いはなんでしょうか。

何卒よろしくお願いいたします。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

「Variety（非推奨）」と「VarietyⅡ」の違いはなんでしょうか。

第1世代：Origin / Variety
第2世代：Origin II / Variety II
です。

おそらく今までは Origin II をお使いだったと思いますので、Variety II を選んでください。

近々発売の第3世代が案2.の Lightning G3 です。

[対馬 俊彦]

検索窓を設置するには、どのようなHTMLコードをどこに入れれば宜しいのでしょうか。

【手順1.】
子テーマの function.php に以下の行を追加してください。

function my_lightning_header_logo_after(){
  get_search_form();
}
add_action( 'lightning_header_logo_after', 'my_lightning_header_logo_after' );

【手順2.】
子テーマの style.css に以下の行を追加してください。

.navbar-header form {
  float: right;
}
.navbar-header form div input#s {
  float: left;
  width: 64%;
}
.navbar-header form div input#searchsubmit {
  float: right;
  width: 33%;
}

@media (max-width: 991px) {
.navbar-header form {
  display: none;
}
}

子テーマでのカスタマイズ

【補足】
Variety には「ヘッダーバナーHTML」というカスタマイズ項目があって、
そこに HTML コードを書けばいけると思って昨日は回答しましたが、
実際にやってみたら、その方法だとうまくいかないことが判明したので、
上記の方法を回答いたします。

• この返信は3年前に対馬 俊彦が編集しました。

[対馬 俊彦]

G3 Pro Unit にヘッダーウィジェットが配置できない不具合を修正した 0.1.3 をアップしました。

石川さん、

G3 Pro Unit 0.1.3 にアップデートして、
ヘッダー右側エリアのウィジェットが使えるようになったことを確認いたしました。
ありがとうございます。

昨日このトピックの回答を書きながら、ウィジェットの場所を見つけられなかったので、
「できます」と書きづらくて、「できる仕様になっています」と書きました。

G3 の検索ウィジェットのデザイン、いいですね。

ベータ版なので、これから細かいところを仕上げていくのだと思いますが、
デザインについてひとつ要望させてください。

添付画像をご参照ください。

検索入力欄をフォーカスしたときのデザインで、
赤丸の部分をピン角にしていただいた方がかっこいいです。

Attachments:

You must be logged in to view attached files.

[AU3638]

早急なご回答感謝いたします。

教えていただいた手順で検索窓が表示できたのですが、
可能であれば、ロゴの横ではなく、添付画像のように「ヘッダー上部設定」項目の右側に表示したのですができますでしょうか。

何卒よろしくお願いいたします。

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

対馬さん

ありがとうございます。近日修正いたします。

https://github.com/vektor-inc/lightning/issues/582

[対馬 俊彦]

AU3638 さん、

ロゴの横ではなく、添付画像のように「ヘッダー上部設定」項目の右側に表示したのですができますでしょうか。

その場所にはアクションフックが用意されていないので、
テンプレートファイルを直接いじればできるかもしれませんが、
アップデートのたびに同じカスタマイズ作業をしなければならないし、
私は怖くて手を出せません。

すみませんが、ここから先は「お遊び」としてお楽しみいただければうれしいです。

CSS で強引にヘッダー上部の右側に表示しようと思ったら、
子テーマの style.css にさらに以下の行を追加すればそれっぽくなります。

.navbar-header form {
  position: fixed;
  top: 0;
  right: calc( (100vw - 1110px) / 2 );
}

.admin-bar .navbar-header form {
  top: 32px;
}

.headerTop nav {
  right: 325px;
}

上記のコードだけでは
レスポンシブ対応にはなっていませんし、
スクロールしたときの見え方が怪しげですし、
他にも問題が起きる予感がします。

それともうひとつ、
このやり方で実装するなら、アクションフックでなくてもできます。

[対馬 俊彦]

AU3638 さん、

ロゴの横ではなく、添付画像のように「ヘッダー上部設定」項目の右側に表示したのですができますでしょうか。

ヘッダー上部エリアに検索窓を置くのは私には荷が重いのですが、
ヘッダー上部エリアを表示しないやり方ならわりと楽にできました。

こんなかんじになります。

トップページ

このようにする手順は以下の通りです。

【手順1.】
前回の手順で子テーマの function.php に追加した行を以下のものに差し替えます。

function my_lightning_header_logo_after(){
  get_search_form();
  $append_html  = '<div class="header_link"><a href="#">お問い合わせ</a><a href="#">サイトマップ</a></div>';
  echo $append_html;
}
add_action( 'lightning_header_logo_after', 'my_lightning_header_logo_after' );

【手順2.】
前回の手順で子テーマの style.css に追加した行を以下のものに差し替えます。

.navbar-header form {
  float: right;
  width: 280px;
}
.navbar-header form div input#s {
  float: left;
  width: 64%;
}
.navbar-header form div input#searchsubmit {
  float: right;
  width: 33%;
}
.navbar-header .header_link {
  float: right;
  margin-top: 7px;
}
.navbar-header .header_link a {
  margin-right: 10px;
  font-size: 14px;
}

@media (max-width: 991px) {
.navbar-header form,
.navbar-header .header_link {
  display: none;
}
}

ちょこちょこっと作ったものなので、HTML/CSS の調整をした方がいいですが、
これなら実用になるのではないかと…

[AU3638]

ありがとうございました。
大変助かりました。

[投稿者]

投稿