Simple steps to add Google search function to WordPress_javascript skills

There are many articles on the Internet about how to integrate Google Custom Search in WordPress, but few mention how to integrate the v2 code. Today, through actual testing, I will explain to you how to integrate Google Custom Search in WordPress. of.

Get Google Custom Search Code
Enter http://www.google.com/cse/
All series of Google accounts are universal,
So if you have gmail, you can successfully enter this custom search system
After a series of registrations and logins, you will enter the main interface of cse. The Internet speed is sometimes a little painfully slow, so everyone must be patient.
Enter the main interface and click New Search Engine
Fill in the content as shown below:

Check the box to agree to the agreement, then click Next,
Choose the style according to your preference, and a demonstration will appear directly below.
Click Next and the code will appear.
Guys, have you got the code? The code I got is as follows:

<!-- 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>

Add search page
Create a new page in your WordPress with the alias search
Assume that a fixed connection is set up and the access address of this page is
http://pangbu.com/google-search-in-wordpress
Use html editing mode and add the code you just obtained to the article.
Want to know what the effect is?

Effect
You can search directly below to try.

System integration
Okay, you already have a search page, now we have to integrate it into WordPress search.
Trouble? Of course it's not troublesome.
Find the file that defines the style of your theme search box,
Usually searchform.php,
Some themes may vary slightly.
There are two more important sentences,
One is the form submission address, action="XXX"
One is the form parameter name name="s",
The code here is pretty much the same, I'm sure you can find it.

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

Put action="XXX"
Change to action="URL of the search page you just created"
Remember to bring http, such as

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

change name="s" to name="q"

Integrated code examples
My modified topic search style code is as follows

<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>