Aug
8
2011

Thiết kế theme WP – phần 12: làm việc với Category & Search Form

Bạn đã học được rất nhiều thứ trong quá trình phát triển giao diện cho WordPress thông qua các bài viết trong chuỗi bài viết thiết kế giao diện WordPress. Hôm nay, chúng ta sẽ cùng nghiên cứu về category(danh mục) và form tìm kiếm.

Làm việc với Category

Trong WordPress, category được gọi thông qua hàm wp_list_categories(). Tuy nhiên hiện nay, với sự hỗ trợ của Menu, category ít được sử dụng tới và hầu như chỉ được sử dụng trong việc tạo archive hoặc thể hiện thêm các thông tin hỗ trợ trong trang 404 là chủ yếu. Vai trò của Category đã được giảm đi khá nhiều trong quá trình xây dựng giao diện của WordPress.

Để sử dụng categry bạn làm như sau:

<?php wp_list_categories( $args ); ?>

Thời điểm hiện nay, việc xuất ra danh sách category hầu như không còn cần thiết nhiều trên các trang chính vì lý do đã có menu hỗ trợ như đã nói ở trên. Tuy nhiên, việc tìm hiểu về category và cách sử dụng có thể giúp bạn học hỏi thêm nhiều điều điều để tùy biến khi xây dựng website của mình.

Dưới đây là một vài ví dụ về cách sử dụng hàm wp_list_categories() mà tôi lấy ở phần codex của WordPress.

Lọc giá trị categry

<ul>
  <?php wp_list_categories('orderby=name&include=3,5,9,16'); ?>
</ul>

Đoạn code trên đó sát nghĩa là: lấy danh sách category 3,5,9,16 và sắp xếp theo tên theo thứ tự tăng dần.

Bỏ qua một số category không mong muốn

<ul>
<?php wp_list_categories('orderby=name&show_count=1&exclude=10'); ?>
</ul>

Theo đoạn mã trên, chúng ta sẽ lấy hết category và bỏ đi category có ID = 10. Ngoài ra show_count=1 cho phép hiển thị thêm số lượng bài viết ở mỗi category.

Làm việc với Search Form

Form search được wordpress xây dựng sẵn và được gọi thông qua hàm get_search_form(). Cách sử dụng như sau:

<?php get_search_form( $echo ); ?>

Nếu bạn có một file searchform.php trong theme, hệ thống sẽ tự động gọi file này khi được gọi get_search_form(), nếu không search form sẽ được xây dựng dựa vào cấu trúc định sẵn của wordpress. Ngoài ra, bạn có thể xây dựng một search form riêng dựa vào search form của wordpress bằng cách overide lại cấu trúc.

function my_search_form( $form ) {
    $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
    <div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
    </div>
    </form>';
    return $form;
}
add_filter( 'get_search_form', 'my_search_form' );

Đoạn mã trên được đặt vào functions.php của theme để overide lại hàm search form như đã nói ở trên.

Còn kết quả tìm kiếm, chúng ta sẽ hiển thị ở trang search.php nhé.

Bài có liên quan

Bài viết liên quan

Tác giả: Nguyễn Duy Nhân

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn.

10 bình luận + Bình luận ngay

  • bạn nên cho phong nền 2 bên web màu đen thì nhìn có lẻ đẹp hơn đó bạn =)) =)) =)) =))

  • Rất kết loạt bài này của Nhân, tự nhủ khi nào rảnh hơn sẽ nghiền ngẫm code từ html, css, sql với php để chiến em WordPress này :D

    Thi thoảng vẫn mang mấy bài này của Nhân ra để “tra cứu”!

    Blog đừng vì lí do nào đó sập trước khi mình kịp “rảnh hơn” nhé B-)

    • Có một số lý do khiến cho website vnwebmaster.com ngày hôm qua bị sập khiến bạn lo sợ nhanweb cũng chịu chung số phận vào một ngày gần đây ah ;):x

      Hãy cứ yên tâm. Chừng nào mình còn có đủ tiền ăn cơm hàng ngày thì chừng đó NhanWeb còn sống. Chừng nào mình nhịn đói suốt 1 tháng thì NhanWeb mới có nguy cơ sập.

      • hehe vậy yên tâm hơn rồi, chúc cho bạn cơm no áo ấm ;)

      • “”Hãy cứ yên tâm. Chừng nào mình còn có đủ tiền ăn cơm hàng ngày thì chừng đó NhanWeb còn sống. Chừng nào mình nhịn đói suốt 1 tháng thì NhanWeb mới có nguy cơ sập.”"
        =))
        Bác nói gì ghê vậy?
        :kill:
        Chúc bác cuối tuần vui vẻ, thỉnh thoảng vẫn ghé qua nhà bác chơi nhưng chưa có nhiều thời gian mò mẫm code nên chẳng biết comment thế nào

  • thanks anh nhiều nhé những bài của anh viết rất hay. mong anh có thêm nhiều bài viết hơn nữa để em có thể học hỏi thêm =)) >:D<

  • Xin chào anh Nhân!
    Em có vài điều mong được anh chỉ giáo. Em đang làm một trang web về giới thiệu sản phẩm sử dụng wordpress, nhờ có các bài viết về wordpress theme của anh mà em đã convert HTML to wordpress được rồi. Cụ thể là em show được “Danh Mục Sản Phẩm (như: Bánh, Kẹo, Mứt…)” và toàn bộ danh sách sản phẩm của các danh mục đó. Nhưng em sử dụng một vài table tự tạo trong database, ví dụ 2 tables: product_category (category_id, category_name), products (product_id, product_name, picture_url, category_id) chẳng hạn.
    Vấn đề ở chỗ là: làm sao để khi em click vào link của từng Danh Mục Sản Phẩm thì sẽ show ra danh sách sản phẩm của Danh Mục đó. Nếu code PHP thông thường thì truyền GET trên link dễ dàng, chỉ có điều wordpress em chưa biết làm sao cả.
    Rất mong được anh Nhân dành chút thời gian khi rảnh chỉ em vấn đề này nhé. Cám ơn anh Nhân nhiều.

    • Bạn có thể dùng GET và POST để truyền và lấy Parameter từ URL bình thường giống như cách bạn đang code PHP bình thường. Ngoài ra WordPress cũng có cơ chế giúp bạn truyền Parameter trên URL. Mình sẽ giành một bài viết cho nó trong thời gian tới, giờ hãy thử sử dụng $_GET và $_POST và đón đọc nhé.

      Trân trọng.

  • Bác nhân em định Contact nhờ bác chút việc mà gửi qua form “liên hệ” toàn báo ko gửi được :(

  • cảm ơn tài liệu thiết kế theme WP của anh.nó rất có ích cho người tự học như em.chúc anh sức khỏe nhé…

Mạng xã hội