Tạo portfolio filter WordPress

5 tháng ago, WordPress Plugin, Views

Giới thiệu về Portfolio Filter trong WordPress

Portfolio filter (bộ lọc danh mục) là một tính năng quan trọng cho bất kỳ trang web portfolio nào, đặc biệt là những trang web trưng bày các dự án đa dạng. Nó cho phép người dùng dễ dàng tìm kiếm và xem các dự án cụ thể mà họ quan tâm bằng cách lọc theo danh mục, kỹ năng, loại dự án hoặc bất kỳ tiêu chí nào khác. Điều này cải thiện trải nghiệm người dùng, giúp họ tìm thấy những gì họ cần một cách nhanh chóng và hiệu quả. Một trang portfolio không có bộ lọc có thể gây khó khăn cho người xem, đặc biệt nếu số lượng dự án trưng bày lớn. Họ sẽ phải cuộn qua tất cả các dự án để tìm kiếm cái họ cần, điều này có thể gây khó chịu và khiến họ rời khỏi trang web của bạn.

Bài viết này sẽ hướng dẫn bạn cách tạo portfolio filter trong WordPress một cách chi tiết, sử dụng cả plugin miễn phí và các tùy chọn tùy chỉnh hơn.

Tại sao cần Portfolio Filter?

Portfolio filter mang lại nhiều lợi ích quan trọng cho trang web của bạn:

Cải thiện trải nghiệm người dùng: Giúp người dùng dễ dàng tìm thấy các dự án họ quan tâm.
Tăng khả năng tìm kiếm: Giúp người dùng nhanh chóng tìm thấy các dự án cụ thể dựa trên các tiêu chí khác nhau.
Hiển thị chuyên nghiệp: Thể hiện sự tổ chức và chuyên nghiệp trong cách bạn trình bày các dự án.
Giữ chân người dùng lâu hơn: Giúp người dùng khám phá nhiều dự án hơn, từ đó kéo dài thời gian họ ở lại trang web của bạn.

Các Phương Pháp Tạo Portfolio Filter WordPress

Có nhiều cách để tạo portfolio filter trong WordPress, từ việc sử dụng plugin đơn giản đến việc tùy chỉnh code phức tạp hơn. Dưới đây là một số phương pháp phổ biến:

Sử dụng Plugin: Đây là cách đơn giản và nhanh chóng nhất, đặc biệt đối với người dùng không có nhiều kinh nghiệm lập trình. Có nhiều plugin miễn phí và trả phí có sẵn trên WordPress.org.
Tùy chỉnh Code (Sử dụng Child Theme): Phương pháp này đòi hỏi kiến thức về HTML, CSS và PHP, nhưng cho phép bạn tạo portfolio filter hoàn toàn phù hợp với thiết kế và chức năng mong muốn.
Page Builders (Ví dụ: Elementor, Beaver Builder): Nhiều page builder phổ biến cung cấp các widget hoặc module tích hợp sẵn để tạo portfolio filter một cách trực quan.

Sử Dụng Plugin để Tạo Portfolio Filter

Đây là phương pháp đơn giản nhất để thêm portfolio filter vào trang web WordPress của bạn. Dưới đây là hướng dẫn sử dụng một plugin phổ biến:

Ví dụ: Sử dụng Plugin “Essential Grid”

Essential Grid là một plugin mạnh mẽ cho phép bạn tạo các lưới (grid) hiển thị nội dung đa dạng, bao gồm portfolio. Nó cung cấp nhiều tùy chọn tùy chỉnh và bộ lọc để tạo ra một portfolio chuyên nghiệp.

Cài đặt và Kích hoạt Plugin: Tìm kiếm “Essential Grid” trong kho plugin WordPress và cài đặt. Sau khi cài đặt, kích hoạt plugin.
Tạo Grid Mới: Trong dashboard WordPress, tìm đến mục “Essential Grid” và chọn “New Grid”.
Chọn Nguồn Dữ Liệu: Chọn nguồn dữ liệu cho grid của bạn (ví dụ: Posts, Custom Posts). Nếu bạn đã tạo custom post type cho portfolio, hãy chọn nó.
Thiết lập Layout: Chọn một layout phù hợp với portfolio của bạn. Essential Grid cung cấp nhiều layout khác nhau để bạn lựa chọn.
Tạo Bộ Lọc (Filters): Trong phần “Navigation Filters”, bạn có thể tạo các bộ lọc dựa trên danh mục, tag hoặc các taxonomy khác.
Tùy Chỉnh Thiết Kế: Tùy chỉnh màu sắc, font chữ, hiệu ứng hover và các yếu tố thiết kế khác để phù hợp với thương hiệu của bạn.
Nhúng Grid vào Trang: Sử dụng shortcode hoặc Gutenberg block để nhúng grid vào trang hoặc bài viết bạn muốn hiển thị portfolio.

Một số plugin khác bạn có thể xem xét:

WordPress Portfolio Plugin – Visual Portfolio: Miễn phí và dễ sử dụng.
Go Portfolio – WordPress Portfolio Plugin: Plugin trả phí với nhiều tính năng nâng cao.
Nimble Portfolio: Đơn giản và hiệu quả.

Tùy Chỉnh Code (Sử Dụng Child Theme)

Phương pháp này đòi hỏi kiến thức về HTML, CSS và PHP. Bạn nên sử dụng child theme để tránh mất các tùy chỉnh khi cập nhật theme chính.

Các Bước Thực Hiện

Tạo Child Theme: Tạo một thư mục cho child theme của bạn trong thư mục `wp-content/themes/`. Tạo hai file `style.css` và `functions.php` trong thư mục này.

Thêm Code vào `style.css`:


/*
Theme Name:   Your Child Theme
Template:     your-parent-theme-name
*/

@import url("../your-parent-theme-name/style.css");

/* Thêm CSS tùy chỉnh của bạn ở đây */

Tạo Custom Post Type cho Portfolio (nếu chưa có): Sử dụng plugin như “Custom Post Type UI” hoặc code trực tiếp vào `functions.php` để tạo custom post type “portfolio”.


function create_portfolio_post_type() {
  register_post_type( 'portfolio',
    array(
      'labels' => array(
        'name' => __( 'Portfolios' ),
        'singular_name' => __( 'Portfolio' )
      ),
      'public' => true,
      'has_archive' => true,
      'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields' ),
      'rewrite' => array( 'slug' => 'portfolio' ),
    )
  );
}
add_action( 'init', 'create_portfolio_post_type' );

Tạo Taxonomy (Danh mục) cho Portfolio (nếu chưa có): Sử dụng plugin hoặc code trực tiếp để tạo taxonomy như “portfolio_category”.


function create_portfolio_category_taxonomy() {
  register_taxonomy(
    'portfolio_category',
    'portfolio',
    array(
      'label' => __( 'Portfolio Categories' ),
      'rewrite' => array( 'slug' => 'portfolio-category' ),
      'hierarchical' => true,
    )
  );
}
add_action( 'init', 'create_portfolio_category_taxonomy' );

Tạo Template cho Portfolio: Tạo một file template (ví dụ: `archive-portfolio.php`) để hiển thị danh sách các dự án portfolio.

Thêm Code PHP để Hiển Thị Bộ Lọc: Trong `archive-portfolio.php`, thêm code PHP để hiển thị danh sách các danh mục portfolio và tạo liên kết lọc.


<?php
$terms = get_terms( array(
    'taxonomy' => 'portfolio_category',
    'hide_empty' => false,
) );

if ( ! empty( $terms ) && ! is_wp_error( $terms ) ) {
    echo '<ul class="portfolio-filter">';
    echo '<li><a href="' . get_post_type_archive_link( 'portfolio' ) . '">All</a></li>';
    foreach ( $terms as $term ) {
        echo '<li><a href="' . get_term_link( $term ) . '">' . $term->name . '</a></li>';
    }
    echo '</ul>';
}
?>

Thêm Code PHP để Lọc Dự Án: Sử dụng `WP_Query` để lấy các dự án portfolio dựa trên danh mục được chọn.


<?php
$term = get_queried_object();

$args = array(
    'post_type' => 'portfolio',
    'posts_per_page' => -1,
    'tax_query' => array(
        array(
            'taxonomy' => 'portfolio_category',
            'field'    => 'slug',
            'terms'    => $term->slug,
        ),
    ),
);

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
        // Hiển thị thông tin dự án (title, thumbnail, excerpt)
    }
    wp_reset_postdata();
} else {
    echo '<p>Không có dự án nào được tìm thấy.</p>';
}
?>

Thêm CSS để Tạo Kiểu cho Bộ Lọc: Thêm CSS vào `style.css` của child theme để tạo kiểu cho bộ lọc và danh sách dự án.

Sử Dụng Page Builders (Ví dụ: Elementor)

Nhiều page builders phổ biến như Elementor, Beaver Builder cung cấp các widget hoặc module tích hợp sẵn để tạo portfolio filter một cách trực quan.

Ví dụ: Sử dụng Elementor

Cài đặt và Kích hoạt Elementor: Tìm kiếm “Elementor” trong kho plugin WordPress và cài đặt. Sau khi cài đặt, kích hoạt plugin.
Tạo Trang Mới hoặc Chỉnh Sửa Trang Hiện Có: Tạo một trang mới hoặc chỉnh sửa trang bạn muốn thêm portfolio.
Sử Dụng Widget “Portfolio”: Tìm widget “Portfolio” trong Elementor và kéo thả vào trang.
Thiết Lập Widget Portfolio:
- Chọn source dữ liệu (custom post type “portfolio”).
- Chọn layout (grid, masonry, carousel).
- Chọn số lượng dự án hiển thị trên mỗi trang.
Thêm Bộ Lọc (Filters): Trong phần “Content” của widget, tìm đến mục “Filters” hoặc “Taxonomy Filter”. Bật tính năng bộ lọc và chọn taxonomy bạn muốn sử dụng (ví dụ: “portfolio_category”).
Tùy Chỉnh Thiết Kế: Tùy chỉnh màu sắc, font chữ, khoảng cách và các yếu tố thiết kế khác để phù hợp với trang web của bạn.
Xuất Bản Trang: Xuất bản trang để xem portfolio filter trên trang web của bạn.

Lời Khuyên và Lưu Ý

Sử dụng Child Theme: Luôn sử dụng child theme khi tùy chỉnh code để tránh mất các tùy chỉnh khi cập nhật theme chính.
Tối Ưu Hóa Hình Ảnh: Đảm bảo rằng hình ảnh portfolio của bạn được tối ưu hóa để cải thiện tốc độ tải trang.
Kiểm Tra Tính Tương Thích: Kiểm tra tính tương thích của plugin và code tùy chỉnh với phiên bản WordPress hiện tại của bạn.
Sao Lưu Dữ Liệu: Sao lưu dữ liệu trang web thường xuyên để phòng ngừa sự cố.

Kết luận

Portfolio filter là một tính năng quan trọng giúp cải thiện trải nghiệm người dùng và trình bày các dự án của bạn một cách chuyên nghiệp. Bằng cách sử dụng plugin, tùy chỉnh code hoặc sử dụng page builders, bạn có thể dễ dàng thêm portfolio filter vào trang web WordPress của mình. Hãy chọn phương pháp phù hợp với kỹ năng và nhu cầu của bạn để tạo ra một portfolio ấn tượng và hiệu quả.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa