워드프레스 커스텀 검색 – 쿼리 변수

지난 과정까지의 결과로 예제의 모든 이미지 포스트 아카이브 관련 페이지에는 이미지 포스트가 출력됩니다. 검색 결과 페이지도 그중 하나입니다. 이미지 포스트는 ‘attachment’ 포스트 타입으로, 워드프레스 기본 상태에서는 해당 타입의 포스트가 아카이브에 출력되지 않아 ‘메인 쿼리’에 이 타입을 추가하여 출력하였습니다. 구성할 예제 사이트의 검색 기능도 ‘메인 쿼리’를 이용하여 방문자가 원하는 이미지 검색이 가능하도록 정의합니다. 결과를 놓고 보면 ‘검색’은 ‘필터’의 뜻과 같고, 안내하는 검색 기능 구현 방식은 하나의 예에 불과하므로 절대적이지 않음을 미리 알립니다.

워드프레스 기본 검색

워드프레스 사용 경험이 있다면 누구나 아는 내용으로, 워드프레스 기본 검색은 특정 필드에 한정하여 제공하므로 커스텀 필드의 특정 데이터나 특정 분류 기준의 검색이 불가합니다. 이런 기능은 저장소 플러그인 또는 코드 작업을 통해 직접 구성해야 하는데, 직접 코딩으로 구성할 때는 사용 경험 및 Html 폼 요소에 관한 기초 지식은 물론, 워드프레스 쿼리와 관련한 워드프레스 API 기초 지식이 있어야 조금 더 쉽고 빠르게 구현할 수 있습니다. 그러나, 예제에서 안내하는 내용을 검색 기능 구성의 최소한의 패턴으로 참고하면 나중에 자신의 워드프레스 사이트 구성에 큰 도움이 될 것으로 생각합니다.

기본 검색 폼

테마에 의존하는 것으로, 워드프레스 사이트에서 검색 폼(키워드 입력 필드)은 다음 함수로 호출(출력)할 수 있습니다.

// 검색 폼 호출 함수
get_search_form()

이때, 테마에 ‘searchform.php’ 파일이 있으면 이 파일이 검색 폼을 구성하는 파일이 되어 파일에 정의한 폼이 출력됩니다. 이 파일이 없다면 워드프레스 코어에 정의된 검색 폼을 출력합니다. 예제에서는 테마에 ‘searchform.php’ 파일을 추가하여 검색 폼을 정의할 것이며, 현재 없으므로 추가해야 합니다.

Query Var ‘s’

절대적인 것은 아니지만, 워드프레스 코어나 거의 모든 테마에서 제공하는 검색 폼의 키워드 입력 필드는 다음처럼 입력 필드의 이름(name)이 s입니다.

// name="s"
<input type="search" name="s" id="s" class="search_term" value="" placeholder="Search here...">

이 필드 이름 s는 검색 폼 데이터 전송 시 파라미터(쿼리 변수)로 사용되는데, 워드프레스에서 s를 파라미터로 사용하면 ‘검색 키워드’를 뜻하는 것으로 워드프레스가 자동으로 인식합니다. 이것은 워드프레스에 ‘사전 정의된 쿼리 변수(Public Query Variable)’ 중 하나이기 때문입니다. 이처럼 사전 정의된 쿼리 변수는 ‘URL 쿼리 스트링’에 포함하여 사용할 수 있습니다. 사용할 수 있다는 것은 워드프레스가 ‘인식’한다는 것과 같습니다. 다시, 인식한다는 것은 ‘워드프레스 쿼리 파라미터로 사용할 수 있다’는 것으로, ‘검색 조건으로 사용할 수 있다’는 뜻입니다.

WordPress Query Vars

예제의 지난 과정에서 이미지 업로드 시 설명 필드(post_content)에 미디어태그(phototag) 데이터를 저장하도록 정의하였습니다. 검색을 위한 것임을 이미 알렸으며, s 파라미터의 데이터(검색 키워드)는 해당 필드(post_content)의 데이터를 검색합니다. 물론, 제목 필드(post_title)도 포함합니다.

예제에서는 워드프레스 기본 s 필드를 그대로 사용하며, 분류 기준 검색을 추가하고, 커스텀 필드 기준 검색을 위해 사용자 추가 쿼리 변수를 정의합니다. 이에 커스텀 검색 폼을 먼저 구성하는데, 이어서 안내하는 실제 구성 과정으로 이해를 더하기 바랍니다.

커스텀 검색 폼

검색 폼을 정의할 파일을 만들기 전에 검색 기능과 관련한 다음의 테마 파일을 편집기로 모두 엽니다.

assets/js/pics.js
inc/main-query.php
header.php

검색 폼 출력

검색 폼은 사이트 전체 페이지에 항상 출력되도록 정의하며, 프런트 페이지를 제외한 페이지에서는 사이트 헤더 영역에 출력합니다. 프런트 페이지에서는 같은 검색 폼을 사용하지만, 출력 위치 변경 및 약간 다른 스타일을 사용하므로 나중에 프런트 페이지 구성 시 별도 추가합니다.

사이트 헤더 영역에 검색 폼을 추가하기 위해 편집기에 열린 header.php 파일 32번 줄 위에 다음의 1번 줄을 추가하고 저장합니다.

( ! is_front_page() ) ? get_search_form() : false;
get_template_part( 'template-parts/navigation/navigation', 'top' ); // 이 줄 위에 1번 줄 추가

사이트에서 프런트 페이지 헤더 영역을 확인하면 변화가 없지만, 다른 페이지를 보면 워드프레스 기본 검색 폼이 출력된 것을 볼 수 있을 것입니다. 직접 확인해보세요. 편집기에서 header.php 파일은 이제 닫아도 됩니다.

검색 폼 파일 생성, searchform.php

다음으로 검색 폼을 직접 정의할 파일을 만듭니다. 편집기에서 ‘searchform.php’ 이름의 파일을 만드는데, 파일 위치는 테마 루트입니다. 테마 루트는 ‘search.php’ 파일과 같은 경로를 뜻합니다. 이 파일을 만든 후 사이트를 확인하면 앞서 출력된 기본 검색 폼이 나오지 않습니다. 이미 알렸지만, ‘searchform.php’ 파일이 있을 때 워드프레스가 이 파일을 검색 폼으로 먼저 인식한다는 것을 확인할 수 있습니다. 사이트를 새로 고쳐 직접 확인해보세요.

검색 폼을 위한 기본 마크업

편집기에 열린 searchform.php 파일에 다음 코드를 추가하고 저장합니다. 코드는 필자가 예제 사이트를 위해 구성한 것으로, 폼 관련 스타일(CSS)은 미리 정의하여 제공하였으므로 안내하지 않습니다. 스타일이 마음에 들지 않는다면 예제 구성이 끝난 후 더 유연하게 변경하면 됩니다. 또, 폼 마크업도 검색 기능 오류가 없다면 자유롭게 변경해도 됩니다.

<form id="search-form" role="search" method="GET" class="top_search" action="http://localhost/">
    <div class="ddb">모든 미디어</div>
    <div class="pop_dropdown">
        <table id="table-dropdown" class="tdd">
            <tbody>
                <tr>
                    <th>미디어 종류</th>
                    <td>
                        <label><input checked="" type="radio" name="mediacat" value=""> 전체</label>
                        <label><input type="radio" name="mediacat" value="그래픽"> 그래픽</label>
                        <label><input type="radio" name="mediacat" value="사진"> 사진</label>
                        <label><input type="radio" name="mediacat" value="일러스트"> 일러스트</label>
                    </td>
                </tr>
                <tr>
                    <th>카테고리</th>
                    <td>
                        <select name="photocat" id="photocat" class="select_photocat">
                            <option value="">전체</option>
                            <option value="감정">감정</option>
                            <option value="건강">건강</option>
                            <option value="건축">...</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>방향</th>
                    <td>
                        <label><input checked type="radio" name="pic_axis" value=""> 전체</label>
                        <label><input type="radio" name="pic_axis" value="가로"> 가로</label>
                        <label><input type="radio" name="pic_axis" value="세로"> 세로</label>
                    </td>
                </tr>
                <tr>
                    <th>크기</th>
                    <td>
                        <input type="text" name="pic_width" value="" placeholder="너비(px)">
                        <span class="x">x</span>
                        <input type="text" name="pic_height" value="" placeholder="높이(px)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="input-group">
        <input type="search" name="s" id="s" class="search_term" value="" placeholder="Search here...">
        <button class="btn_go" type="submit"></button>
        <input type="hidden" id="_srcnonce" name="_srcnonce" value="">
    </div>
</form>

위의 코드를 추가하고 저장한 후 사이트를 다시 확인하면, 예제에서 사용할 검색 폼이 헤더 영역에 추가된 것을 볼 수 있습니다. 물론, 프런트 페이지에는 나오지 않을 것입니다. 직접 확인해보세요.

폼 기능을 위한 자바스크립트 코드 추가

사이트에 출력된 검색 폼에서 ‘모든 미디어’로 표현된 버튼을 클릭하면 현재는 특정 반응이 없습니다. 다음 코드 8번 줄에서 16번 줄을 편집기에 열린 pics.js 파일에 추가하고 저장합니다. 추가 위치는 다음 코드의 1번 줄에서 6번 줄을 찾아 참고하세요.

$('img.lazy').lazyload({
    effect: "fadeIn",
    //load: function() {
    //  $('.lazy').attr('class','early-bird');
    //}
}); // 이 줄 다음에 아래 코드 추가

// 상세 검색 팝업
$('.ddb').click(function(){
    $('.pop_dropdown').toggle();
});
$(document).click(function(e) {
    if (!$(e.target).closest('.ddb, .pop_dropdown').length) {
        $('.pop_dropdown').hide();
    }
});

위의 추가 코드는 ‘모든 미디어’로 표현된 버튼을 클릭할 때 상세 검색 팝업이 나타나도록 정의한 것이며, 상세 검색 팝업을 제외한 모든 영역 중 아무 곳이나 클릭했을 때 팝업을 닫는(감추는) 것입니다. 직접 확인하세요. 코드 추가 및 확인이 끝나면 pics.js 파일은 편집기에서 닫습니다.

커스텀 검색

지금 과정만으로 검색 기능을 확인해봅니다. 사이트의 어떤 페이지든 가능하지만, 공통된 확인을 위해 ‘둘러보기’ 페이지에 접근하여 검색 폼 입력 필드에 ‘멕시코’를 입력하고 검색 버튼(돋보기 아이콘)을 클릭해보세요. 다음 그림처럼 2개의 이미지가 출력될 것입니다.

이번에는 ‘모든 미디어’로 표기된 버튼을 클릭하고 상세 검색 팝업을 노출하여 미디어 종류의 ‘그래픽’을 선택한 후 검색 버튼을 클릭해보세요. 다음 그림과 같은 결과를 볼 수 있습니다.

다시, ‘모든 미디어’로 표기된 버튼을 클릭하고 상세 검색 팝업을 노출하여 카테고리의 ‘감정’을 선택한 후 검색 버튼을 클릭합니다. 다음 그림의 결과를 볼 수 있습니다.

3가지의 검색은 다음의 URL 쿼리 스트링으로 정리할 수 있습니다.

localhost/?mediacat=&photocat=&pic_axis=&pic_width=&pic_height=&s=멕시코&_srcnonce=
localhost/?mediacat=그래픽&photocat=&pic_axis=&pic_width=&pic_height=&s=&_srcnonce=
localhost/?mediacat=&photocat=감정&pic_axis=&pic_width=&pic_height=&s=&_srcnonce=

검색 폼을 이용하지 않고, 위의 3가지 URL을 각각 복사하여 브라우저 주소 입력 필드에 추가한 후 결과를 확인해보세요. 검색 폼을 통한 결과와 같을 것입니다.

이번에는 복수의 조건으로 검색해봅니다. 검색 폼을 통해서도 가능하지만, 검색 폼의 선택 항목이 URL 쿼리 스트링으로 생성되므로 URL을 사용해봅니다. 다음 URL 쿼리 스트링을 브라우저 주소 입력 필드에 추가하여 검색 결과를 확인해보세요.

localhost/?mediacat=일러스트&photocat=감정&pic_axis=&pic_width=&pic_height=&s=&_srcnonce=

검색 결과에는 하나의 이미지가 출력될 것입니다. 검색 결과가 올바른지 한 번 더 확인하기 위해 다음 2가지 URL로 다시 각각 확인해봅니다.

localhost/?mediacat=&photocat=건강&pic_axis=&pic_width=&pic_height=&s=&_srcnonce=
localhost/?mediacat=사진&photocat=건강&pic_axis=&pic_width=&pic_height=&s=&_srcnonce=

검색 기능 구현을 위해 현재까지 처리한 것은 실제 다음처럼 2가지로 볼 수 있습니다. 자바스크립트 코드는 검색 폼 자체의 기능을 위한 것이므로 제외하며, 지난 과정에서 처리한 search.php 파일 및 메인 쿼리 정의도 제외한 것입니다.

searchform.php 파일 생성 및 검색 폼 마크업
get_search_form() 함수로 검색 폼 호출

검색 기능 구현을 위해 위의 2가지 작업을 진행했지만, 실제로 검색 폼을 정의하기 위한 파일 생성과 폼을 호출하는 함수도 결국은 ‘기능과 관리’ 성격의 작업에 불과합니다. 파일 생성이나 함수 호출 없이 searchform.php 파일에 추가한 코드 전체를 header.php 파일에 추가해도 조금 전에 확인한 검색 결과와 다르지 않습니다.

또, 현재 searchform.php 파일에 정의한 폼 마크업은 프로그래밍 과정이 없는 단순한 Html 요소만으로 구성한 것인데도 단일 및 복수 검색 기능을 구현하는 데 전혀 문제가 없음을 확인할 수 있습니다. 물론, 검색 폼은 조금 더 다듬어 사용할 것입니다.

분류 조건의 검색

조금 전 검색 기능을 확인한 3가지는 s, mediacat, photocat 검색 폼 필드에 해당하는 것이었습니다. URL 쿼리 스트링에서 워드프레스가 자동으로 인식하도록 사전 정의된 s 쿼리 변수를 필드 이름으로 사용한다는 것은 이미 말했습니다. mediacat, photocat 쿼리 변수에 의해 원하는 검색 결과를 얻을 수 있는 것도 해당 쿼리 변수(또는 필드 이름)가 ‘taxonomy’ 이름과 같기 때문입니다. 조금 더 명확하게 말하면 분류 등록 정의 시 다음 설정에 의한 결과입니다.

'publicly_queryable' => true
'query_var' => true

1번 줄 설정에 의존하지만, 특히 2번 줄의 설정이 URL 쿼리 스트링의 쿼리 변수를 워드프레스가 인식하는 핵심 설정입니다. 예제에서는 사이트 루트 wp-content/mu-plugins/pics-tax-cpt.php 파일에 커스텀 분류를 등록했는데, 위의 항목 모두 기본 ‘true’로 설정되어 있어 추가하지는 않았습니다. ‘false’로 설정한다면 추가해야 합니다. 분류 등록에 관한 자세한 내용은 코덱스를 참고하세요.

커스텀 필드 조건의 검색

커스텀 필드 조건의 검색은 아직 확인하지 않았는데, 방향(pic_axis), 크기(pic_width, pic_height) 필드입니다. 그러나, 검색 폼에서 방향에 ‘세로’를 선택하고 검색해도 올바른 결과를 현재는 얻을 수 없습니다. 또, 크기 필드에 특정 값을 입력해도 입력한 값보다 큰 이미지 포스트의 검색 결과도 지금은 얻을 수 없습니다.

localhost/?mediacat=&photocat=&pic_axis=세로&pic_width=&pic_height=&s=&_srcnonce=
localhost/?mediacat=&photocat=&pic_axis=&pic_width=4000&pic_height=&s=&_srcnonce=

폼에 의해 URL 쿼리 스트링에 추가되지만, 커스텀 필드의 필드 키(meta_key – pic_axis, pic_width, pic_height)는 워드프레스에서 ‘Private Query Variable’로 정의되어 있어 URL 요청^Request에 응답하지 않습니다. 이를 해결하기 위해서 다음 2가지 방법을 생각할 수 있습니다.

폼 데이터 접근 방식과 워드프레스 메타 쿼리
쿼리 변수 추가와 워드프레스 메타 쿼리

위의 2가지 방식처럼 공통점은 ‘워드프레스 메타 쿼리’입니다. 어떤 접근 방식이라도 결국은 워드프레스 쿼리로 검색 결과를 출력해야 한다는 것입니다. 다음 코드는 편집기에 열린 main-query.php 파일에 추가할 코드로 pre_get_posts 훅에 의한 현재 존재하는 pics_attachment_query_filter 함수에 추가할 코드입니다.

if ( $query->is_search() ) {
    $query->set( 's', $search_term );
    $query->set( 'mediacat', $tax_mediacat );
    $query->set( 'photocat', $tax_photocat );
    $query->set( 'meta_query', $meta_query );
}

검색 조건(is_search)일 때의 기준으로 쿼리 오브젝트를 추가한 것인데, 2번에서 4번 줄은 이미 워드프레스가 자동으로 인식한다는 것을 확인했습니다. 따라서 생략해도 되지만, 검색 폼 데이터 부호화 및 발생할 수 있는 최소한의 오류 등을 막기 위해 추가하였습니다. 이제 위 코드의 각 변수를 정의해봅니다.

폼 데이터 접근 방식

검색 ‘폼’이므로 폼 데이터 접근 방식으로 변수를 정의하면 다음 코드로 처리할 수 있습니다.

$search_term = trim( wp_filter_nohtml_kses( $_REQUEST[ 's' ] ) );
$tax_mediacat = trim( wp_filter_nohtml_kses( $_REQUEST[ 'mediacat' ] ) );
$tax_photocat = trim( wp_filter_nohtml_kses( $_REQUEST[ 'photocat' ] ) );
$pic_axis = trim( wp_filter_nohtml_kses( $_REQUEST[ 'pic_axis' ] ) );
$pic_width = absint( $_REQUEST[ 'pic_width' ] );
$pic_height = absint( $_REQUEST[ 'pic_height' ] );

쿼리 변수 추가

워드프레스 쿼리 변수로 검색 폼의 데이터를 다룰 때 get_query_var 함수를 사용하여 다음 코드로 정의할 수 있습니다.

$search_term = trim( wp_filter_nohtml_kses( get_query_var( 's' ) ) );
$tax_mediacat = trim( wp_filter_nohtml_kses( get_query_var( 'mediacat' ) ) );
$tax_photocat = trim( wp_filter_nohtml_kses( get_query_var( 'photocat' ) ) );
$pic_axis = trim( wp_filter_nohtml_kses( get_query_var( 'pic_axis' ) ) );
$pic_width = absint( get_query_var( 'pic_width' ) );
$pic_height = absint( get_query_var( 'pic_height' ) );

이때, 4번에서 6번 줄의 pic_axis, pic_width, pic_height 쿼리 변수는 커스텀 필드 키와 같지만, 워드프레스 공개 쿼리가 아니므로 해당 키를 공개 쿼리 변수에 추가해야 합니다. 다음 코드에 있는 훅으로 쿼리 변수를 추가할 수 있습니다.

/* 커스텀 필드 키를 쿼리 변수로 추가 */
add_filter( 'query_vars', 'add_query_vars_filter' );
function add_query_vars_filter( $vars ) {
    $vars[] = 'pic_axis';
    $vars[] = 'pic_width';
    $vars[] = 'pic_height';
    return $vars;
}

예제에서는 쿼리 변수로 검색 폼의 데이터를 정의합니다. 어떤 방식이 올바르다는 것은 정의할 수 없으므로 쿼리 변수와 폼 데이터 방식의 차이는 예제를 통해 직접 찾기 바랍니다.

$meta_query

남은 것은 커스텀 필드 관련 변수(meta query)를 $meta_query 변수에 배열로 묶는 것인데, 다음 코드로 간단하게 처리할 수 있습니다.

// meta query
// $meta_query = array( 'relation' => 'AND' ); // Default
$meta_query = array();
if ( $pic_axis ) {
    $meta_query[] = array(
        'key' => 'pic_axis',
        'value' => $pic_axis,
        'compare' => '=',
    );
}
if ( $pic_width ) {
    $meta_query[] = array(
        'key' => 'pic_width',
        'value' => $pic_width,
        'compare' => '>', // value 보다 큰
        'type' => 'NUMERIC'
    );
}
if ( $pic_height ) {
    $meta_query[] = array(
        'key' => 'pic_height',
        'value' => $pic_height,
        'compare' => '>', // value 보다 큰
        'type' => 'NUMERIC'
    );
}

하나 이상의 메타 쿼리(meta query)일 때 각 쿼리의 관계를 설정할 수 있는데, 2번 줄처럼 ‘AND’ 설정이 기본이며 예제의 검색 조건과 같기에 비활성화하여 생략하였습니다.

코드에 사용한 인수(arguments) key, value, compare, type 등은 워드프레스 메타 쿼리에 관한 추가 정보를 얻어 학습하기 바라며 설명은 생략합니다. 지금은 예제의 결과를 통해 가늠하기 바랍니다.

검색 결과 확인

앞에서 안내한 코드를 종합한 main-query.php 파일 및 이번 장에서 변경한 모든 파일을 다음 링크로 제공합니다. 먼저 편집기에 열린 모든 파일을 닫습니다. 다음으로 파일을 받고 압축을 푼 후 테마 루트에 덮어쓰세요. 그 후 main-query.php 파일을 편집기로 다시 엽니다.

27장의 변경 파일

편집기에 열린 main-query.php 파일 3번 줄에서 9번 줄에는 다음 코드 1번 줄에서 7번 줄의 코드가, 편집기 파일 24번 줄에서 38번 줄에는 다음 코드 9번 줄에서 23번 줄의 코드가 있습니다.

add_filter( 'query_vars', 'add_query_vars_filter' );
function add_query_vars_filter( $vars ) {
    $vars[] = 'pic_axis';
    $vars[] = 'pic_width';
    $vars[] = 'pic_height';
    return $vars;
}

// 폼 데이터로 접근, 쿼리 변수 추가하지 않아되 됨
//$search_term = trim( wp_filter_nohtml_kses( $_REQUEST[ 's' ] ) );
//$tax_mediacat = trim( wp_filter_nohtml_kses( $_REQUEST[ 'mediacat' ] ) );
//$tax_photocat = trim( wp_filter_nohtml_kses( $_REQUEST[ 'photocat' ] ) );
//$pic_axis = trim( wp_filter_nohtml_kses( $_REQUEST[ 'pic_axis' ] ) );
//$pic_width = absint( $_REQUEST[ 'pic_width' ] );
//$pic_height = absint( $_REQUEST[ 'pic_height' ] );

// 쿼리 변수로 접근, 커스텀 필드 키를 쿼리 변수로 추가해야 함
$search_term = trim( wp_filter_nohtml_kses( get_query_var( 's' ) ) );
$tax_mediacat = trim( wp_filter_nohtml_kses( get_query_var( 'mediacat' ) ) );
$tax_photocat = trim( wp_filter_nohtml_kses( get_query_var( 'photocat' ) ) );
$pic_axis = trim( wp_filter_nohtml_kses( get_query_var( 'pic_axis' ) ) );
$pic_width = absint( get_query_var( 'pic_width' ) );
$pic_height = absint( get_query_var( 'pic_height' ) );

위의 코드 17번 줄부터 나오는 쿼리 변수 방식을 사용하려면 1번 줄에서 7번 줄의 코드(훅 및 함수)가 필요합니다. 비활성화한 9번 줄에서 15번 줄의 폼 데이터 처리 방식을 사용한다면 1번 줄에서 7번 줄의 코드는 필요하지 않습니다. 필요하지 않으므로 있어도 검색 결과에 영향은 없습니다. 또, 있다면 검색 폼이나 검색 키워드 등의 결과 출력에 조금 더 편리할 수 있습니다.

쿼리 변수 방식의 검색 결과 확인

검색 결과 확인을 위해 먼저 편집기의 main-query.php 파일에서 3번 줄을 아래 두 번째 줄 코드처럼 비활성화하고 저장합니다. 훅에 의해 실행되는 위의 2번 줄 함수는 비활성화할 필요가 없습니다.

// ‘//’ 추가를 예제에서는 ‘비활성화’로 표현합니다.
//add_filter( 'query_vars', 'add_query_vars_filter' );

검색 폼 대신에 URL 쿼리 스트링으로 쉽게 검색 결과를 확인하기 위해 브라우저 주소 필드에 다음 URL 입력 후 검색 결과를 확인해보세요. 올바른 결과가 출력되지 않을 것입니다.

localhost/?mediacat=사진&photocat=음악&pic_axis=세로&pic_width=4000&pic_height=6045&s=&_srcnonce=

URL은 미디어 종류(미디어분류) ‘사진’, 카테고리(2차분류) ‘음악’, ‘세로가 긴 사진’, ‘가로 4000px 보다 크고, 세로 6045px 보다 큰 이미지 포스트를 출력하는 쿼리 스트링입니다.

다시, 편집기의 main-query.php 파일에서 3번 줄을 활성화하고 위의 URL을 브라우저에 입력하여 검색 결과를 확인해보세요. 다음 그림처럼 한 장의 이미지 포스트가 출력된다면 올바른 결과입니다.

폼 데이터 방식의 검색 결과 확인

3번 줄을 활성화한 상태 그대로 두고, 파일의 25번 줄에서 30번 줄을 활성화합니다. 그리고 33번 줄에서 38번 줄을 비활성화합니다. 다시, 브라우저 주소 필드에 위에서 제공한 URL을 입력하여 검색 결과를 확인합니다. 위의 그림과 같은 결과가 나올 것입니다.

여기서 다시, 파일의 3번 줄만 비활성화하고 저장하여 브라우저에서 제공한 URL을 이용하여 검색 결과를 확인해보세요. 결과는 위의 그림과 같을 것입니다.

편집기에 열린 main-query.php 파일 3번 줄을 활성화, 25번에서 30번 줄 비화성화, 33번에서 38번 줄을 활성화하여 원래의 상태로 돌려 저장합니다.

검색 기능 확인에서 검색 폼을 통하지 않고, URL 쿼리 스트링으로 검색 결과를 확인했습니다. 검색 폼을 통한 결과도 마찬가지인데, 현재는 검색 폼의 일부 분류(photocat) 데이터를 축소하여 추가한 상태이며, 검색 폼에서 선택한 데이터가 검색할 때 초기화되므로 반복해서 확인하는 것이 번거롭습니다.

다음 장에서는 검색 폼을 조금 더 다듬어 검색 데이터(쿼리)를 폼에 유지하고, 본문에 출력해봅니다. 또, 검색 폼과 사이트 내에서만 검색할 수 있도록 처리합니다.