Hầu hết tất cả các trang web blog đều có tính năng tìm kiếm, trong wordpress cũng không ngoại lệ. Hôm nay chúng ta sẽ xây dựng form search cho wordpress và custom trang search.php hiển thị kết quả tìm kiếm trong wordpress.

Xây dựng Search form trong wordpress

Search form là một form HTML cho người dùng nhập từ khóa tìm kiếm và form có nhiệm vụ gửi các thông tin tìm kiếm đó đến server để xử lý tìm kiếm.

Thông thường người ta để form search trong phần header hay sidebar, vì đây là tính năng sẽ hiển thị ở hầu hết các trang trong site của bạn.

Ban mở file header.php lên sau đó copy đoạn code sau vào nơi muốn hiển thị form search.

1
2
3
4
5
6
7
<!--
<div title="Tìm kiếm" id="search">
    <form action="http://bcdonline.net" id="searchform" method="get">
        <input type="text" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '')  {this.value = 'Search';}" id="s" name="s" value="Search" />
    </form>
</div>
-->

Sau đó lưu lại, ban đầu nhìn hơi cùi bạn phải định dạng css lại cho form, kết quả như sau.

Search trong wordpress

Bạn nào thích thêm nút tìm kiếm vào thì cho nó thêm thẻ input với type=”button” mình chỉ thích thế nhập vào và enter là xong. hi

Trong form trên mình tích hợp theme tính năng value mặc định là từ search sau khi click vào tự động mất và click ra chổ khác thì từ search sẽ hiện bên trong text box.

Tạo trang search.php trong WordPress

Tiếp theo là sẽ tạo trang hiển thị kết quả tìm kiếm trong wordpress bạn phải tạo file search.php, file này bạn sử dụng các định dạng về cấu trúc HTML giống như trang index.php chỉ thay đổi bên nội dung.

Bạn mở file index.php lên và save as với tên search.php sau đó xóa tất cả các đoạn code bên trong div content thay vào đoạn code sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--
<div id="content" role="main">
    <div id="searchResults">      
        <h2>Kết Quả Tìm</h2>
        <?php if(have_posts()) : while(have_posts()) : the_post() ?>
        <div class="search">
            <h1><?php the_title();?></h1>
                <img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo get_post_meta($post->ID,'Thumb',true)?>&a=t&w=130&h=130" border="0" />
                <?php the_content_rss('', false,'', 40);?>
            </p>
        </div>
            <?php endwhile; else: ?>
            <p>Tìm không ra! :(</p>
            <?php endif; ?>
    </div>
</div>
-->

Trong đó bao gồm một cấu trúc điều khiển if để hiển thị nếu tìm k có dữ liệu, nghĩa là có dữ liệu mới xuất không thì sẽ xuất thông báo “Tìm không ra!”.

Các hàm cơ bản trong đó mình đã trình bày ở các phần trước của chuyên mục WordPress, bao gồm lun cả hiển thị ảnh bằng timthumb.php.

Trong đoạn code trên kết quả sẽ hiển thị tiêu đề, hình và phần tóm tắt nội dung, nếu các bạn k muốn hiển thị hình ảnh thì bỏ đi đoạn hiển thị hình ảnh…

Tiếp đến bạn style css lại cho đẹp trai và tậng hưởng đi! hii. Giả sử mình search từ khóa wordpress sẽ hiển thị kết quả sau:

xay-dung-chuc-nang-tim-kiem-trong-wordrpess

 

Kết luận: Vậy là hoàn thành chức năng tìm kiếm, tùy hơi cùi nhưng hãy tìm hiểu và trang điểm nó lên nha! Chúc thành công.

ĐỂ LẠI PHẢN HỒI CỦA BẠN TẠI ĐÂY

Phản hồi về bài viết này

NO COMMENTS

LEAVE A REPLY


*