Modify inove topic -- create a Google Custom Search

The search function of inove themes is actually a little poor. Therefore, inove supports custom search. We use Google Custom Search to enhance the search function of inove themes to increase the user experience. The following describes how to add a Google Custom Search function for an inove topic.

1. log on to Google Custom Search and create your custom search. (X hundred characters are omitted here)

2. Create a search result template. Save the following code as Cse. php and upload it to the inove topic folder. (CSE indicates Custom Search Engine. You can change it to another one)

 

<? PHP
/*
Template Name: CSE
*/
?> <? PHP get_header ();?>
<Div id = "CSE-search-Results"> </div>
<SCRIPT type = "text/JavaScript">
VaR googlesearchiframename = "CSE-search-Results ";
VaR googlesearchformname = "CSE-search-box ";
VaR googlesearchframewidth = 600;
VaR googlesearchdomain = "www.google.com ";
VaR googlesearchpath = "/CSE ";
</SCRIPT>
<SCRIPT type = "text/JavaScript" src = "http://www.google.com/afsonline/show_afs_search.js"> </SCRIPT>
<? PHP get_footer ();?>

 

VaR googlesearchframewidth = 605 indicates the width of the search result page. The default inove width is 605.

3. Create a page in WordPress, for example, my address is http://www.whisperer.name/cse, and the URL is search result. Select the created CSE as the template.

Then, hide the page in the navigation bar, find templates/header. php In the inove folder, and find the following line:

Wp_list_pages ('title _ li = 0 & sort_column = menu_order ');

Change,

Wp_list_pages ('title _ li = 0 & sort_column = menu_order & exclude = 41 ');

Exclude = 41 means to hide this CSE page in the navigation bar, 41 is the ID of this page, on the/WP-admin/edit-pages.php page, hover the mouse over the page title, in the following status bar, you can see post = 41.

4. Define the search box. Still templates/header. php. Find the following code:

<Form action = "http://www.google.com/cse" method = "get">
<Div class = "content">
<Input type = "text" class = "textfield" name = "Q" size = "24"/>
<Input type = "Submit" class = "button" name = "sa" value = ""/>
<Input type = "hidden" name = "CX" value = "<? PHP echo $ options ['Google _ cse_cx '];?> "/>
<Input type = "hidden" name = "ie" value = "UTF-8"/>
</Div>
</Form>

Change,

 

<Form action = "<? PHP bloginfo ('wpurl')?> /CSE "id =" CSE-search-box ">
<Div class = "content">
<Input type = "hidden" name = "CX" value = "<? PHP echo $ options ['Google _ cse_cx '];?> "/>
<Input type = "hidden" name = "COF" value = "forid: 11"/>
<Input type = "hidden" name = "ie" value = "UTF-8"/>
<Input type = "text" class = "textfield" id = "searchtxt" name = "Q" size = "24"/>
<Input type = "Submit" class = "button" id = "searchbtn" name = "sa" value = ""/>
</Div>
</Form>

 

<? PHP bloginfo ('wpurl')?> /CSE is the address of the search result page you just created.

5. In the inove topic option, select the Google Custom engine and enter your CX value.

In this way, all the work is done. You can switch between WordPress default search and Google Custom Search at any time. You do not need to use CSS to define the search box. The original search box style is used.

PS: You can switch between the two search modes in the background. You can define a button next to the search box to allow visitors to choose one. When I first entered WP, I saw it on a blog and shared it if anyone knows how to define it.