[ 解決済 ] Header Navigationに検索窓を設置したい

[勇太吉川]

■ WordPress のバージョン
6.1.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.1.3

■ Pro Unit のバージョン
0.23.2

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
Header Navigationに検索窓を設置したいです。

現在、Lightning G3 Proの「カスタマイズ」→「メニュー」→メニューの位置「Header Navigation」を選択して、メニューを表示していますが、検索窓だけどう設置していいかよくわからない状態です。

(※おそらくとても初歩的な質問だと思うので、大変申し訳ないです)

■ 自分で試した事
①ダッシュボード→外観→ウィジェット→ヘッダー右側エリア、に「検索」を設置した。
結果: 何も表示されない

②「lightning_site_header_logo_after」のアクションフックを利用して設置した。
表示位置は良いが、他のメニュー項目と一緒にまとめられてレスポンシブに対応はされない。

添付画像①: 現在の状態
添付画像②: 仕上げたい状態

■ 症状が発生するブラウザ
Chrome

■ 実際の症状
なし。

■ その他特記事項
初歩的なことで、大変申し訳ありませんが、どうぞよろしくお願い致します。

Attachments:

You must be logged in to view attached files.

[うなこ]

①ダッシュボード→外観→ウィジェット→ヘッダー右側エリア、に「検索」を設置した。
結果: 何も表示されない

このウィジェットは、
【カスタマイズ】>【ヘッダーレイアウト】が「ヘッダーウィジェットあり&ナビ貫通」のレイアウトの場合に表示されます。

②「lightning_site_header_logo_after」のアクションフックを利用して設置した。
表示位置は良いが、他のメニュー項目と一緒にまとめられてレスポンシブに対応はされない。

完成イメージを確認しますと、「lightning_site_header_logo_after」のアクションフックで検索窓を表示して、
見た目をCSSで調整してあげるのが、一番イメージに近いものができるかなと思いました

serchの部分をhoverすると、入力フィールドが伸びて出現するような表現もcssだけでできると思います。

• この返信は1年、 4ヶ月前にうなこが編集しました。

[うなこ]

こんな感じはいかがでしょうか

子テーマのfunctions.phpに以下を追加

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

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

子テーマの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);
}

• この返信は1年、 4ヶ月前にうなこが編集しました。
• この返信は1年、 4ヶ月前にうなこが編集しました。

[勇太吉川]

うなこ様

こんばんは。
この度はご返信頂き誠にありがとうございます!
頂いたアドバイスの通り②の「lightning_site_header_logo_after」のアクションフックを利用して設置することにしました。それで最初に質問させて頂いた内容のものは解決出来ました。

ただ検索機能をプラグインの「Ajax Search Lite」を利用したいと思っておりまして、プラグインを利用した上で見た目を頂いたCSSに近づけようとしています。

※※※※※
すみません、一点なのですが、Lightningと関係あるのかないのかわからないのですが、lightning上で「Ajax Search Lite」を有効化し、検索窓に空白のままで「Enter」をすると以下のようなエラーが表示されます(添付画像あり)。

Warning: DOMDocument::loadHTML(): Tag figure invalid in Entity, line: 51 in /Users/yutayoshikawa/Local Sites/wcb-natural-life/app/public/wp-content/plugins/ajax-search-lite/includes/functions/functions.php on line 862

これはLightningとプラグインの相性によるものでしょうか? それともプラグイン単体の問題でしょうか? もしLightningと関係のない内容であれば仰ってください。
いつもご丁寧にご対応頂きありがとうございます。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

Ajax Search Lite に興味があったので、
私の Lightning ( G3 ) + Lightning G3 Pro Unit のサイトで試してみました。

いいかんじのプラグインですね。

> 検索窓に空白のままで「Enter」をすると…

エラーにならずに、すべての投稿や固定ページが表示されています。
ということで、Lightning との相性以外に要因があると思います。

ちなみに、VK Filter Search との相性はすごく悪いですね。
Ajax Search Lite があると、VK Filter Search が正常に動作しません。

[勇太吉川]

対馬様

こんにちは。
ご回答いただきありがとうございます!

>ということで、Lightning との相性以外に要因があると思います。
承知しました。では、そこは自身で原因を探っていこうと思います。

>VK Filter Search との相性はすごく悪いですね。
そうなのですか。。VK Filterはこれから入れようと思っていたので、Ajax Lite Search をこのまま使用しないほうがいいかもしれないですね。事前に知ることが出来て、大変助かりました。

吉川

[勇太吉川]

うなこ様、対馬様、誠にありがとうございます。

[勇太吉川]

ベストアンサーを先に選んでしまうと、解決済みを押しても[解決済み]と表示されないのかな??

[うなこ]

吉川勇太さま　ありがとうございます。

ベストアンサーを先に選んでしまうと、解決済みを押しても[解決済み]と表示されないのかな??

こちら確認させていただきます、
こちらのスレッドは解決済みとさせていただきます。

[投稿者]

投稿