WordPress_javascript 기술에 Google 검색 기능을 추가하는 간단한 단계-JS 튜토리얼-php.cn

WordPress_javascript 기술에 Google 검색 기능을 추가하는 간단한 단계

WBOY

풀어 주다： 2016-05-16 15:22:00

원래의

1954명이 탐색했습니다.

Google 맞춤 검색을 WordPress에 통합하는 방법에 대한 기사는 인터넷에 많이 있지만 v2 코드를 통합하는 방법에 대한 언급은 거의 없습니다. 오늘은 실제 테스트를 통해 WordPress에 Google 맞춤 검색을 통합하는 방법을 설명하겠습니다. 의.

Google 맞춤 검색 코드 받기
http://www.google.com/cse/를 입력하세요
모든 Google 계정 시리즈는 보편적입니다.
따라서 Gmail이 있으면 이 맞춤 검색 시스템에 성공적으로 들어갈 수 있습니다
일련의 등록 및 로그인 후에는 cse의 기본 인터페이스로 들어가게 됩니다. 인터넷 속도는 때때로 약간 느려지므로 모두가 인내심을 가져야 합니다.
기본 인터페이스로 들어가서 새 검색 엔진
을 클릭하세요. 아래와 같이 내용을 채워주세요.

201614173911886.jpg (453×640)

계약에 동의하는 확인란을 선택한 후 다음을 클릭하세요.
선호도에 따라 스타일을 선택하면 바로 아래에 데모가 나타납니다.
다음을 클릭하면 코드가 나타납니다.
여러분, 코드를 얻었나요? 제가 받은 코드는 다음과 같습니다.

<!-- Put the following javascript before the closing </head> tag. -->
<script>
 (function() {
 var cx = '006739494664361712883:_id_bvfkgey';
 var gcse = document.createElement('script');
 gcse.type = 'text/javascript';
 gcse.async = true;
 gcse.src = (document.location.protocol == 'https:' &#63; 'https:' : 'http:') +
  '//www.google.com/cse/cse.js&#63;cx=' + cx;
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(gcse, s);
 })();
</script>
<gcse:searchbox></gcse:searchbox>
 
<!-- Place this tag where you want both of the search box and the search results to render -->
//下面这一对标签就是谷歌搜索框要显示的标签，
//即，你想把搜索框放哪就把这一对标签放哪。
<gcse:search></gcse:search>

로그인 후 복사

검색 페이지 추가
별칭 검색을 사용하여 WordPress에 새 페이지 만들기
고정 연결이 설정되어 있고 이 페이지의 액세스 주소가
이라고 가정합니다. http://pangbu.com/google-search-in-wordpress
HTML 편집 모드를 사용하고 방금 얻은 코드를 기사에 추가하세요.
효과가 무엇인지 알고 싶으십니까?

효과
아래에서 직접 검색하여 시도해 볼 수 있습니다.

시스템 통합
좋습니다. 이미 검색 페이지가 있으므로 이제 이를 WordPress 검색에 통합해야 합니다.
문제? 물론 번거롭지는 않습니다.
테마 검색창 스타일을 정의하는 파일을 찾으세요.
보통 searchform.php,
일부 테마는 약간 다를 수 있습니다.
중요한 문장이 두 개 더 있는데,
하나는 양식 제출 주소인 action="XXX"
입니다. 하나는 양식 매개변수 이름 name="s"입니다.
여기에 있는 코드는 거의 동일하므로 찾을 수 있을 것입니다.

<form action="http://pangbu.com" method="get">
<input id="searchtxt" class="textfield searchtip" type="text" name="s" size="24" value="">

로그인 후 복사

액션="XXX" 입력
action="방금 만든 검색 페이지의 URL"로 변경

과 같은 http를 가져와야 합니다.

action="http://pangbu.com/google-search-in-wordpress"

로그인 후 복사

name="s"를 name="q"로 변경

통합 코드 예시
제가 수정한 주제 검색 스타일 코드는 다음과 같습니다

<div id="searchbox" style="display: block;">
 <form action="http://pangbu.com/google-search-in-wordpress" method="get">
 <div class="scontent clearfix">
  <input type="text" id="searchtxt" class="textfield searchtip" name="q" size="24" value="">
  <input type="submit" id="searchbtn" class="button" value="搜索">
 </div>
 </form>
</div>

로그인 후 복사