Divi의 보조 메뉴에 검색 필드를 추가하는 방법

오늘의 Divi 튜토리얼에서는 보조 메뉴에 검색 필드를 추가하는 방법을 보여드리겠습니다. 보조 메뉴는 페이지의 헤더로 알려져 있으며 웹사이트나 회사에 대한 실용적인 정보를 담고자 하는 곳입니다. 검색 필드를 추가하는 것은 클라이언트로부터 받은 요청이거나 자신의 웹사이트에 대한 요구일 수 있습니다. 어느 쪽이든 Divi 테마를 사용할 때 이 검색 필드를 보조 탐색에 쉽게 통합하는 방법을 보여 드리겠습니다.

결과

다양한 단계를 살펴보기 전에 거기에 도달하기 위해 취해야 할 단계가 있습니다. 결과를 미리 보여주는 것이 흥미로울 수 있습니다. 게시물의 단계에 따라 CSS 모양 변경 사항을 추가하면 기본 보조 메뉴에서 다음과 같은 결과를 얻을 수 있습니다.

보조 메뉴에 검색 필드를 추가하는 이유

보조 메뉴에 검색 가능성을 추가하는 것은 시도했을 수 있는 작업 중 하나입니다. 그러나 기본 메뉴와 달리 헤더에는 웹사이트의 header.php 파일에 PHP 코드 라인을 추가하지 않고도 수동으로 항목을 추가하는 데 도움이 되는 WordPress 내 별도의 페이지가 없습니다.

그러나 보조 메뉴에 검색 가능성을 추가하는 것은 흥미로운 일이 될 수 있습니다. 추가하려는 이유에 대해 살펴보겠습니다.

방문자에게 처음부터 검색 가능성 제공

귀하의 웹 사이트에는 모든 종류의 방문자가 있습니다. 그들 중 일부는 무언가를 탐색하고 시간을 들이고자 하는 반면, 다른 일부는 특정 정보를 즉시 찾기를 원합니다. 보조 메뉴에 검색 필드를 추가하면 특정 항목을 찾는 방문자가 즉시 검색할 수 있습니다. 2차 메뉴가 페이지 상단에 있기 때문에 바쁜 방문자는 사용자 경험을 개선하기 위한 노력을 높이 평가할 것입니다.

검색 필드에서 기본 메뉴를 저장하려면

물론, 당신이 할 수 있는 또 다른 일은 기본 메뉴에 검색 필드를 추가하는 것입니다. 그러나 어떤 경우에는 그렇게 하고 싶지 않을 수도 있습니다. 예를 들어; 메뉴 항목에 계속 초점을 맞추고 싶거나 메뉴 항목을 검색 필드와 혼합하고 싶지 않은 경우. 또 다른 이유는 기본 메뉴를 바쁘게 보이게 하는 꽤 많은 메뉴 항목이 있고 그 위에 검색 필드를 추가하고 싶지 않기 때문일 수 있습니다.

화려한 기본 메뉴 없이 검색 필드 강조

대부분의 사람들은 기본 메뉴를 냉정하게 유지하고 보조 메뉴를 팝하게 만드는 경향이 있습니다. 우선 두 메뉴의 분명한 차이점을 보여주고 싶었기 때문입니다. 그리고 보조 메뉴에는 종종 강조하고 싶은 것들이 있기 때문입니다(예: 소셜 미디어 아이콘). 보조 메뉴 내에서 검색 필드를 통합하기로 결정하면 자동으로 강조 표시되어 방문자가 검색하고 원하는 것을 정확하게 찾도록 자극합니다.

Divi의 보조 메뉴에 검색 필드를 추가하는 방법

YouTube 채널 구독

헤더 PHP 파일에 검색 필드 추가

이제 아래 이미지와 같이 실제로 헤더에 검색 필드를 추가하려면 웹사이트의 header.php 파일에 무엇인가를 추가해야 합니다. 필요한 코드 라인은 다음과 같습니다.

<?php get_search_form(); ?>

계속해서 이 PHP 코드 라인을 복사하고 WordPress 대시보드로 이동하십시오. WordPress 대시보드 내 에서 모양 > 편집기 > header.php로 이동합니다.

이제 검색 표시줄을 표시할 위치에 코드 줄을 배치할 수 있습니다. 소셜 미디어 아이콘 바로 옆에 표시되기를 원하기 때문에 코드에서 정확히 어디에 배치해야 하는지 보여드리겠습니다. 보조 메뉴, 컨테이너 및 상단 헤더가 닫히기 직전에 배치해야 합니다.

검색 필드 스타일 지정

기본적으로 검색 필드는 약간 오래된 것처럼 보입니다. 원하는 대로 보이게 하고 나머지 웹사이트의 모양과 느낌에 맞도록 몇 가지를 변경하고 싶을 것입니다. 변경하고 싶은 세 가지는 검색 레이블, 검색 입력 및 버튼 입력입니다.

검색 필드에 CSS를 수정하지 않으면 기본적으로 보조 메뉴에 다음과 같이 표시됩니다.

이것은 분명히 우리가 달성하고자 하는 최종 결과가 아닙니다. 운 좋게도 원하는 만큼 필드를 수정할 수 있습니다. 이 게시물의 다음 부분에서는 검색 필드의 모든 요소를 ​​수정하는 방법을 보여주고 다음 결과를 얻기 위해 CSS 코드 라인도 공유합니다.

검색 레이블 제거/수정

검색 필드의 일부인 첫 번째 요소는 검색 레이블입니다. 이것은 사람들에게 필드를 사용하여 웹사이트에서 무엇이든 검색할 수 있음을 설명하는 텍스트입니다. 그러나 이 레이블은 필요하지 않습니다. 오늘날에는 검색 필드가 어떻게 작동하는지 모두 알고 있습니다. 언제든지 '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 Line / Shutterstock.com의 추천 이미지