Tạo query var và làm đẹp permalink cho WordPress

Cập nhật lần cuối vào

Đối với các dự án WordPress bạn có thể sử dụng các query var có sẵn hoặc thêm query var tùy chỉnh bất kỳ. Điều bạn quan tâm ở đây là làm thế nào để biến query var này thành đường dẫn đẹp để tốt cho SEO trên blog của bạn.

Tạo đường dẫn thân thiện cho SEO trong WordPress

Bài viết này mình sẽ hướng dẫn cho các bạn cách tạo thêm query var và tùy chỉnh rewrite rule cho WordPress. Nội dung bài viết này cũng chỉ để các bạn tham khảo cách thực hiện, không phù hợp với các bạn đã biết rồi hoặc nếu bạn vẫn chưa biết gì về code PHP cũng như các hàm của WordPress thì làm cũng hơi khó.

Xem thêm: Những kiểu permalink tốt cho SEO trong WordPress

Đối với code bổ sung cho WordPress thì bạn có thể viết ở giao diện hoặc plugin đều được. Trong bài hướng dẫn này mình đang thực hiện ở plugin nên đôi khi có những hàm liên quan đến plugin thì các bạn chú ý nhé.

Đề bài được đưa ra ở đây là mình có một post type với tên là animation, bây giờ mình muốn hiển thị nó theo kiểu tenmien.com/page-slug/animation-slug/. Với yêu cầu của đề bài được đưa ra như vậy thì đầu tiên là mình sẽ tạo một page trước, cụ thể hơn là mình tạo page với name là shows.

Tiếp đến, mình tạo hàm thêm query var cho WordPress, mình đặt tên là animation. Bạn nên đặt tên sao cho dễ nhận biết và tránh trùng với các tên có sẵn của WordPress cũng như trung với các plugin khác.

function hocwp_horriblesubs_query_vars($vars) {
    $vars[] = 'animation';
    return $vars;
}
add_filter('query_vars', 'hocwp_horriblesubs_query_vars');

Bây giờ thì bạn có thể sử dụng biến animation ở bất kỳ nơi đâu trên trang WordPress của bạn. Trong trường hợp bên trên, bạn cũng có thể áp dụng các hàm điều kiện để thêm query var vào một trang cố định nào đấy.

Để lấy giá trị thì bạn dùng hàm: get_query_var

Tiếp đếp, bạn sẽ thêm rewrite rule để WordPress nhận biết được khi bạn truy vấn xem bài viết trên trang thông qua đường dẫn.

function hocwp_horriblesubs_rewrite_rules($rules) {
    $new_rule = array('shows/([^/]+)/?$' => 'index.php?pagename=shows&animation=$matches[1]', 'top');
    $rules = $new_rule + $rules;
    return $rules;
}
add_filter('rewrite_rules_array', 'hocwp_horriblesubs_rewrite_rules');

Sau khi thực hiện xong bước này thì bạn đã có thể truy cập vào trang xem bài viết theo kiển tenmien.com/shows/conan/. Với shows là name của trang, còn conan là name của truyện. Tuy nhiên, bạn sẽ không thấy được nội dung của truyện mà có thể bạn sẽ nhận thấy thông báo lỗi 404 vì bạn chưa thông báo lưu rewrite rule vào cơ sở dữ liệu.

Bạn có thể cập nhật rewrite rule bằng cách vào trang Permalinks trong admin hoặc sử dụng hàm flush_rewrite_rules, nếu sử dụng hàm này thì bạn nên gọi 1 lần duy nhất. Bạn có thể gọi hàm này ngay sự kiện plugin được kích hoạt hoặc giao diện được kích hoạt.

function hocwp_horriblesubs_template_redirect() {
    if(is_page()) {
        $permalink_struct = get_option('permalink_structure');
        if(empty($permalink_struct)) {
            return;
        }
        $option_data = hocwp_horriblesubs_get_option();
        $single_page = hocwp_get_value_by_key($option_data, 'single_page');
        $show_page = get_post($single_page);
        $post_id = get_query_var('page_id');
        $pagename = get_query_var('pagename');
        if((hocwp_id_number_valid($post_id) && $post_id == $single_page) || ($pagename == $show_page->post_name)) {
            $query_var = get_query_var('animation');
            if(!hocwp_id_number_valid($query_var)) {
                return;
            }
            $animation = hocwp_horriblesubs_get_current_animation_single();
            if(hocwp_id_number_valid($animation)) {
                $animation = get_post($animation);
                if(is_a($animation, 'WP_Post')) {
                    $page = get_post($post_id);
                    if(!is_a($page, 'WP_Post')) {
                        $page = get_page_by_path($pagename);
                    }
                    if('page' == $page->post_type) {
                        $url = trailingslashit(get_permalink($page));
                        $url .= trailingslashit(trim(sanitize_title_for_query($animation->post_name)));
                        exit(wp_redirect($url));
                    }
                }
            }
        }
    }
}
add_action('template_redirect', 'hocwp_horriblesubs_template_redirect');

Tiếp đếp bạn sẽ chuyển tiếp người dùng sang đường dẫn đẹp của WordPress nếu blog có hỗ trợ khi người dùng xem trang bằng query var thông thường trong url: tenmien.com/shows/?animation=conan, ở đây bạn sử dụng action template_redirect và nhớ là kiểm tra xem blog có bật chế độ permalink đẹp hay không nhé.

Các vấn đề còn lại của bạn là chuyển tiêu đề của trang thành tiêu đề của bài viết, chuyển tiêu đề trên tab trình duyệt thành tiêu đề của bài viết cũng như thêm vào body class một cái tên nào đó để tiện cho việc code css.

function hocwp_horriblesubs_the_title($title, $post_id) {
    if(is_page()) {
        $option_data = hocwp_horriblesubs_get_option();
        $single_page = hocwp_get_value_by_key($option_data, 'single_page');
        if($post_id == $single_page) {
            $animation = hocwp_horriblesubs_get_current_animation_single();
            if(hocwp_id_number_valid($animation)) {
                $animation = get_post($animation);
                if(is_a($animation, 'WP_Post')) {
                    $page = get_post($post_id);
                    if('page' == $page->post_type) {
                        $title = $animation->post_title;
                    }
                }
            }
        }
    }
    return $title;
}
add_filter('the_title', 'hocwp_horriblesubs_the_title', 10, 2);

function hocwp_horriblesubs_custom_body_class($classes) {
    if(is_page()) {
        $option_data = hocwp_horriblesubs_get_option();
        $single_page = hocwp_get_value_by_key($option_data, 'single_page');
        if(get_the_ID() == $single_page) {
            $classes[] = 'single-animation';
        }
    }
}
add_filter('body_class', 'hocwp_horriblesubs_custom_body_class');

function hocwp_horriblesubs_change_wp_title($title) {
    if(is_page()) {
        $option_data = hocwp_horriblesubs_get_option();
        $single_page = hocwp_get_value_by_key($option_data, 'single_page');
        if(get_the_ID() == $single_page) {
            $animation = hocwp_horriblesubs_get_current_animation_single();
            if(hocwp_id_number_valid($animation)) {
                $animation = get_post($animation);
                if(is_a($animation, 'WP_Post')) {
                    $title = $animation->post_title;
                }
            }
        }
    }
    return $title;
}
add_filter('wp_title', 'hocwp_horriblesubs_change_wp_title');

Như vậy là bạn đã hoàn thành được bài viết hướng dẫn xem nội dung bài viết trên trang và tùy chỉnh url đẹp cho WordPress. Nếu blog dùng kiểu permalink mặc định thì bạn sẽ thấy url dạng: tenmien.com/?page_id=9&animation=conan hoặc tenmien.com/?pagename=shows&animation=conan. Nếu bạn có bật kiểu đường dẫn đẹp trên WordPress thì bạn sẽ xem bài viết theo đường dẫn: tenmien.com/shows/?animation=conan, nếu bạn có kiểm tra và chuyển tiếp sang kiểu đường dẫn đẹp cho bài viết trên trang thì bạn sẽ có đường dẫn: tenmien.com/shows/conan/. Chúc bạn thành công.