티스토리 스킨 수정하기: 구글 맞춤검색 기능 적용하기

2019. 5. 1. 08:25 | 댓글 10

이 블로그에는 최근 공개된 티스토리 매거진 스킨인 Magazine이 적용되어 있습니다. 스킨 그대로 사용해도 괜찮지만 저는 이전 레이아웃과 거의 비슷하게 바꾸었습니다.

데모의 헤더를 보면 왼쪽에 블로그 이름이 표시되고, 오른쪽에 검색 아이콘과 메뉴 아이콘이 배치되어 있습니다.

티스토리 스킨 Magazine

저는 PC 버전에서는 이전 스킨과 비슷하게 만들었습니다. (모바일 버전은 모바일 스킨을 사용하고 있습니다.)

티스토리 스킨 Magazine - 헤더 수정

블로그 타이틀 옆에 배너가 표시되도록 했고, 메뉴는 메뉴 아이콘을 클릭했을 때 표시되도록 하는 대신 메뉴 아이콘을 삭제하고 메뉴 항목이 표시되도록 메뉴 내비게이션을 막코딩으로 추가했습니다.ㅎㅎ 검색 아이콘은 CSS를 사용하여 오른쪽 끝으로 위치를 이동시켰습니다. 이 부분에 대해서도 기회가 되면 수정하는 방법을 설명해보겠습니다. HTML과 CSS를 조금 알면 쉽게 가능한 부분입니다.

검색 아이콘을 클릭하면 본래 다음과 같은 모달 창으로 검색 폼이 표시됩니다.

티스토리 스킨 Magazine - 검색

검색어를 입력하고 엔터를 누르면 포트폴리오 형식(그리드 형식)으로 검색 결과가 표시됩니다.

티스토리 스킨 Magazine - 검색 결과

깔끔하게 검색 결과가 표시되어 레이아웃적인 측면에서는 만족스러운 것 같습니다. 이대로 사용해도 되지만, 저는 티스토리 검색 기능 대신 구글 맞춤검색 기능을 사용하도록 스킨을 조금 수정했습니다.

Magazine 스킨에서는 비교적 수월하게 구글 맞춤검색 기능으로 대체할 수 있는 것 같습니다.

구글 맞춤검색 기능을 이용하면 지정된 사이트에 대하여 구글에서의 검색 결과가 표시됩니다. 해당 티스토리 사이트 내에서만 검색할 수도 있고, 원하는 경우 여러 사이트의 검색 결과를 함께 표시할 수도 있습니다. 또는, 사이트 일부만 검색하는 것도 가능합니다.

운영 중인 사이트가 여러 개 있고 여러 개의 사이트에서의 검색 결과를 사용자들에게 제시하고 싶은 경우 유용합니다. 그리고 구글 AI가 검색해주니 검색 품질도 믿을 수 있고요.

구글 맞춤검색 기능을 사용하려면 먼저 맞춤검색(Google Custom Search) 사이트에 접속하여 새로운 검색엔진을 추가해야 합니다.

구글 맞춤검색 - 검색엔진 추가하기

위와 같은 화면이 표시되면 "추가"를 클릭합니다.

구글 맞춤검색 - 검색엔진 추가하기

검색할 사이트에 사이트 URL을 포맷에 맞게 추가합니다. 여러 개의 사이트를 추가할 수 있고, www.example.com/docs/*처럼 사이트의 일부를 검색하도록 할 수도 있습니다.

설정이 완료되었으면 하단의 "만들기"를 클릭합니다.

구글 맞춤검색 - 검색엔진 추가 완료

맞춤 검색엔진이 성공적으로 생성되었다는 페이지가 나타납니다. "코드 가져오기"를 클릭합니다.

구글 맞춤검색 - 코드 가져오기

지침과 같이 제시된 코드를 복사하여 스킨 편집 페이지에서 기존 검색 폼을 대체하면 됩니다.

검색엔진을 수정하려면 왼쪽의 "검색엔진 수정" 메뉴를 클릭하고 해당 검색엔진을 선택한 후에 설정을 변경할 수 있습니다.

구글 맞춤검색 - 검색엔진 수정

설정 탭에서 구글 애드센스 계정과 연결할 수 있습니다. 디자인 탭에서는 구글 맞춤검색 폼이 표시되는 레이아웃을 지정할 수 있습니다. 기본 설정인 '오버레이'가 무난한 것 같습니다.

이제 복사한 코드를 스킨 파일에 붙여넣기 위해 티스토리에서 꾸미기 > 스킨 편집을 클릭합니다.

티스토리 Magazine 스킨 수정하기

위와 같은 페이지가 표시되면 'html 편집'을 클릭합니다.

저는 HTML에서 다음 부분을 찾아서 바꾸어주었습니다.

찾을 부분:

<s_search>
                                <input type="text" name="[##_search_name_##]" title="검색어 입력" placeholder="검색어 입력.."
                                    value="[##_search_text_##]" class="inp_search" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }">
                            </s_search>

바꿀 내용:

<s_search>
                               <div class="area_search">
<script>
  (function() {
    var cx = 'xxxxxxxxxxxxxxxxxxxxxxxx:xxxxxxxxxxx';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>
    </div>
                            </s_search>

그리고 바로 아래의 다음 코드는 삭제했습니다.

<button type="button" title="검색어 삭제" class="btn_search_del">
                                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"
                                    class="img_svg">
                                    <defs>
                                        <path id="textDelBtnSvg" d="M20 2C10.059 2 2 10.059 2 20s8.059 18 18 18 18-8.059 18-18S29.941 2 20 2zm8 24.6L26.6 28 20 21.4 13.4 28 12 26.6l6.6-6.6-6.6-6.6 1.4-1.4 6.6 6.6 6.6-6.6 1.4 1.4-6.6 6.6 6.6 6.6z" />
                                    </defs>
                                    <g fill="none" fill-rule="evenodd" transform="translate(-2 -2)">
                                        <path d="M0 0h40v40H0z" />
                                        <mask id="textDelBtnSvgMask" fill="#fff">
                                            <use xlink:href="#textDelBtnSvg" />
                                        </mask>
                                        <g fill="#000" fill-opacity="1" mask="url(#textDelBtnSvgMask)" class="svg_bg">
                                            <path d="M0 0h40v40H0z" />
                                        </g>
                                    </g>
                                </svg>
                            </button>

변경 사항을 저장하고 테스트해보면 구글 맞춤검색 기능이 원하는 대로 잘 작동할 것입니다.

PC에서 이 블로그의 검색 아이콘을 클릭하면 다음과 같은 모달 창이 표시됩니다.

티스토리 구글 맞춤검색 기능

검색을 해보면 지정한 사이트를 검색하여 검색 결과가 표시됩니다.

구글 맞춤검색 결과

참고:

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    IT세레스

    옛날에 한번 적용하다가 해제했었는데요.
    많이 바뀌었군요.

  2. thumbnail
    과객
    2019.05.20 19:26

    헤더가 제목으로 바뀌지 않게 하고 싶은데요. 아무리 해도 안됩니다. 어디를 어떻게 수정해야 해야 하는 것인가요?

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2019.05.20 19:30 신고

      안녕하세요?

      제목 부분은 글 제목으로 바뀌는 것이 SEO에 유리합니다. 그렇지 않고 모든 글에 대하여 동일한 제목으로 설정하면 검색엔진에 모든 글이 동일한 제목으로 검색될 것입니다.

      꼭 원하신다면 '사이트 제목 - 글 제목' 처럼 바꾸시면 사이트 제목이 먼저 헤더에 노출될 것입니다.

      <title>... </title> 부분을 수정하시면 됩니다.

      <title></title>

  3. thumbnail
    과객
    2019.05.20 19:36

    답변 감사합니다. 그런데 제가 물어 본 것은 매거진 스킨이 스크롤 바를 내릴 때 제목이 헤더로 삽입 되지 못하게 막는 방법을 물어 본 것이었습니다. 매거진 스킨인 것 같은데 어떻게 하였는지 알고 싶어서요.

  4. thumbnail
    홀로배움♡성숙기쁨

    안녕하세요~ 편안한하루 보내고 계시는지요~

    제가 네이버블로그. 타이틀에 검색기능추가가 되어있는 '홈페이지형 타이틀'을 보았습니다.
    (이해를 돕기위해 제가 본 사이트주소를 첨부드립니다.)
    https://blog.naver.com/darkdigit/221637609424

    블로그를 시작하려는데... 그기능을 알고싶은데 아무리 몇일째 찾아보아도 찾을수 없는 답답함에 이렇게 글을 남기게 되었네요...귀한시간에 이글이 혹여나 부담을 드리진않알까? 하는 걱정이 되면서도...
    혼자서 방법을 찾아보다가 잘 아실듯하여 조심스레 글을 남겨봅니다.
    혹시 방법을 모르신다면... html이나? css 등의 검색기능을 추가하려면
    어떤 부분에 대해 알고 있어야 할까요?

    읽어주셔서 감사드립니다^^ 건강이 항상 함께하시길 바랍니다.

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2019.12.23 11:24 신고

      안녕하세요?

      네이버 블로그에서는 HTML 코드를 직접 수정할 수 없는 것으로 알고 있습니다.

      코드를 직접 수정할 수 있거나 사이드바에 HTML 코드를 추가할 수 있는 경우에는 이 글에서 제시한 방법을 사용할 수 있습니다.

      하지만 구글 맞춤 검색은 기본적으로 구글에서 검색되는 내용을 표시해주는 것입니다. 네이버 블로그의 경우 대체로 구글에서 검색이 되지 않을 것입니다.

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2019.12.23 11:25 신고

      안녕하세요?

      네이버 블로그에서는 HTML 코드를 직접 수정할 수 없는 것으로 알고 있습니다.

      코드를 직접 수정할 수 있거나 사이드바에 HTML 코드를 추가할 수 있는 경우에는 이 글에서 제시한 방법을 응용하여 사용할 수 있습니다.

      하지만 구글 맞춤 검색은 기본적으로 구글에서 검색되는 내용을 표시해주는 것입니다. 네이버 블로그의 경우 대체로 구글에서 검색이 되지 않을 것입니다.

  5. thumbnail
    홀로배움♡성숙기쁨

    답변주셔서 감사드립니다