워드프레스 등에 구글 CSE검색창 달기

내 홈페이지나 블로그만을 위한 자체 검색창을 만들어주는 구글 CSE, 사이트 전용 검색엔진이 필요한 경우 간단하게 무료로 사용이 가능 한데요, 워드프레스, 티스토리, 구글 블로거닷컴 등 블로그에 구글 CSE검색창을 달고 싶은데 검색창과 검색결과가 표시되는 페이지를 다르게 하고 싶다면 아래 코드를 활용하세요.

사용법

  1. 검색결과를 표시할 별도의 페이지에 아래 검색결과용 소스에서 ID 부분을 내 ID로 바꾸고 붙여 넣습니다.
  2. 아래 검색창용 소스에서 ‘검색결과’ 부분에 검색결과용 소스를 붙여 넣은 페이지 URL을 넣어주고, ID부분을 내 ID로 붙여 넣은 다음 코드 전체를 검색창을 삽입하고 싶은 코너에 붙여 넣습니다. (WORDPRESS.ORG나 비즈니스요금제를 사용하는 WORDPRESS.COM에 삽입시 search.php의 </main>태그 앞에 붙여 넣으면 테마에서 지원하는 기본 검색창을 대체 할수 있습니다.)

주의사항 : 검색창의 텍스트 입력 부분을 잘못 건드리면 Google에 의해 차단될 수 있습니다. 또한 코드를 잘못 사용할 경우 작동이 안될 수 있습니다. 또한 Google CSE의 서비스 약관을 준수해야 합니다.

  1. 검색창용 소스 – 아래의 ‘검색결과’ 부분에 검색결과용 소스가 삽입된 페이지의 URL을 ID에 구글CSE검색 ID를 입력하세요.
<form action="검색결과" id="cse-search-box">
  <div>
        <p align="center"><font face="맑은 고딕"><input name="cx" type="hidden" value="ID" />
    <input name="cof" type="hidden" value="FORID:11" />
    <input name="ie" type="hidden" value="EUC-KR" />
    <input name="q" size="68" style="background-color: white; color: #ff3366; font-family: &quot;맑은 고딕&quot;;" type="text" />
    <input name="sa" style="background-color: yellow; border-color: rgb(255, 255, 0);" type="submit" value="찾기" />
			<a href="https://cse.google.com/">ENHANCED BY GOOGLE®</a>
        <p>
<font face="맑은 고딕">        <script src="http://www.google.com/coop/query_renderer.js">
        </script>
        <script src="http://www.google.com/coop/api/010637070416979312096/cse/r0-hav2viis/queries/js?callback=(new+PopularQueryRenderer(document.getElementById(%22queries%22))).render">
        </script>
        <script src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=ko" type="text/javascript">
        </script>
</font></p>
          </div>
</form>

2. 검색결과용 소스 – 아래 ID부분에 구글CSE검색 ID를 입력해 주세요.

<script><br />
  (function() {<br />
    var cx = 'ID';<br />
    var gcse = document.createElement('script');<br />
    gcse.type = 'text/javascript';<br />
    gcse.async = true;<br />
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +<br />
        '//cse.google.com/cse.js?cx=' + cx;<br />
    var s = document.getElementsByTagName('script')[0];<br />
    s.parentNode.insertBefore(gcse, s);<br />
  })();<br />
</script>
<gcse:searchresults-only></gcse:searchresults-only>

댓글 남기기