Như các bạn đã biết google.com hiện nay là một trang cho phép ta tìm kiếm mọi thứ: xem phim, nghe nhạc, hay chỉ đơn giản là đọc truyện… giường như nó đã là thói quen ăn sâu vào tiềm thức của chúng ta vậy, thế nên mới có câu thứ gì không biết cứ lên tra google, quả đúng không sai, không có gì là không có trên google.
Vậy để sử dụng nó trong wordpress thì sao? Bài viết này mình sẽ hướng dẫn các bạn 5 bước để thiết lập Google Custom Search vào trong Genesis
Trong bài hưỡng dẫn này được viết cho chủ đề con (child theme) của genesis nên nó dùng được cho hầu hết những child theme khác nhau.
Bước 1: Truy cập cse.google.com và click vào thêm công cụ tìm kiếm mới .
Nhập URL trang web của bạn bằng dấu hoa thị ở cuối và nhấp vào TẠO.
Trong Chỉnh sửa công cụ tìm kiếm ở bên trái. Trong Giao diện, chỉ chọn Kết quả . Nhấp vào Lưu .
Chỉnh sửa công cụ tìm kiếm > tính năng tìm kiếm. tới tab nâng cao và nhập q vào trường Query Parameter Name > lưu lại.
Nhấp vào Thiết lập ở bên trái và nhấp vào nút Nhận mã .
Tại chỗ nhấp chuột cuối cùng vào Nhận liên kết mã V1 và sao chép mã được hiển thị đến trình chỉnh sửa văn bản của bạn. Bạn sẽ sử dụng nó sau.
Bước 2: Thêm mã sau vào cuối file functions.php trong child theme.
add_filter( 'genesis_search_text', 'custom_search_text' );
/**
* Customizes the text of the search input
*
* @param string $text current text
* @return string modified text
*/
function custom_search_text( $text ) {
return esc_attr( 'Google Search...' );
}
add_filter( 'genesis_search_form', 'custom_search_form', 10, 4 );
function custom_search_form( $form, $search_text, $button_text, $label ) {
$search_text = get_search_query() ? apply_filters( 'the_search_query', get_search_query() ) : apply_filters( 'genesis_search_text', __( 'Search this website', 'genesis' ) . ' …' );
$button_text = apply_filters( 'genesis_search_button_text', esc_attr__( 'Search', 'genesis' ) );
$onfocus = "if ('" . esc_js( $search_text ) . "' === this.value) {this.value = '';}";
$onblur = "if ('' === this.value) {this.value = '" . esc_js( $search_text ) . "';}";
//* Empty label, by default. Filterable.
$label = apply_filters( 'genesis_search_form_label', '' );
$value_or_placeholder = ( get_search_query() == '' ) ? 'placeholder' : 'value';
if ( genesis_html5() ) {
$form = sprintf( '<form %s>', genesis_attr( 'search-form' ) );
if ( genesis_a11y( 'search-form' ) ) {
if ( '' == $label ) {
$label = apply_filters( 'genesis_search_text', __( 'Search this website', 'genesis' ) );
}
$form_id = uniqid( 'searchform-' );
$form .= sprintf(
'<meta itemprop="target" content="%s"/><label class="search-form-label screen-reader-text" for="%s">%s</label><input itemprop="query-input" type="search" name="q" id="%s" %s="%s" /><input type="submit" value="%s" /></form>',
home_url( '/?s={s}' ),
esc_attr( $form_id ),
esc_html( $label ),
esc_attr( $form_id ),
$value_or_placeholder,
esc_attr( $search_text ),
esc_attr( $button_text )
);
} else {
$form .= sprintf(
'%s<meta itemprop="target" content="%s"/><input itemprop="query-input" type="search" name="q" %s="%s" /><input type="submit" value="%s" /></form>',
esc_html( $label ),
home_url( '/?s={s}' ),
$value_or_placeholder,
esc_attr( $search_text ),
esc_attr( $button_text )
);
}
} else {
$form = sprintf(
'<form method="get" class="searchform search-form" action="%s" role="search" >%s<input type="text" value="%s" name="q" class="s search-input" onfocus="%s" onblur="%s" /><input type="submit" class="searchsubmit search-submit" value="%s" /></form>',
// home_url( '/' ),
home_url( '/search/' ),
esc_html( $label ),
esc_attr( $search_text ),
esc_attr( $onfocus ),
esc_attr( $onblur ),
esc_attr( $button_text )
);
}
return $form;
}
add_filter( 'genesis_attr_search-form', 'custom_attributes_search_form' );
/**
* Add attributes for search form.
*
* @since 2.2.0
*
* @param array $attributes Existing attributes.
*
* @return array Amended attributes.
*/
function custom_attributes_search_form( $attributes ) {
$attributes['action'] = home_url( '/search/' );
return $attributes;
}
Bước 3: Tạo một file có tên template_google-cse.php trong thư mục child theme dán mã bên dưới.
<?php
/*
Template Name: Google Custom Search
Description: Google Custom Search
Created by John Levandowski
Modified by: Rowell Dionicio and Sridhar Katakam
*/
# Force full width content
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
# Remove the breadcrumb
// remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
# Remove the post content
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
# Add custom post content
add_action( 'genesis_entry_content', 'custom_do_post_content' );
/**
* Outputs custom post content
*
* @return void
*/
function custom_do_post_content() {
get_search_form(); ?>
INSERT GOOGLE CUSTOM SEARCH CODE HERE
<?php }
genesis();
Bạn chú ý đến đoạn chèn code google tại đây? Dán mã lúc nẫy đã được sao chép.
Dưới đây là một ví dụ đầy đủ để bạn tham khảo:
<?php
/*
Template Name: Google Custom Search
Description: Google Custom Search
Created by John Levandowski
Modified by: Rowell Dionicio and Sridhar Katakam
Site: https://rowell.dionicio.net/adding-google-custom-search-to-genesis-framework/, https://sridharkatakam.com/add-google-custom-search-genesis/
*/
# Force full width content
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
# Remove the breadcrumb
// remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
# Remove the post content
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
# Add custom post content
add_action( 'genesis_entry_content', 'custom_do_post_content' );
/**
* Outputs custom post content
*
* @return void
*/
function custom_do_post_content() {
get_search_form(); ?>
<div id='cse' style='width: 100%;'>Loading</div>
<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {language: 'en', style: google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function() {
var customSearchOptions = {};
var orderByOptions = {};
orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}];
customSearchOptions['enableOrderBy'] = true;
customSearchOptions['orderByOptions'] = orderByOptions;
var customSearchControl = new google.search.CustomSearchControl('003698980430458114438:pxccgvs_fv0', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.enableSearchResultsOnly();
options.setAutoComplete(true);
customSearchControl.draw('cse', options);
function parseParamsFromUrl() {
var params = {};
var parts = window.location.search.substr(1).split('&');
for (var i = 0; i < parts.length; i++) {
var keyValuePair = parts[i].split('=');
var key = decodeURIComponent(keyValuePair[0]);
params[key] = keyValuePair[1] ?
decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
keyValuePair[1];
}
return params;
}
var urlParams = parseParamsFromUrl();
var queryParamName = 'q';
if (urlParams[queryParamName]) {
customSearchControl.execute(urlParams[queryParamName]);
}
}, true);
</script>
<?php }
genesis();
Bước 4: Thêm code bên dưới vào file style.css trong thư lục child theme
.entry-content .search-form {
width: 100%;
max-width: 800px;
}
.search-form input {
float: left;
font-size: 16px;
}
.content .search-form input[type="search"] {
width: 80%;
margin-right: 2%;
}
.search-form input[type="submit"] {
width: 18%;
margin-top: 0;
}
#cse .gsc-control-cse {
padding: 0;
border: none;
}
#cse .gsc-above-wrapper-area {
border-bottom: none;
padding: 0;
}
#cse table {
line-height: 1;
margin-bottom: 0;
}
#cse tbody {
border-bottom: none;
}
#cse .gsc-selected-option-container {
max-width: none;
}
#cse .gsc-result .gs-title {
height: auto;
}
@media only screen and (max-width: 661px) {
.search-form input {
float: none;
}
.search-form input[type="search"] {
width: 100%;
margin-right: 0;
margin-bottom: 10px;
}
.search-form input[type="submit"] {
width: auto;
}
}
Bước 5: Tạo trang có tiêu đề Search, áp dụng mẫu trang là Google Custom Search và xuất bản nó trong khi đảm bảo rằng (phần cuối cùng của permalink) là search.
