brunch

매거진 IMPREZA 테마 활용

라이킷 12 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari May 20. 2024

게시글들만 검색하는 폼 추가하기

워드프레스 & 게시판 #4

이전에 워드프레스의 기본 포스트 타입을 이용한 게시판 운영에 대한 얘기까지 정리를 해 봤었습니다.

https://brunch.co.kr/@oksambari/118

글을 작성하는 방법과 보통의 게시판처럼 보이는 부분까지 구성을 했다면, 여기에 검색 기능까지 들어가면 더 좋겠지요. 워드프레스의 개발 방식들을 활용해서 콘텐츠들이 작성이 됐기 때문에 검색 또한 워드프레스의 활용 방법을 이용해서 추가를 할 수 있겠습니다.

게시판 관련 마지막 글이 될 수 있겠는데요, 이번엔 게시판 형태의 글들만 검색을 하는 기능을 추가하는 방법에 대해 정리해 보겠습니다.

1. 공지사항 카테고리만 검색할 수 있는 방법 확인

먼저, 워드프레스는 데이터베이스에 저장된 사이트의 콘텐츠들을 검색해서 보여주는 방법을 기본적으로 가지고 있습니다.

만약 워드프레스 사이트이고, 헤더나 UI상 사이드바 쪽에 검색 폼이 있다면 키워드나 문장을 입력 후 엔터를 누르거나 또는 검색 버튼을 클릭해 보세요.

그러면, 결과를 보여주는 페이지로 이동하여 검색 폼에 입력된 내용을 토대로 검색 결과를 보여주게 됩니다. 이때 워드프레스는 제목과 콘텐츠 본문(편집 화면 중 내용을 작성한 부분), 요약글에서 입력한 내용과 일치하는 검색 결과를 찾아줍니다. (※ 테마에서 준비해 놓은 디자인대로 표시가 됨) 따로 제한을 두지 않았다면 워드프레스 사이트의 모든 포스트 타입에 대해 검색하게 됩니다.

이때 브라우저의 url을 보면, 아래와 같이 도메인 주소 끝에 '/?s=xxx'이라는 내용이 추가된 걸 볼 수 있습니다.

그럼 주소만 저렇게 입력하면 검색이 되는 것인가? 네 맞습니다.

만약 사이트에 검색 폼이 없다 하면, 직접 주소를 입력해도 결과가 나올 겁니다. (별도로 막는 조치를 하지 않았다면)

> https://oks-dev.tk/wpcomponent/?s=%E2%98%85

> https://oks-dev.tk/wpcomponent/search/%E2%98%85

(※ 아래 것은 검색 결과 표시로 미리 약속된 주소. 쿼리 스트링 없이 검색)

워드프레스도 php 기반이기 때문에 이런 쿼리 스트링을 사용할 수 있는 것인데, 그중에 's='이라는 게 검색과 관련되어 약속이 돼 있습니다. (https://codex.wordpress.org/WordPress_Query_Vars)

그럼 이 쿼리 스트링은 도메인 바로 뒤에서만 쓰일 수 있느냐? 아닙니다.

이 쿼리 스트링을 카테고리 주소나 다른 목록 주소에서도 사용할 수 있습니다. 워드프레스는 체계적인 주소 체계를 가지고 있습니다.(설정 > 고유주소에서 지정 가능) 주소를 입력하면 해당 주소에 맞는 php 템플릿 파일이 열리면서 관련된 데이터들을 불러다 보여줄 수 있게 됩니다.

공지사항 글들이 표시되는 'notice'라는 슬러그를 가진 카테고리 목록이 표시되는 주소와 쿼리 스트링을 결합해 보겠습니다.

> https://oks-dev.tk/wpcomponent/category/notice/?s=%E2%98%85

그러면, 주소상 카테고리의 글 목록이 나오는 주소인데, 모든 글들이 표시되는 게 아니라 검색어와 일치하는 글 리스트만 표시가 되는 걸 볼 수 있습니다.

즉, 주소에 의해 notice 카테고리 전체 글이 불러와질 때, 그 글들 중에서 검색어 검색까지 이뤄진다. 이렇게 이해를 하면 될 거 같습니다.

2. 카테고리 글만 검색할 수 있는 폼 만들기

이제 원하는 주소로 이동하여 검색 결과를 볼 수 있는 폼(form)만 만들면 되겠습니다. 검색 폼은 워드프레스의 모든 위젯에 기본적으로 포함돼 있습니다. 테마에 따라 헤더나 푸터 등 다른 곳에도 검색 기능을 넣을 수 있게 제작이 돼 있는 경우도 있고요. 최근에는 페이지 빌더들이 발전이 되면서 거의 모든 빌더에서 검색 폼을 원하는 곳에 넣을 수 있게 빌더 요소로 만들어져 있습니다.

간단하게 페이지 내에 검색 폼이 추가됐습니다. html 코드로 <form>으로 시작하여 </form>으로 끝나는 것이 폼의 기본 구조인데 기능을 간략히 설명하면, input 입력 필드에 의해 입력된 키워드는 name에 적힌 쿼리 스트링 's'와 조합이 돼서 form 태그에 적힌 action이 일어나는 주소로 이동하면서 get 방식으로 결과를 달라는 동작을 한다입니다.

이 상태로 검색을 시도하게 되면 어떻게 될까요? 폼은 공지사항 화면에 있지만, 결과는 '도메인/?s=xxx'로 이동을 해서 보이게 됩니다.

action이 일어나는 주소를 바꿔서 페이지에 추가를 할 수만 있다면 문제는 해결될 거 같습니다.

form html 구조를 표시하는 쇼트코드를 만들어서 페이지에 추가하는 방법을 이용.

이때 html을 처음부터 하나씩 만들 필요 없이, 이미 테마 개발자가 검색 폼을 디자인대로 표시하기 위해 만들어 놓은 구조를 이용하면 편리합니다. 빌더 요소를 추가했을 때 표시되는 html 태그 구조를 복사하여, 쇼트코드를 만들 때 일부만 바꿔서 활용했습니다. 쇼트코드는 functions.php를 이용해서 등록했습니다.

action 주소를 현재 열린 카테고리 목록의 주소로 알아서 바뀔 수 있도록 변수로 등록을 했습니다. (※ 폼이 한 곳에서만 쓰인다면 직접 url 주소를 입력해도 됩니다.) value는 처음에는 공란이었다가 만약 검색 결과를 보여주는 상황이라면 입력됐던 키워드를 다시 보여주기 위해 워드프레스가 제공하는 get_search_query 함수(※ 현주소에 있는 검색 키워드 리턴)를 사용했습니다.

function custom_display_search_form() {
  $category_obj = get_queried_object();
  $category_url = esc_url( get_category_link( $category_obj->cat_ID ) );
  // Impreza search form HTML 이용
  $search_form = '<div class="w-search layout_simple"><div class="w-search-form"><form class="w-form-row for_text" role="search" action="'.$category_url.'" method="get"><div class="w-form-row-field"><input type="text" name="s" placeholder="검색" aria-label="검색" value="'.get_search_query().'"></div><button class="w-search-form-btn w-btn" type="submit" aria-label="검색"><i class="far fa-search"></i></button></form></div></div>';
  return $search_form;
}
add_shortcode('display_search_form', 'custom_display_search_form');

이제 페이지에 '[display_search_form]'이라는 쇼트코드를 원하는 곳에 적어주겠습니다.