사이트에 검색 기능 추가하기

검색 폼을 준비해서 사이트 내의 콘텐츠를 검색한다. 검색 결과 페이지에는 검색어와 일치한 기사의 제목과 본문을 표시하고, 검색어와 일치하는 기사가 없는 경우에는 메시지를 표시하도록 지정한다.

  1. 검색 폼 추가하기
    검색 폼을 추가한다. 헤더 부분의 오른쪽에 표시하기 위해 header.php를 열고 <div id=”subinfo”~></div> 안에 <?php echo get_search_form(); ?>을 추가한다.
    header.php

    <!– 헤더 –>

    <div id=”header”>
    <h1><a href=”<?php echo home_url(); ?>”><?php bloginfo(‘name’); ?></a></h1>
    <p id=”desc”><?php bloginfo(‘description’); ?></p>

    <div id=”subinfo”>

    <?php echo get_search_form(); ?>

    <a href=”<?php bloginfo(‘rss2_url’); ?>”><img src=”<?php bloginfo(‘template_url’); ?>/feed.png” alt=”RSS FEED” width=”28″ height=”28″ /></a>
    </div>

    (생략)

  2. 검색 폼의 디자인 지정하기
    검색 폼이 디자인을 지정하고 RSS 피드의 링크 옆에 표시한다.
  3. 검색하기
    검색 폼에서 검색어를 지정해서 기사를 검색해 본다. 그러나 검색 결과에는 아무것도 표시되지 않는다. 검색 결과 페이지가 아무것도 입력되어 있지 않은 index.php로 생성되기 때문이다.
  4. 검색 결과 페이지 작성하기
    검색 결과 페이지를 생성하는 ‘search.php’ 템플릿을 작성해서 [sample] 테마 폴더로 업로드한다. 검색 결과 페이지는 뉴스 기사의 인덱스 페이지를 기본으로 작성해서 기사의 제목과 본문을 표시한다. archive-news.php의 소스를 전부 search.php에 복사하면 검색 결과가 표시된다.
    ->MEMO
    검색어와 일치한 기사의 수가 적은 경우 페이지 끝에 페이지 번호가 ‘1’만 표시된다. 이 페이지 번호를 표시하지 않기 위해서는 ‘페이지가 하나면 번호를 표시하지 않기‘를 참고하기 바란다.
  5. 검색어 표시하기
    검색에 사용한 검색어를 페이지의 제목으로 표시해서 어떤 검색 결과인지 알게 한다. <p class=”title”>~</p>로 마크업한 부분을 [<?php the search_query(); ?>] 검색 결과로 변경한다. <?php the search_query(); ?>는 검색어를 출력하는 템플릿 태그이며, 이동경로 끝에는 ‘검색결과’라고 표시한다.
    search.php
    변경전

    <?php get_header(); ?>

    <!– 이동경로 –>
    <div id=”breadcrumb”>
    <div itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
    <a href=”<?php echo home_url(); ?>” itemprop=”url”>
    <span itemprop=”title”>TOP</span>
    </a> &rsaquo;
    </div>

    <div><?php $myposttype = get_post_type_object($post_type); ?>
    <?php echo $myposttype->label; ?>
    </div>
    </div>

    <!– 콘텐츠 –>
    <div id=”content”>
    <p class=”title”><?php echo $myposttype->label; ?></p>

    <?php query_posts(‘posts_per_page=5&order=DESC&’ . $query_string); ?>
    <?php if(have_posts()): while(have_posts()):
    the_post(); ?>

    변경후

    <?php get_header(); ?><!– 이동경로 –>
    <div id=”breadcrumb”>
    <div itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
    <a href=”<?php echo home_url(); ?>” itemprop=”url”>
    <span itemprop=”title”>TOP</span>
    </a> &rsaquo;
    </div><div>검색 결과</div>
    </div><!– 콘텐츠 –>
    <div id=”content”>
    <p class=”title”>[<?php the_search_query(); ?>] 검색 결과</p><?php query_posts(‘posts_per_page=5&order=DESC&’ . $query_string); ?>
    <?php if(have_posts()): while(have_posts()):
    the_post(); ?>
  6. 검색어 글자 수가 많은 경우 표시 확인하기
    페이지 제목 부분은 앞에서 가로 길이를 200픽셀로 지정해서 디자인했기 때문에 검색어의 글자 수가 많은 경우 제목이 2줄로 표시된다. 따라서 검색 결과 페이지의 제목 부분의 디자인을 변경한다.
  7. 검색 결과 페이지를 식별하는 클래스 이름 확인하기
    검색 결과 페이지에만 스타일시트를 적용하기 위해 페이지를 식별하는 클래스 이름을 확인한다. <body> 부분의 클래스 이름을 확인하면 앞에서 추가한 <?php body_class(); ?>에 의해 search search-results라고 출력된다. 이 가운데 search-results는 검색 결과가 0개인 경우 출력되지 않기 때문에 search를 이용한다.
  8. 검색 결과 페이지 제목의 디자인 변경하기
    검색 결과 페이지 제목의 디자인을 변경한다. 짙은 회색의 막대 형태로 가로로 길고 크게 표시한다.
  9. 검색어와 일치하는 기사가 없는 경우 표시 확인하기
    검색어와 일치하는 기사가 없는 경우 페이지의 제목만 표시된다.
  10. 검색어와 일치하는 기사가 없는 경우 메시지 표시하기
    검색어와 일치하는 기사가 없는 경우 메시지와 검색 폼을 표시하도록 설정한다. 따라서 루프의 입력을 위와 같이 수정해서 출력하는 기사가 있을 경우<?php if(have_posts()): while(have_posts()):
    the_post(); ?>~<?php endwhile; else: ?>로 처리하고, 출력하는 기사가 없을 경우
    <?php endwhile; else: ?>~<?php endif; ?>로 지정한다.
    search.php
    변경전

    <!– 콘텐츠 –>
    <div id=”content”>
    <p class=”title”>[<?php the_search_query(); ?>] 검색 결과</p>

    <?php query_posts(‘posts_per_page=5&order=DESC&’ . $query_string); ?>
    <?php if(have_posts()): while(have_posts()):
    the_post(); ?>
    <?php get_template_part(‘content’); ?>
    <?php endwhile; endif; ?>
    <?php get_template_part(‘pagenation’); ?>
    </div>

    변경후

    <!– 콘텐츠 –>
    <div id=”content”>
    <p class=”title”>[<?php the_search_query(); ?>] 검색 결과</p>

    <?php query_posts(‘posts_per_page=5&order=DESC&’ . $query_string); ?>
    <?php if(have_posts()): while(have_posts()):
    the_post(); ?>
    <?php get_template_part(‘content’); ?>
    <?php endwhile; else: ?>
    <p>일치하는 기사를 발견할 수 없습니다.<br />
    검색어를 변경해서 다시 검색해 보세요.</p>
    <?php echo get_search_form(); ?>
    <?php endif; ?>

    <?php get_template_part(‘pagenation’); ?>
    </div>

  11. 검색어와 일치하는 기사가 없는 경우 클래스 이름 확인하기
    메시지 부분의 디자인을 지정하기 위해 검색어와 일치하는 기사가 없는 경우 <body> 부분의 클래스 이름을 확인한다. 브라우저의 소스 보기에서 <body> 부분을 확인하면 ‘search search-no-results’라고 출력되기 때문에  ‘search-no-results’를 이용해서 디자인을 지정한다.
  12. 메시지의 디자인 지정하기
    검색어와 일치하는 기사가 없는 경우에 표시하는 메시지 부분의 디자인을 지정한다. 박스 모양의 디자인으로 지정하고 가운데 맞춤으로 표시한다.

출처: 바꾸면서 배우는 워드프레스 디자인

“사이트에 검색 기능 추가하기”에 대한 한개의 댓글

답글 남기기