WordPress 메뉴에서 검색 창을 추가하는 방법

게시 됨: 2023-08-17

웹 사이트에서 콘텐츠를 검색하는 것은 보물 찾기가 되어서는 안 됩니다. 끝없는 클릭과 스크롤 없이 독자가 찾고 있는 것을 정확하게 보여주는 검색 표시줄을 상상해 보십시오.

사이트를 거대한 정보 허브로 생각하면 방문자는 원하는 것을 빠르게 찾을 수 있는 방법이 필요합니다. 여기에서 검색 표시줄이 나타납니다. 기본 제공 옵션 중에서 선택하거나 플러그인을 사용하여 사용자 정의할 수 있습니다.

WordPress에 검색창을 추가하는 것은 쉽습니다. 차근차근 보여드리겠습니다. 웹 사이트의 유용성을 향상하고 방문자가 필요한 것을 찾을 수 있도록 저희와 함께하십시오.

사이트를 보다 사용자 친화적으로 만들 준비가 되셨습니까? 워드프레스 메뉴에 검색창을 추가하는 방법을 보여드리겠습니다.

내용 숨기기
1 WordPress에 검색 창을 추가하는 방법
1.1 플러그인 없이 워드프레스 메뉴에 검색창 추가하기
1.1.1 1단계: 헤더 빌더로 테마 가져오기
1.1.2 2단계: 테마 사용자 지정 프로그램으로 이동
1.1.3 3단계: WordPress 메뉴에 검색 추가
1.1.4 검색 요소 사용자 정의
1.2 WordPress 검색창 플러그인으로 검색창 추가하기
1.2.1 1단계: PostX 설치 및 활성화
1.2.2 2단계: 저장된 템플릿 애드온 활성화
1.2.3 3단계: 저장된 템플릿에 검색 블록 추가
1.2.4 4단계: 쇼트코드 복사
1.2.5 5단계: WordPress 메뉴에 검색 표시줄 추가
1.2.6 6단계: 게시 후 사용자 정의
당신이 좋아할 2 가지 리소스
3 마무리

WordPress에 검색 창을 추가하는 방법

WordPress는 기본 검색 위젯을 제공하며 플러그인은 이 기능을 더욱 향상시킬 수 있습니다. 두 가지 방법에 대한 단계별 지침과 시각적 자료를 제공합니다.

플러그인 없이 워드프레스 메뉴에 검색창 추가하기

구글에서 " 플러그인 없이 워드프레스 메뉴에 검색창 추가하는 방법 "을 검색하면 많은 글이 나옵니다. 그러나 그들 모두는 메뉴에 검색 표시줄을 추가한다고 주장할 것입니다. 그러나 WordPress의 기본 위젯 섹션을 사용하여 사이드바에 검색 표시줄을 추가하는 방법에 대한 자습서 또는 가이드를 찾을 수 있습니다.

그러나 나는 당신의 등을 가지고 있습니다!

헤더 빌더와 함께 테마를 사용하면 WordPress 메뉴에 검색 표시줄을 쉽게 추가할 수 있습니다. 이 튜토리얼에서는 제가 가장 좋아하는 테마 중 하나인 "Blocksy" 테마를 사용하겠습니다. WordPress Themes 섹션에서 무료로 얻을 수 있습니다.

1단계: 헤더 빌더로 테마 가져오기

WordPress 대시보드 > 테마 로 이동합니다. 그런 다음 " 새 항목 추가 "를 클릭합니다.

" 테마 업로드 " 버튼을 클릭하여 나만의 테마를 업로드할 수 있습니다. 또는 무료 테마 모음을 검색할 수 있습니다.

Activate Blocksy Theme
Blocksy 테마 활성화

헤더 빌더 옵션을 사용하여 " Blocksy " 또는 기타 테마를 검색합니다. 그런 다음 설치하고 활성화하십시오. 내 Blocksy 테마는 앞서 언급한 것처럼 계속 사용하면서 이미 활성화되어 있습니다.

2단계: 테마 사용자 지정 프로그램으로 이동

이제 활성화된 테마에서 " 사용자 지정 "을 클릭합니다.

Blocksy Theme Customizer
Blocksy 테마 커스터마이저

또는 WordPress 대시보드 > 모양 > 사용자 지정 으로 이동할 수 있습니다.

이제 몇 가지 사용자 지정 옵션이 표시됩니다. 그러나 메뉴/메뉴바는 워드프레스의 헤더 섹션이기 때문에 " 헤더 "를 선택해야 합니다.

3단계: WordPress 메뉴에 검색 추가

이 섹션에는 Top, Main 및 Bottom의 3개 행이 표시됩니다. 메인 행을 사용하여 메뉴 범주에 더 잘 맞추는 것이 좋습니다.

Add Search to WordPress Menu
WordPress 메뉴에 검색 추가

이제 검색 요소를 기본 행 으로 끌어다 놓습니다 . 메뉴에 검색 아이콘이 추가된 것을 볼 수 있습니다.

이제 " 게시 "를 클릭하여 WordPress 메뉴에 검색 표시줄을 성공적으로 추가합니다.

검색 요소 사용자 지정

추가된 검색 요소를 클릭하면 기본 사용자 지정 옵션이 표시됩니다.

Search Element Customization
검색 요소 사용자 지정

여기에는 다음이 포함됩니다.

  • 아이콘 크기
  • 레이블 가시성
  • 라벨 위치
  • 라벨 텍스트
  • 기본 색상 관련 설정

사용자 지정하고 게시를 눌러 게시할 수 있습니다.

Publish Search Bar Without Plugin
플러그인 없이 검색창 게시

이제 웹사이트 메뉴에서 검색 표시줄의 프런트엔드 보기를 살펴보겠습니다.

Add Search Bar to WordPress Menu Without Plugin
플러그인 없이 워드프레스 메뉴에 검색창 추가하기

홈페이지 레이아웃 에 놀랐습니까? 이것은 PostX Dynamic Site Builder만들어졌습니다 . 꼭 확인해보세요!

동적 사이트 빌더

WordPress 검색창 플러그인으로 검색창 추가

이제 메뉴 표시줄에 맞춤 검색 표시줄을 추가하는 가장 빠른 방법을 원하십니까? PostX가 있다면. PostX의 고급 검색 블록을 사용하면 WordPress 메뉴에 완전히 사용자 지정된 검색 표시줄을 추가할 수 있습니다.

PostX로 추가하려면 다음의 간단한 단계를 따르십시오.

1단계: PostX 설치 및 활성화

WordPress 메뉴에 사용자 정의 가능한 검색 표시줄을 추가하려면 PostX 플러그인을 설치하고 활성화 해야 합니다.

Installing PostX
PostX 설치

PostX를 설치 및 활성화하려면 Plugins > Add New 로 이동하여 PostX를 검색하고 설치 프로세스를 완료하십시오.

플러그인이 활성화되면 저장된 템플릿 및 검색 블록을 사용하여 WordPress 메뉴에 검색을 추가할 수 있습니다.

2단계: 저장된 템플릿 애드온 활성화

이제 Saved Template 애드온을 활성화해야 합니다.

Saved Templates Addon Enabled
저장된 템플릿 애드온 활성화됨

PostX > 애드온으로 이동합니다. 그런 다음 토글 막대를 사용하여 저장된 템플릿 애드온을 활성화합니다.

PostX 저장된 템플릿은 웹사이트 헤더에 검색 표시줄을 추가하는 데 사용할 수 있는 단축 코드를 생성합니다.

3단계: 저장된 템플릿에 검색 블록 추가

메뉴에서 막대를 검색하려면 PostX로 저장된 템플릿을 만들어야 합니다.

PostX > 저장된 템플릿 으로 이동하고 " 새 템플릿 추가 "를 클릭하여 새 템플릿을 만듭니다. 나중에 사용자 정의하려면 이름을 지정하는 것을 잊지 마십시오.

Create New PostX Saved Template
새 PostX 저장된 템플릿 만들기

그런 다음 페이지에 PostX 검색 블록을 추가합니다 .

Add Search Block in Saved Template
저장된 템플릿에 검색 블록 추가

원하는 방식으로 사용자 정의할 수 있습니다. 번거로운 사용자 지정을 피하기 위해 " 사전 정의된 패턴 " 버튼을 클릭하여 미리 만들어진 템플릿을 한 번 클릭으로 가져올 수 있습니다.

PostX Search Customization Options
PostX 검색 사용자 지정 옵션

사용자 정의를 완료한 후 " 게시 "를 클릭하면 저장된 템플릿이 준비됩니다.

4단계: 단축 코드 복사

단축 코드를 복사하려면 저장된 템플릿 페이지( PostX > 저장된 템플릿 )로 돌아갑니다.

Copy Shortcode for Search Template
검색 템플릿용 단축 코드 복사

방금 만든 템플릿에 대한 단축 코드를 찾을 수 있습니다. 그것을 클릭하여 복사 하고 다음 단계를 따르십시오.

5단계: WordPress 메뉴에 검색 표시줄 추가

이제 WordPress 대시보드 > 모양 > 사용자 지정 으로 이동합니다. 기본 검색 표시줄을 추가하는 동안 보여드린 것과 같습니다.

Blocksy Theme Customizer
Blocksy 테마 커스터마이저

이제 HTML 요소를 기본 행으로 끌어다 놓습니다. 추가한 후 클릭합니다 .

Add HTML Element in Main Row
기본 행에 HTML 요소 추가

HTML 편집 섹션텍스트 입력란이 표시됩니다. 텍스트 상자복사한 단축 코드를 붙여넣기 만 하면 됩니다. WordPress 메뉴 섹션에 저장된 템플릿에서 생성한 검색 표시줄이 표시됩니다.

Paste Copied Shortcode for Search Template
검색 템플릿에 복사한 단축 코드 붙여넣기

이제 게시를 눌러 게시하세요.

PostX를 사용하여 워드프레스 메뉴에 검색창을 추가한 후 전면 보기를 봅시다.

Add Search Bar With a WordPress Search Bar Plugin
WordPress 검색창 플러그인으로 검색창 추가

6단계: 게시 후 사용자 지정

PostX의 저장된 템플릿에는 놀라운 비밀이 있습니다. 라이브 페이지에서 자동 동기화됩니다. 저장된 템플릿(검색 블록으로 구성됨)을 사용자 지정하고 업데이트한다고 가정합니다. 이 경우 변경 사항이 자동으로 동기화되므로 모든 단계를 반복해서 수행할 필요가 없습니다.

PostX 고급 검색 블록을 사용하면 다음과 같은 사용자 지정 옵션을 사용할 수 있습니다.

  • AJAX 검색 인에이블러
  • 양식 스타일 설정 검색
  • 검색 팝업 활성화
  • 검색 버튼 설정
  • 검색 결과 설정
  • 더 많은 결과 설정
  • 텍스트, 타이포그래피 및 색상 설정
  • 여백/패딩 및 정렬 설정
    그리고 더…

너무 적다고 생각하시나요? 검색 버튼 블록에 대한 광범위한 문서를 놓치지 마십시오. 검색 블록에서 세부 정보를 사용자 정의할 수 있는 핵심 정보에 놀라게 될 것입니다.

블록 문서 검색

아, 버튼인가요? PostX에도 맞춤형 버튼 블록이 있다는 것을 알고 계십니까? 아니요? PostX 버튼 그룹 블록을 확인 하십시오.

당신이 사랑할 자료

다음은 PostX 기능을 확인하는 데 도움이 될 몇 가지 기사입니다.

  • WordPress 사용자 지정 글꼴을 추가하는 방법: 타이포그래피를 완전히 제어
  • PostX 고급 목록 블록으로 WordPress 글머리 기호를 만드는 방법
  • PostX ChatGPT 애드온 소개: WordPress AI 콘텐츠 생성기
  • PostX Dynamic Site Builder: 클릭 몇 번으로 사이트 구축
  • PostX를 사용하여 WordPress 비디오를 주요 이미지로 표시하는 방법

마무리

이 포괄적인 가이드는 플러그인을 사용하거나 사용하지 않고 WordPress 메뉴에 검색 표시줄을 추가하는 단계별 로드맵을 제공했습니다. 헤더 빌더와 함께 테마를 사용하는 것부터 PostX의 고급 검색 블록 세계를 탐색하는 것까지 옵션이 광범위하고 액세스 가능합니다. 번거로움 없이 언제든지 만들고, 사용자 지정하고, 선별하세요!

YouTube 채널에서 WordPress 비디오 자습서를 확인할 수 있습니다. 또한 정기적인 업데이트를 위해 Facebook과 Twitter에서 우리를 찾으십시오!

이 기사처럼? 널리 알리다
  • WooCommerce Related Products

    WooCommerce 관련 제품의 3가지 유형

  • How to Display Custom Taxonomy in Gutenberg Editor Perfectly 1

    구텐베르크 편집기에서 사용자 정의 분류를 완벽하게 표시하는 방법

  • Introducing Taxonomy Blocks for Creating Custom Taxonomy List and Grid for Gutenberg 2

    Gutenberg용 사용자 정의 분류 목록 및 그리드 생성을 위한 분류 블록 소개

  • How to Display and Customize WooCommerce On Sale Products

    판매 중인 WooCommerce 제품을 표시하고 사용자 정의하는 방법