Diviのセカンダリメニューに検索フィールドを追加する方法

今日のDiviチュートリアルでは、セカンダリメニューに検索フィールドを追加する方法を紹介します。 セカンダリメニューは、ページのヘッダー、およびWebサイトや会社に関する実用的な情報を入力しようとする場所としても知られています。 検索フィールドを追加するのは、クライアントからのリクエストか、自分のWebサイトに対するニーズである可能性があります。 いずれにせよ、Diviテーマを使用しているときに、この検索フィールドをセカンダリナビゲーションに簡単に統合する方法を紹介します。

結果

さまざまな手順に飛び込む前に、そこにたどり着くために必要な手順を説明します。 事前に結果をお見せするのも面白いかもしれません。 投稿の手順に従い、CSSの外観の変更を追加すると、デフォルトのセカンダリメニューで次の結果が得られます。

セカンダリメニューに検索フィールドを追加する理由

セカンダリメニューに検索の可能性を追加することは、あなたがやろうとしたかもしれないことの1つです。 ただし、プライマリメニューとは異なり、ヘッダーにはWordPress内に個別のページがなく、Webサイトのheader.phpファイルにPHPコード行を追加しなくても手動で追加できます。

ただし、セカンダリメニューに検索の可能性を追加することは興味深いことです。 追加する理由をいくつか見てみましょう。

訪問者に最初から検索の可能性を提供する

あなたのウェブサイトにはあらゆる種類の訪問者がいます。 物事を探求して時間をかけようとしている人もいれば、特定の情報をすぐに見つけたいと思っている人もいます。 セカンダリメニューに検索フィールドを追加することで、特定の何かを探している訪問者がすぐにそれを実行できることが保証されます。 セカンダリメニューはページの上部にあるため、急いでいる訪問者は、ユーザーエクスペリエンスを向上させる努力を高く評価するでしょう。

検索フィールドからプライマリメニューを保存するには

もちろん、あなたができるもう一つのことは、プライマリメニューに検索フィールドを追加することです。 しかし、場合によっては、それをしたくないかもしれません。 例えば; メニュー項目に焦点を合わせ続けたい場合、またはメニュー項目を検索フィールドと混在させたくない場合。 もう1つの理由は、プライマリメニューがビジーに見えるメニュー項目がすでにかなりあり、その上に検索フィールドを追加したくない場合です。

派手なプライマリメニューを使用せずに検索フィールドを強調する

ほとんどの人は、プライマリメニューを落ち着かせ、セカンダリメニューをポップにする傾向があります。 主な理由は、2つのメニューの明らかな違いを示したいからです。 また、セカンダリメニューには、強調したいことがいくつかあるためです（ソーシャルメディアアイコンなど）。 検索フィールドをセカンダリメニューにも統合することを決定すると、検索フィールドも自動的に強調表示され、訪問者が探しているものを正確に検索して見つけるように促します。

Diviのセカンダリメニューに検索フィールドを追加する方法

私たちのYoutubeチャンネルを購読する

ヘッダーPHPファイルに検索フィールドを追加

次の画像に示すように、実際に検索フィールドをヘッダーに追加するには、主にWebサイトのheader.phpファイルに何かを追加する必要があります。 必要なコード行は次のとおりです。

<？php get_search_form（）; ？>

先に進み、このPHPコード行をコピーして、WordPressダッシュボードに移動します。 WordPressダッシュボード内で、 [外観]> [エディター]> [header.php]に移動します。

これで、検索バーを表示したい場所にコード行を配置できます。 ソーシャルメディアアイコンのすぐ横に表示したいので、コード内の正確な場所を示します。 セカンダリメニュー、コンテナ、上部ヘッダーが閉じる直前に配置する必要があります。

検索フィールドのスタイルを設定する

デフォルトでは、検索フィールドは少し古くなっています。 思い通りに見えるようにしたり、ウェブサイトの他の部分のルックアンドフィールに合わせたりするために、いくつかの変更を加えることをお勧めします。 おそらく変更したいのは、検索ラベル、検索入力、ボタン入力の3つです。

検索フィールドにCSSの変更を加えない場合、セカンダリメニューではデフォルトで次のようになります。

これは明らかに私たちが達成したい最終結果ではありません。 幸いなことに、フィールドには必要なだけ変更を加えることができます。 この投稿の次のパートでは、検索フィールドのすべての要素を変更する方法を示します。また、CSSコード行を共有して、次の結果を実現します。

検索ラベルの削除/変更

検索フィールドの一部である最初の要素は検索ラベルです。 これは、フィールドを使用してWebサイトで何でも検索できることを人々に説明するために表示されるテキストです。 ただし、このラベルは必要ありません。 今日では、検索フィールドがどのように機能するかは誰もが知っています。 'display：none;'を追加することで、いつでも検索ラベルを非表示にすることができます。 そのラベルのCSSに。 または、ラベルの外観を変更することもできます。

検索ラベルを変更するために必要なクラスは「.screen-reader-text」です。 以下の例に示すように、表示を無効にすることができます。

.screen-reader-text {
display: none;
}

検索入力のスタイルを設定する

次にスタイルを設定したいのは検索入力です。 この入力を調整するには、すべてのCSSコード行を次の角かっこで囲みます。

 input#s
{

}

ボタン入力のスタイルを設定する

そして最後に、ボタンスタイルもあります。 検索フィールドのこの部分に変更を加えるには、CSSコード行を次の角かっこで囲みます。

input#searchsubmit
{
}

この例に必要なCSSコード

PHPの変更を行った後、 WordPressダッシュボード> Divi>テーマオプション>一般>に移動し、CSSコードの次の行を[カスタム]フィールドに追加することで、上記の結果をすぐに実現できます。

.screen-reader-text {
display: none;
}

input#s {
border-radius: 5px;
}

input#searchsubmit {
border: 1px solid #000000;
color: #FFFFFF;
background-color: #000000;
border-radius: 5px;
}

form#searchform {
float: right;
}
@media screen and (min-width: 480px) {
#top-header .container {
padding-bottom: 5px;
}

#et-secondary-menu .et-social-icons {
margin-top: 6px;
}}

結果

すべての手順を完了したので、ヘッダーがどのように表示されるかをもう一度見てみましょう。

最終的な考え

このチュートリアルでは、セカンダリメニューに検索フィールドを追加する方法を示しました。 さらに、その検索フィールド内の要素を変更する方法を示し、自分で使用するためにコピーして貼り付けることができるCSSコード行の例を示しました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

Dライン/shutterstock.comによる注目の画像