WordPress 검색 결과 페이지를 사용자 정의하는 방법
게시 됨: 2022-09-29
WordPress 검색 결과 페이지를 사용자 정의하시겠습니까? 기본 WordPress 검색 엔진은 기본적으로 잘 작동합니다. 그러나 사용자가 사이트에 없는 용어를 검색하면 빈 화면이 표시될 수 있습니다.
이것은 비전문적으로 보일 수 있으며 사용자가 다른 곳에서 검색하도록 결정할 수 있습니다.
또한 전용 검색 페이지가 있으면 사이트 사용자가 쉽게 검색을 시작하고 더 풍부한 결과를 볼 수 있습니다. 이러한 이유로 최대 성능을 위해 검색 결과 페이지를 최적화해야 합니다.
이 가이드는 워드프레스에서 검색 결과 페이지가 무엇을 의미하는지 설명합니다. 그런 다음 WordPress에서 검색 결과 페이지를 사용자 지정하는 방법에 대한 팁을 공유합니다.
콘텐츠:
- WordPress 검색 결과 페이지 정보
- 검색 결과 페이지를 사용자 정의해야 하는 이유
- WordPress에서 검색 결과 페이지를 만드는 방법은 무엇입니까?
- 블록 편집기 사용
- 수동으로 검색 결과 페이지 생성
- WordPress 검색 결과 페이지 사용자 정의
- WordPress 검색 플러그인 사용
- WordPress 전체 사이트 편집 사용
- 검색 양식 위젯 추가
- 결론
WordPress 검색 결과 페이지 정보
잠재고객이 웹사이트에서 검색 기능을 사용하면 WordPress는 새 페이지에 관련 결과를 나열합니다. 이 페이지를 검색 결과 페이지라고 합니다.
WordPress 검색은 Google 검색 결과와 매우 유사하지만 웹사이트의 결과만 표시합니다. Google과 같은 기존 검색 엔진은 모든 웹사이트의 결과를 표시합니다.
내부 검색 결과 페이지는 텍스트 기반 콘텐츠를 표시하고 검색 엔진에서 유기적인 트래픽을 수신하는 웹사이트에 필수적입니다.
일반적으로 사용자가 웹사이트를 우연히 발견하면 다음 두 가지 중 하나가 발생할 수 있습니다.
- 원하는 것을 바로 찾거나 검색 양식을 사용하여 필요한 것을 찾습니다.
- 그들이 무엇을 위해 왔는지 찾을 수 없다면 결국 귀하의 웹 사이트를 떠납니다.
검색 및 결과 보기 전용 페이지는 사용자를 사이트에 더 오래 머물게 하는 좋은 방법입니다.
검색 결과 페이지를 사용자 지정해야 하는 이유
방문자는 웹사이트를 검색할 때 검색어에 대한 관련성 높은 결과를 기대합니다. 그들이 찾고 있는 용어가 귀하의 웹사이트에 존재하지 않더라도 관련 결과를 표시하는 것이 좋습니다. 빈 페이지를 표시하는 것보다 훨씬 낫습니다.
사용자 정의된 검색 결과 페이지가 있으면 웹사이트에서 사용자 참여를 높일 수 있습니다. 귀하의 콘텐츠에 쉽게 액세스할 수 있기 때문입니다.
올바르게 완료되면 검색 결과 페이지에서 사용자 쿼리가 절대 나오지 않도록 합니다. 이렇게 하면 사용자가 웹사이트에서 더 많은 시간을 보내게 됩니다.
웹사이트에서 더 많은 시간을 보내면 이탈률이 줄어듭니다. 따라서 검색 결과 페이지를 최적화하면 검색 엔진에서 웹사이트의 순위를 높일 수 있습니다.
가장 중요한 것은 검색 결과 페이지를 통해 웹사이트에서 콘텐츠를 쉽게 찾을 수 있다는 것입니다. 이것은 수천 개의 블로그 게시물이 있는 대규모 블로그 사이트에 유용합니다. 사용자가 특정 항목을 찾을 때 웹사이트의 모든 페이지를 탐색하는 것은 매우 지루할 것입니다.
검색에서 많은 결과가 반환되는 경우 서버 리소스를 사용하지 않도록 사용자 지정하고 페이지 매김을 추가할 수도 있습니다.
WordPress에서 검색 결과 페이지를 어떻게 만듭니 까?
구텐베르크 블록 편집기를 사용하여 WordPress에서 검색 페이지를 쉽게 만들 수 있습니다. 그러나 블록 편집기를 사용하지 않는 경우 검색 템플릿을 생성하여 수동으로 검색 페이지를 생성할 수 있습니다. 이 섹션에서는 두 가지 방법을 모두 설명합니다.
블록 편집기를 사용하여 검색 페이지 만들기
시작하려면 관리자 패널에 로그인한 다음 페이지 >> 새로 추가 로 이동하여 새 페이지를 만듭니다.
다음으로 페이지의 제목을 입력합니다. 페이지 편집기에서 블록 추가(더하기) 아이콘을 클릭하고 텍스트 상자에 "검색"을 입력합니다. 목록에서 검색 블록을 선택합니다.
이렇게 하면 편집 중인 페이지에 검색 양식이 추가됩니다. 페이지에 다른 콘텐츠를 추가하거나 단순히 게시/업데이트 를 눌러 변경 사항을 저장할 수 있습니다.
사용자가 이 페이지에 액세스하면 특정 콘텐츠를 찾는 데 사용할 수 있는 검색 양식이 표시됩니다.
블록 편집기를 사용하여 검색 페이지에 다른 요소를 추가할 수 있습니다. 이렇게 하면 페이지를 쉽게 사용자 지정할 수 있습니다. 기술 경험이 없는 초보자에게도 적합합니다.
수동으로 검색 결과 페이지 생성
클래식 편집기를 사용하는 경우 사용자 지정 검색 템플릿을 만들어 수동으로 검색 페이지를 만들 수 있습니다. 그런 다음 웹사이트의 페이지에서 템플릿을 사용합니다. 이 가이드의 단계를 안내해 드립니다.
먼저, 관련된 단계 중 일부는 약간 기술적인 것임을 명심하십시오. 전문가에게 도움을 받는 것을 고려해야 합니다.
하지만 자신이 있다면 계속 진행합시다.
시작하기 전에 사이트를 백업해야 합니다. 백업 생성에 대한 도움말은 가이드를 참조하십시오.
대부분의 WordPress 테마는 search.php 템플릿과 함께 제공됩니다. 이것은 검색 페이지가 아니라 검색 결과를 표시하기 위한 템플릿으로 사용하기 위한 것입니다.
기본 page.php 파일을 기반으로 WordPress에서 검색 페이지를 만들 수 있습니다.
새 페이지 템플릿을 만들려면 서버에서 사이트 파일에 액세스해야 합니다. 이 가이드에서는 FTP를 사용합니다. 이 가이드를 확인하여 FTP 사용 방법을 배울 수 있습니다.
웹사이트를 FileZilla와 같은 FTP 클라이언트에 연결한 후 WordPress 파일이 포함된 디렉터리로 이동해야 합니다. 이것은 일반적으로 public_html 폴더입니다.
이 폴더에는 모든 WordPress 사이트 파일이 표시됩니다.
이제 wp-content 로 이동한 다음 테마 디렉토리로 이동합니다.
활성 WordPress 테마를 찾으면 두 번 클릭하십시오. 여기에서 검색 결과 페이지에 대한 새 파일을 만듭니다. 사용 중인 테마에 따라 search.php 파일이 표시될 수 있습니다.
FTP를 통해 새 검색 페이지 템플릿 만들기
새 템플릿 파일을 만들려면 파일을 마우스 오른쪽 버튼으로 클릭한 다음 새 파일 만들기 를 클릭합니다.
이제 만들고 있는 파일의 이름을 입력합니다. search.php라는 이름은 WordPress에서 예약한 것입니다. 다른 이름을 사용해야 합니다. WordPress는 파일 이름을 searchpage.php로 지정할 것을 권장합니다.
파일을 만든 후에는 페이지 템플릿으로 변환해야 합니다. 이를 위해 새 파일을 마우스 오른쪽 버튼으로 클릭한 다음 보기/편집 을 선택합니다. 파일을 편집하려면 텍스트 편집기를 선택해야 합니다.
텍스트 편집기에서 아래 코드를 복사하여 파일에 붙여넣습니다. 코드는 파일을 템플릿으로 취급하도록 WordPress에 지시합니다.
<?php
/*
Template Name: Custom Search Page
*/
?>템플릿 이름은 웹 사이트의 모든 페이지에서 템플릿을 사용할 때 표시되는 이름입니다. 템플릿 이름으로 아무 이름이나 사용할 수 있습니다.
템플릿을 만든 후 웹 사이트의 머리글, 검색 양식 및 바닥글과 같은 일부 코드로 템플릿을 채워야 합니다. page.php 파일을 시작 템플릿으로 사용할 수 있습니다.
이 템플릿을 사용하려면 WordPress 대시보드에 로그인한 다음 모양 >> 테마 파일 편집기 로 이동합니다. 그런 다음 오른쪽 목록에서 page.php 파일을 클릭합니다.
아래는 Astra 테마의 page.php 파일에서 가져온 샘플 코드입니다. 코드는 WordPress 테마에 따라 다르게 보일 수 있습니다.
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site may use a
* different template.
*
* @link https://codex.WordPress.org/Template_Hierarchy
*
* @package Astra
* @since 1.0.0
*/if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}get_header(); ?><?php if ( astra_page_layout() == 'left-sidebar' ) : ?>
<?php get_sidebar(); ?>
<?php endif ?><div <?php astra_primary_class(); ?>><?php astra_primary_content_top(); ?>
<?php astra_content_page_loop(); ?>
<?php astra_primary_content_bottom(); ?></div><!-- #primary --><?php if ( astra_page_layout() == 'right-sidebar' ) : ?>
<?php get_sidebar(); ?>
<?php endif ?><?php get_footer(); ?>이 템플릿에서 우리는 get_header() 함수의 코드에 관심이 있습니다. 계속해서 get_footer() 함수를 통해 코드를 복사합니다.
코드를 복사한 후 새 searchpage.php 파일에 붙여넣습니다. 코드는 아래 코드와 유사합니다.
<?php
/*
Template Name: Custom Search Page
*/
?><?php get_header(); ?><?php if ( astra_page_layout() == 'left-sidebar' ) : ?><?php get_sidebar(); ?> <?php get_sidebar(); ?> <?php endif ?><div <?php astra_primary_class(); ?>><?php astra_primary_content_top(); ?> <?php astra_primary_content_top(); ?> <?php astra_content_page_loop(); ?> <?php astra_content_page_loop(); ?><?php astra_primary_content_bottom(); ?></div><!-- #primary --><?php if ( astra_page_layout() == 'right-sidebar' ) : ?> <?php get_sidebar(); ?> <?php get_sidebar(); ?><?php endif ?><?php get_footer(); ?>이 코드는 기본적으로 웹사이트의 레이아웃, 즉 머리글, 바닥글 및 사이드바 영역을 표시합니다.
코드에 검색 기능 추가
검색 양식을 기본 콘텐츠 영역에 삽입해야 합니다.
이를 위해 div 태그 사이에 있는 모든 코드를 다음 코드 줄로 바꿉니다.
<h2>Search Our Blog</h2>
<p>Welcome to our tech blog! Here you will find all kinds of reviews of the best tech gadgets.</p>
<p>Use the search form below to browse our vast collection of content.</p><?php get_search_form(); ?>사용 중인 테마와 상관없이 웹사이트에서 사용할 수 있는 샘플 템플릿 코드입니다. 웹사이트 디자인에 맞게 CSS를 사용하여 페이지의 스타일을 지정해야 합니다 . 종합하면 검색 페이지 파일은 다음과 같아야 합니다.
<?php
/*
Template Name: Custom Search Page
*/get_header(); ?><div class="content-area">
<h2>Search Our Blog</h2>
<p>Welcome to our tech blog! Here you will find all kinds of reviews of the best tech gadgets.</p>
<p>Use the search form below to browse our vast collection of content.</p><?php get_search_form(); ?>
</div>
<?php get_footer(); ?>위의 코드에서 get_search_form() 함수를 사용하여 페이지에 검색 양식을 표시합니다. 이 양식에는 WordPress 데이터베이스에서 결과를 검색하고 검색하는 데 필요한 모든 논리가 포함되어 있습니다.
제목 및 단락 태그의 텍스트를 웹사이트 정보로 바꿀 수 있습니다.
코드를 추가한 후 파일을 저장하면 FileZilla가 새 변경 사항이 포함된 파일을 다시 업로드하라는 메시지를 표시합니다. 업로드 시 이전 파일 덮어쓰기 옵션을 선택합니다.
그런 다음 확인 을 클릭하여 계속하십시오.
사용자 정의 검색 페이지 사용
방금 만든 이 템플릿을 사용하려면 WP 관리 대시보드에 로그인한 다음 페이지 >> 새로 추가 로 이동합니다. 페이지 제목으로 "검색"을 입력합니다.
"페이지 속성" 섹션에서 템플릿 드롭다운을 클릭하고 위의 이전 단계에서 만든 템플릿을 선택합니다.
페이지 내용을 비워두고 마지막으로 게시 버튼을 눌러 변경 사항을 저장하십시오. 이 페이지를 미리 보면 사용자가 검색어를 입력하고 응답을 받을 수 있는 양식이 표시됩니다.
이 페이지의 URL을 복사하여 웹사이트의 모든 게시물이나 페이지에 추가할 수 있습니다.
사용자 정의 검색 페이지의 이점은 원하는 대로 템플릿에 요소를 사용자 정의하고 추가할 수 있다는 것입니다. 그러나 WordPress 파일을 사용자 정의하려면 PHP 및 CSS에 대한 약간의 지식이 필요합니다.
WordPress에서 검색 페이지를 만드는 방법에 대한 자세한 내용은 공식 코덱스 문서를 확인하세요.
WordPress 검색 결과 페이지 사용자 정의
검색 결과 페이지를 수동으로 사용자 정의하거나 플러그인을 사용할 수 있습니다. WordPress 플러그인을 설치하고 구성하기 쉽기 때문에 플러그인 접근 방식을 권장합니다 . 또한 페이지를 수동으로 사용자 정의하려면 고급 WP 사용자여야 합니다.
WordPress가 제공하는 전체 사이트 편집 기능을 사용하여 검색 결과 페이지를 사용자 정의할 수도 있습니다. 이 가이드에서는 두 가지 방법을 모두 설명합니다.
WordPress 검색 플러그인 사용
올바른 검색 플러그인을 사용하면 기본적으로 기본 WordPress 검색 기능이 향상됩니다. 일부 플러그인에는 사이트에 강력한 검색 엔진을 구축하는 데 필요한 도구가 완전히 포함되어 있습니다.
WordPress에는 많은 검색 플러그인이 있습니다. 따라서 사이트에 적합한 플러그인을 선택하는 것은 어려운 작업으로 보일 수 있습니다.
이를 돕기 위해 사용 가능한 최고의 WordPress 검색 플러그인에 대한 검토를 진행할 수 있습니다.
일부 플러그인은 무료로 사용할 수 있습니다. 그러나 몇 가지 프리미엄 옵션도 있습니다.
웹사이트가 작은 경우 무료 플러그인에서 제공하는 기능을 사용할 수 있습니다 . 대규모 웹사이트 소유자는 웹사이트의 고급 기능을 사용하기 위해 프리미엄 플러그인을 선택하는 것을 고려해야 합니다.
결과 페이지에 검색 상자 추가
탐색 메뉴에 이미 검색 양식이 있을 수 있으므로 이 단계가 불필요하다고 생각할 수 있습니다. 사실이지만 추가 이점이 있습니다.
예를 들어, 사용자의 검색어가 다시 건조(결과 없음)되는 경우 해당 검색어가 실제로 수행되었음을 사용자에게 표시하는 것이 논리적입니다. 이를 달성하는 한 가지 방법은 검색 양식을 추가하고 사용자의 쿼리로 양식을 채우는 것입니다.
이 기능을 추가하려면 Ivory Search 플러그인을 사용할 수 있습니다. 이 무료 플러그인은 기본 WP 검색 엔진의 기능을 확장합니다.
플러그인을 사용하면 검색 양식을 무제한으로 만들고 페이지 레이아웃과 스타일에 맞게 사용자 지정할 수 있습니다.
플러그인을 설치 및 활성화한 후 Ivory Search 메뉴를 선택하여 플러그인의 설정 페이지에 액세스할 수 있습니다.
플러그인이 자동으로 양식을 생성합니다. 양식을 표시하려는 영역에 생성하는 단축 코드를 추가할 수 있습니다.
게시물과 페이지 너머로 검색 확장
기본적으로 WordPress 검색은 게시물과 페이지만 검색합니다. 이것은 간단한 블로그에 충분할 수 있습니다. 그러나 사용자 정의 게시물 유형 또는 전자 상거래 제품이 있는 대규모 웹 사이트가 있는 경우 WP 검색을 확장해야 합니다.
WordPress 검색 플러그인은 카테고리, 분류 및 미디어 파일에 대한 지원을 포함하여 웹사이트의 기능을 확장합니다.
이 가이드의 앞부분에서 Ivory Search 플러그인을 설치하고 설정하는 방법을 보여주었습니다. 이 플러그인을 사용하여 검색 양식을 만들 때 허용하려는 게시물 유형을 선택할 수 있습니다.
제안/관련 검색 콘텐츠 추가
WordPress 검색 결과 페이지에서 관련 콘텐츠를 제안하여 사용자 참여를 높일 수 있습니다.
사용자가 검색한 정보를 반환하는 것 외에도 검색 결과가 다시 건조해지는 경우에도 항상 관련 결과를 표시하는 섹션을 포함할 수 있습니다.
WordPress 플러그인을 사용하여 이 기능을 웹사이트에 추가할 수 있습니다. 우리가 추천하는 플러그인은 Better Search 플러그인입니다.
이 플러그인을 사용하면 히트맵을 활성화하여 웹사이트에서 가장 인기 있는 검색을 추적할 수 있습니다. 플러그인은 정보를 사용하여 검색 결과 페이지에 인기 게시물 목록을 표시합니다.
플러그인을 설치한 후 더 나은 검색 >> 설정 을 통해 플러그인 설정 페이지에 액세스할 수 있습니다.
"히트맵" 탭에서 검색 결과 페이지에서 히트맵을 활성화하는 옵션을 선택합니다. 그런 다음 아래로 스크롤하여 변경 사항 저장 버튼을 클릭하십시오.
사용자는 쿼리에 대한 응답을 받지 못하더라도 검색 결과 페이지에서 제안 사항을 보기 시작합니다.
Ajax 로딩 활성화
WordPress 검색을 한 단계 더 발전시키려면 "라이브" 검색을 활성화하면 사용자가 검색 양식에 입력할 때 결과를 볼 수 있습니다.
Ivory Search와 같은 WordPress 플러그인은 라이브 검색을 지원하며 WooCommerce와도 잘 통합됩니다. 따라서 웹 사이트에 새 플러그인을 설치하는 것에 대해 걱정할 필요가 없습니다.
이 기능을 사용하려면 WP 관리 대시보드에 로그인한 다음 Ivory Search >> Search Forms 로 이동합니다.
그런 다음 AJAX 메뉴를 선택하고 스위치를 토글하여 Ajax 검색을 활성화합니다.
변경 사항 저장 을 클릭하여 설정을 업데이트합니다. 이제 플러그인이 생성하는 단축 코드를 복사하여 검색 양식을 표시하려는 영역에 추가해야 합니다.
플러그인에는 웹사이트에서 실시간 검색을 활성화하는 데 필요한 스타일과 스크립트가 포함되어 있습니다.
사용자가 이 양식을 사용하여 웹사이트에서 검색하는 경우 양식은 입력을 시작하는 즉시 관련 결과로 자동으로 채워집니다.
WordPress 전체 사이트 편집 사용
WordPress 5.9 이상부터 전체 사이트 편집이 개발 팀에 의해 도입되었습니다. 이 기능을 사용하면 블록 편집기를 사용하여 웹사이트를 사용자화할 수 있습니다. 이를 통해 검색 결과 페이지도 쉽게 사용자 지정할 수 있습니다.
참고: 전체 사이트 편집에 액세스하려면 최신 버전의 WordPress가 있어야 하고 블록 테마를 사용해야 합니다. 그러나 클래식 테마를 사용하는 경우 위에서 설명한 플러그인 방법을 사용하여 WordPress 검색 결과 페이지를 사용자 지정할 수 있습니다.
블록 편집기로 검색 결과 사용자화하기
이 기능을 사용하려면 관리자 대시보드에 로그인한 다음 모양 >> 편집기 로 이동하여 블록 편집기에 액세스합니다.
여기에서 페이지 드롭다운을 클릭하고 모든 템플릿 찾아보기 를 선택합니다.
그런 다음 아래로 스크롤하여 "검색" 템플릿을 찾습니다. 이 템플릿에 대한 설명은 WordPress에 검색 결과를 표시함을 나타냅니다. 이 템플릿을 편집하려면 검색 링크를 클릭하십시오.
블록 편집기에서 템플릿이 열립니다. 템플릿은 사용자가 웹사이트에서 검색할 때 검색 결과가 어떻게 표시되는지 보여줍니다. 목록 보기 아이콘을 클릭하면 페이지 구조를 미리 볼 수 있습니다.
이 페이지에는 사용자가 검색어를 입력할 수 있는 검색 양식이 포함되어 있습니다.
검색 양식 아래에는 검색 결과를 표시하는 쿼리 루프가 있습니다. 기본 설정에 따라 레이아웃을 "목록"에서 "그리드" 보기로 변경할 수 있습니다.
이 방법을 사용하여 검색 결과 페이지를 사용자 정의할 때의 이점은 끌어서 놓기 블록 편집기를 사용하여 페이지에 요소를 추가할 수 있다는 것입니다.
요소를 추가하려면 블록 추가 아이콘을 클릭한 다음 WordPress가 제공하는 블록에서 선택합니다.
검색 결과 페이지를 편집한 후 저장 을 클릭하여 변경 사항을 업데이트하십시오.
배경 이미지 변경과 같이 이 페이지에 적용할 수 있는 다른 사용자 정의가 있습니다. WordPress 5.9 릴리스 가이드에서 자세히 알아볼 수 있습니다.
검색 양식 위젯 추가
검색 결과 페이지를 사용자 정의하는 데 반드시 적용되는 것은 아니지만 사용자가 검색 양식에 쉽게 액세스할 수 있도록 해야 합니다.
이를 수행하는 한 가지 방법은 기본 탐색 메뉴 및 사이드바 영역과 같은 웹사이트의 전략적 섹션에 검색 양식 위젯을 추가하는 것입니다.
특정한 것을 찾고 있는 사용자는 검색 양식을 사용하여 콘텐츠를 쉽게 찾을 수 있습니다.
위치는 WordPress 테마에 따라 다를 수 있습니다. 예를 들어, 일부 테마는 기본적으로 탐색 메뉴에 검색 아이콘을 추가하는 것을 허용하지 않을 수 있습니다. 이러한 경우 플러그인을 사용할 수 있습니다.
그러나 테마가 지원하는 경우 모양 >> 위젯 을 통해 위젯 페이지에 액세스할 수 있습니다. 여기에서 모든 위젯과 위젯을 추가할 수 있는 영역을 찾을 수 있습니다.
아래로 스크롤하여 검색 위젯을 찾습니다. 그런 다음 드롭다운 메뉴를 클릭한 다음 위젯을 배치할 영역을 선택합니다. 완료되면 위젯 추가 를 클릭합니다.
또는 위젯을 원하는 위치로 끌어다 놓기만 하면 됩니다.
결론
독자를 웹사이트에 더 오래 머무르게 하는 것은 웹사이트 소유자로서 우선순위가 되어야 합니다. WordPress 검색 결과 페이지를 개선하는 것만으로도 웹사이트의 이탈률을 줄일 수 있습니다.
이 가이드에서는 WordPress 검색 결과 페이지를 사용자 정의하는 것의 중요성을 보여주었습니다. 또한 기본 WordPress 검색 기능을 확장하는 방법에 대한 팁을 공유했습니다.
간단히 말해서 WordPress 검색을 사용자 정의하고 개선하려면 WordPress 검색 플러그인을 설치해야 합니다.
SEO에 대한 추가 팁은 WordPress 웹사이트에 대한 전체 SEO 가이드를 확인하세요. 또한 다른 WordPress 자습서에 대해서는 블로그의 나머지 부분을 확인하십시오.