Tạo công cụ tìm kiếm google search cho wordpress

Tạo công cụ tìm kiếm google search cho wordpress

Thảo luận trong 'Wordpress' bắt đầu bởi ntphong, 26/5/15.

Tạo công cụ tìm kiếm google search cho wordpress

Wordpress, 26/5/15. Trả lời: 0, Đọc: 816.

ntphong ntphong

Lượt xem: 816

Bạn đang xem:

Tạo công cụ tìm kiếm google search cho wordpress

Coppy cùng chia sẻ nhé bạn!
  1. ntphong

    ntphong Administrator Staff Member

    Tham gia ngày:
    25/12/14
    Bài viết:
    48,139
    Trang chủ:

    loading...
    Trong bài viết này Visaonho sẽ hướng dẫn các bạn đưa công cụ Google Custom Search (Google CSE) vào thay thế công cụ tìm kiếm mặc định của wordpress mà vẫn giữ được thanh tìm kiếm mặc định của wordpress. Nói thì hơi khó hiểu, các bạn thử tìm kiếm trên blog visaonho để mục sở thị nhé. Hiện blog visaonho cũng đang sử dụng Google Custom Search cho chức năng tìm kiếm của mình.

    Cách này áp dụng hầu hết được cho tất cả các theme wordpress, mình đã test rất nhiều theme rồi mới viết bài này. Có thể áp dụng cho một số theme framework, một số framework đặc biệt mình sẽ có bài hướng dẫn riêng. Nếu bạn nào đang dùng Genesis thì xem bài hướng dẫn Tạo công cụ tìm kiếm Google search cho Genesis child theme.

    Bắt đầu bắt tay vào công việc nào.

    Bước 1: Làm việc trên Google CSE
    Truy cập vào www.google.com/cse, đăng nhập bằng tài khoản google (tài khoản gmail) của bạn, tài khoản này thì hầu như ai cũng có rồi, nếu chưa có thì bạn là người thiên cổ rồi [​IMG] đăng ký đi nhé.

    Sau khi đăng nhập, nhìn vào phía trên bên trái » click vào New search engine » làm theo hình (xem hình) » tạo xong

    Phần Edit search engines > ở tab Layout chọn Results only > Save & Get code (xem hình). Các bạn có thể tùy biến thêm giao diện tùy ý.

    – Lưu lại code chút nữa dùng tới

    [​IMG]

    Lưu ý là phần Specify the query parameter name embedded in the url: bạn giữ nguyên như mặc định là q, nếu bạn nào đã tạo sẵn công cụ google CSE trước đó thì kiểm tra lại xem đúng chưa.

    Bước 2: Làm việc với code của theme WordPress
    – Bạn kiểm tra xem trong thư mục chính của theme có file searchform.php chưa.

    [​IMG]

    Trường hợp 1: Nếu chưa có thì tạo mới một file searchform.php với nội dung như sau rồi cho vào thư mục chính của theme.

    1
    2
    3
    4
    5
    6
    7
    8
    9

    <?php
    /**
    * @author visaonho.com
    */
    ?>
    <form id="searchform" method="get" action="http://visaonho.com/results">
    <input type="text" id="q" name="q" value="<?php the_search_query(); ?>">
    <input type="submit" value="Search">
    </form>
    Trường hợp 2: Nếu trong thư mục chính đã có sẵn file searchform.php, mở và chỉnh sửa file này bằng notepad++.

    Có thể trong một số theme, đoạn code trong file này sẽ khác nhau đôi chút, tuy nhiên bạn chỉ cần chú ý tới 2 yếu tố trong khoanh đỏ.

    [​IMG]

    – action trong dòng <form method=”get” thay bằng url dẫn đến trang kết quả tìm kiếm, sẽ làm ở bước sau. ví dụ trang kết quả tìm kiếm của mình là http://visaonho.com/results

    – Dòng <input type=”text”, một số theme là type=”search”, tìm name=”s” thay bằng name=”q”

    Kết quả sau khi thay xong như hình dưới.

    [​IMG]

    Vì sao mình lại chỉ thay 2 yếu tố trên mà không thay luôn code như trên trường hợp chưa có file searchform.php ? Bạn để ý sẽ thấy code trong file searchform.php ở các theme khác nhau sẽ có các thẻ div khác nhau được thêm vào nhằm mục đích tạo dáng cho chúng. Nếu áp dụng chung code cho các theme thì thanh search sẽ thành râu ông nọ cắm cằm bà kia :D.

    Sau khi đã làm việc xong với file searchform.php, bạn tiếp tục tạo mới một file page_results.phpvới nội dung

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34

    <?php
    /*
    Template Name: Search Results
    */
    ?>

    <?php get_header(); ?>

    <div id="primary">
    <div id="content" role="main">

    <?php while ( have_posts() ) : the_post(); ?>

    <!-- This tag will render search results: -->
    <script>
    (function() {
    var cx = '013245996557864292702:ajqrjb0bkjw';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
    '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
    })();
    </script>
    <gcse:searchresults-only></gcse:searchresults-only>

    <?php endwhile; // end of the loop. ?>

    </div><!-- #content -->
    </div><!-- #primary -->
    <?php get_footer(); ?>
    Các bạn tùy biến các thẻ div, id cho phù hợp với theme của mình đang sử dụng nhé.

    Download file searchform.php và page_results.php Download nhớ mở ra và chỉnh sửa lại các thông số cho phù hợp trước khi up lên host.

    Bước 3: Làm việc trên blog WordPress
    Tạo mới một page trên blog với title results, nội dung để trống. Phần Template chọn Search Results (xem ảnh)

    Lưu ý đường link của page results này phải trùng với link bạn đã thay vào action trong file searchform.php

    Đa số các blog đều có sẵn thanh Search và hiển thị nó ra ngoài trang chủ, còn nếu bạn không thấy thanh search này ở đâu thì vào phần quản lý widget và kéo widget search vào chỗ nào bạn thích.

    Demo các bạn search thử trên blog visaonho.com nhé

    Bài viết này mình đã dành rất nhiều tâm huyết và thời gian, yêu cầu mọi người tôn trọng quyền tác giả blog Visaonho nhé. Nếu có thắc mắc hay khó khăn thì để lại comment bên dưới mình sẽ trợ giúp.


    Theo: Visaonho.com
     

    Diễn đàn Seo

    Tiêu đề: Tạo công cụ tìm kiếm google search cho wordpress

    Ghi nguồn bài viết www.ntphong.com khi đăng tải lại bài viết này.

  2. Quảng cáo Thành viên VIP



Link hữu ích: @@ giàn phơi thông minh, giàn phơi quần áo, giàn phơi quần áo thông minh, giàn phơi quần áo, thùng rác, sim tra sau, giàn phơi thông minh, can ho river city, Toyota camry, can ho novaland @@