#4-6. 검색 결과 템플릿 만들기
IMPREZA 테마로 카카오 블로그 따라 만들기
헤더에 있는 검색 폼에 찾는 키워드를 넣고 검색을 하면 사이트에 있는 콘텐츠들 중 해당 키워드가 제목이나 내용에 있는 것들이 검색되어서 나오게 됩니다. 기본적인 원리는 '도메인/?s=키워드'이런 주소로 동작을 하게 되는 것인데요, 검색된 결과들은 지난번 나왔던 워드프레스의 템플릿 우선순위에 따라 화면이 표시되게 됩니다. 그래서 대부분의 테마 파일에는 검색 화면을 위해 search.php 파일이 존재하게 됩니다.
Impreza 테마의 경우 이 결과 화면을 위한 페이지도 따로 만들 수 있게 돼 있습니다. 목록 템플릿들을 만들어 연결하는 방식과 거의 같고, 다만 여기는 콘텐츠 템플릿이 아니라 페이지 중 하나를 지정할 수 있게 돼 있습니다. 해당 페이지에는 이 주소에 해당하는 결과를 가져올 수 있도록 현재의 쿼리에 해당하는 'Grid 요소'가 존재하면 됩니다. 이때 검색 결과에는 페이지는 제외시킬 수 있습니다. (pre_get_posts을 이용해서 지난번 목록에서 특정 카테고리를 빼는 것과 같은 동작 )
구조가 거의 같으므로 태그 글 목록 화면을 위한 콘텐츠 템플릿을 기본으로 편집을 하면 되겠습니다. 그런데 페이지 형태로 화면을 구성해야 하므로 바로 'Duplicate'가 안 되겠지요. 이때에는 페이지 빌더 편집 내용 전체를 템플릿으로 저장해 주는 방법이 있습니다. 태그 콘텐츠 템플릿 편집 내용을 전체 저장하고 > Search 페이지 편집 시 클릭해서 그대로 붙여넣기를 하면 되겠습니다.
검색어 키워드를 넣고 검색을 시도해 봅니다. 그런데 'Post Title' 화면 요소로 자동으로 표시되는 제목이 원하는 대로 나오질 않네요.
이걸 수정하려면 몇 가지 방법이 있습니다.
- 테마의 템플릿 파일들 중에서 Post Title에 해당하는 템플릿 파일을 수정
- 쇼트코드를 하나 만들어서 단순 검색 키워드만 표시
- 번역 수정
쇼트코드라는 것은 '[ ]' 중괄호로 감싸진 형태입니다. 자식 테마에 간단한 코드를 적어서 만들 수 있고, 이걸 페이지 중 원하는 곳에 넣으면 화면이 만들어질 때 연결된 함수를 통해 해석되어 표시됩니다.
"키워드" 검색결과 << 이 부분은 번역이 되어 나온 텍스트입니다. 설정 > 일반에서 '사이트 언어'로 설정한 것에 따라 해당 국가의 언어로 번역된 파일을 통해 텍스트가 표시된 것인데요, 이 번역문을 수정해서 검색 키워드만 나오게 해도 됩니다. 이럴 때 사용하는 어드민 내에서 번역문들을 검색하고 수정할 수 있는 유용한 플러그인이 있습니다. > https://wordpress.org/plugins/loco-translate/
%s 부분이 자동으로 키워드를 가져오는 부분입니다. 여기만 남기고 나머지는 지워주면 간단히 해결이 됩니다. (단, 번역 자동 업데이트가 돼 있는 경우 수정한 게 나중에 덮어쓰기가 될 수 있으니 번역 자동 업데이트 같은 건 꺼둬야 할 수 있습니다)
이렇게 하고 검색을 해 보면 결과가 원하는 대로 나오는 걸 볼 수 있습니다.
참고 사이트 : https://oks-dev.tk/techblog/
(!! 해외에 있는 테스트용 호스팅이라 느릴 수 있습니다. 이건 워드프레스나 테마의 문제가 아님을 참고해 주세요)
콘텐츠를 활용하는 구조는 완료가 된 듯합니다. 남은 건 잔여 페이지 제작, 모바일 화면 점검, 이슈에 대한 처리, 프로세스 테스트 등이 있겠네요.
워드프레스의 CMS로서의 구조나 체계를 잘 활용하면 블로그를 운영하는 데 있어 많은 장점이 있을 듯합니다. 이미 콘텐츠를 분류를 할 수 있는 다양한 방법이 있으니까요. 여기에 테마를 잘 활용하면 원하는 디자인에 맞게 콘텐츠들을 보일 수 있게 됩니다.
블로그 형태 워드프레스 사이트 만들기
끝.
