[ 解決済 ] サイト内検索窓をヘッダー上部に設置したい
[ 解決済 ] サイト内検索窓をヘッダー上部に設置したい
-
投稿者投稿
-
2021年3月31日 12:55 PM #50184
AU3638参加者■ 利用テーマとバージョン :Lightning Proバージョン: 8.9.3
■ 質問内容:
サイト内検索窓をヘッダー上部に設置したいのですが、
外観→カスタマイズの「ヘッダー上部設定」では、お問い合わせボタンとお問い合わせ電話しかできず、
外観→メニューでは、「Header Top Navigation」で固定ページや投稿などはできますが、ウィジェットにあるようなサイト内検索フォームを追加することができません。
ヘッダー上部設定の右側にサイト内検索窓を表示させる方法はないでしょうか。
よろしくお願いいたします。2021年3月31日 2:08 PM #50190Lightning 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年、 7ヶ月前に対馬 俊彦が編集しました。
2021年3月31日 3:09 PM #50194申し訳ありません、本件 G3 ならヘッダーウィジェットに配置すれば良いのですが、ヘッダーウィジェットが正常に動作していないようでしたので現在再調整中です。
修正できましたら追って書き込みいたします。
2021年3月31日 4:46 PM #501972021年3月31日 7:41 PM #502102021年3月31日 10:32 PM #50230
AU3638参加者早急なご回答ありがとうございます。
■案1. デザインスキンを追加する
ご提案にありました、Varietyスキンを入れました。
ヘッダー上部設定の項目に違いは無さそうなのですが、
検索窓を設置するには、どのようなHTMLコードをどこに入れれば宜しいのでしょうか。また、「Variety(非推奨)」と「VarietyⅡ」の違いはなんでしょうか。
何卒よろしくお願いいたします。
Attachments:
You must be logged in to view attached files.2021年4月1日 10:47 AM #50277「Variety(非推奨)」と「VarietyⅡ」の違いはなんでしょうか。
第1世代:Origin / Variety
第2世代:Origin II / Variety II
です。おそらく今までは Origin II をお使いだったと思いますので、Variety II を選んでください。
近々発売の第3世代が案2.の Lightning G3 です。
2021年4月1日 10:53 AM #50279検索窓を設置するには、どのような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年、 7ヶ月前に対馬 俊彦が編集しました。
2021年4月1日 11:22 AM #50281G3 Pro Unit にヘッダーウィジェットが配置できない不具合を修正した 0.1.3 をアップしました。
石川さん、
G3 Pro Unit 0.1.3 にアップデートして、
ヘッダー右側エリアのウィジェットが使えるようになったことを確認いたしました。
ありがとうございます。昨日このトピックの回答を書きながら、ウィジェットの場所を見つけられなかったので、
「できます」と書きづらくて、「できる仕様になっています」と書きました。G3 の検索ウィジェットのデザイン、いいですね。
ベータ版なので、これから細かいところを仕上げていくのだと思いますが、
デザインについてひとつ要望させてください。添付画像をご参照ください。
検索入力欄をフォーカスしたときのデザインで、
赤丸の部分をピン角にしていただいた方がかっこいいです。Attachments:
You must be logged in to view attached files.2021年4月1日 11:29 AM #50283
AU3638参加者早急なご回答感謝いたします。
教えていただいた手順で検索窓が表示できたのですが、
可能であれば、ロゴの横ではなく、添付画像のように「ヘッダー上部設定」項目の右側に表示したのですができますでしょうか。何卒よろしくお願いいたします。
Attachments:
You must be logged in to view attached files.2021年4月1日 11:47 AM #502882021年4月1日 12:29 PM #50290AU3638 さん、
ロゴの横ではなく、添付画像のように「ヘッダー上部設定」項目の右側に表示したのですができますでしょうか。
その場所にはアクションフックが用意されていないので、
テンプレートファイルを直接いじればできるかもしれませんが、
アップデートのたびに同じカスタマイズ作業をしなければならないし、
私は怖くて手を出せません。すみませんが、ここから先は「お遊び」としてお楽しみいただければうれしいです。
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; }
上記のコードだけでは
レスポンシブ対応にはなっていませんし、
スクロールしたときの見え方が怪しげですし、
他にも問題が起きる予感がします。それともうひとつ、
このやり方で実装するなら、アクションフックでなくてもできます。2021年4月1日 5:18 PM #50311AU3638 さん、
ロゴの横ではなく、添付画像のように「ヘッダー上部設定」項目の右側に表示したのですができますでしょうか。
ヘッダー上部エリアに検索窓を置くのは私には荷が重いのですが、
ヘッダー上部エリアを表示しないやり方ならわりと楽にできました。こんなかんじになります。
このようにする手順は以下の通りです。
【手順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 の調整をした方がいいですが、
これなら実用になるのではないかと…2021年4月2日 11:22 AM #50332
AU3638参加者ありがとうございました。
大変助かりました。 -
投稿者投稿
- このトピックに返信するにはログインが必要です。