Hướng dẫn sử dụng Custom Post Type UI

Hướng dẫn sử dụng Custom Post Type UI ✅ Cách sử dụng custom post type UI ✅ Sử dụng plugin custom post type UI ✅ Get Custom post type thachpham,…..

Trong bài viết hôm nay, Toàn sẽ hướng dẫn cho các bạn xử lý giải quyết về những cụm từ khóa trên đây. Bạn biết không, WordPress cung cấp cho người dùng rất nhiều kiểu dữ liệu như post, page,…v….v….Và chủ đề ngày hôm nay đó chính là “Custom Post Type UI”.

Custom Post Type UI là gì?

Custom Post Type Ui là một plugin cho phép bạn chia post type mặc định của WP ra thành nhiều dạng post type như ý muốn và mọi chức năng đều giống như Post mặc định.

Cách sử dụng custom post type UI

Dưới đây là những bước tạo và thiết kế giao diện khi sử dụng plugin Custom Post Type Ui. Mời các bạn xem chi tiết từng bước như dưới đây:

Bước 1: Bạn cần tài và cài đặt plugin Custom Post Type UI

Link tải về: https://vi.wordpress.org/plugins/custom-post-type-ui/

Bước 2: Tạo tên Post Type theo ý muốn

Các bạn làm theo từng bước như hình nhé! Sau khi nhấn Add Post Type thì lúc này bên thanh menu admin WP sẽ xuất hiện menu Sản Phẩm.

Tại đây, ta có 2 trường hợp như sau:

Trường hợp 1: Nếu bạn viết bài giống như post type mặc định thì bài viết theo mục sản phẩm có dạng link như domain.com/san-pham/bai-viet-1 và điều này bài viết sẽ hiển thị như các bài viết bình thường. Tuy nhiên, nếu bạn truy cập domain.com/san-pham thì sẽ báo lỗi 404 nhé. vậy làm sao để truy cập được dạng domain.com/san-pham ? mời bạn xem trường hợp 2.

Trường hợp 2: Để truy cập được như dạng link ở trên và thiết kế giao diện riêng cho mỗi menu post thì mời bạn xem tiếp bước 3 trong bài hướng dẫn sử dụng Custom Post Type UI.

Bước 3: Bật Has Archive và thêm nhiều chức năng cho post type ui

Các bạn tìm mục và làm theo như hình trên nhé. Ngay lúc này, đường dẫn domain.com/san-pham đã truy cập được rồi nha và giờ ta đi thiết kế giao diện trang sản phẩm thôi.

Bước 4: Thiết kế giao diện sản phẩm

Trước tiên, bạn cần vào theme hoặc theme child để tạo ra 1 file có tên là archive-san-pham.php

Nội dung code cho file như sau:

Hàm get header và footer

<!--Hrader-->
<?php get_header();?>

Nội dung code hiển thị

<!--Footer-->
<?php get_footer();?>

Code tiêu đề mục sản phẩm

<div class="product row large-columns-1 medium-columns- small-columns-1" style="padding: 20px 0;">
<h1 class="home-title page-title is-large uppercase"><span class="home-title-1">Bảo Hiểm PJICO Sài Gòn</span></h1>
</div>

Code nội dung bài viết hiển thị theo mục sản phẩm

<!--Hiển thị bài viết chuyên mục-->
<?php 
  $args = array(
    'post_status' => 'publish',
    'posts_per_page' => -1,
    'post_type'      => 'san-pham'
  );
  $the_query = new WP_Query( $args );
?>
<?php if( $the_query->have_posts() ): ?>

<div class="product row large-columns-3 medium-columns- small-columns-1">
<?php while( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <div class="col post-item">
    	<div class="col-inner">
            <!--Hiển thị hình ảnh bài viết-->
            <div class="product-image">
                <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo the_post_thumbnail() ?></a>
            </div>
                    
            <!--Hiển thị tiêu đề bài viết-->                        
            <h2 class="product-h2"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
            
            <div class="excerpt">
            	<?php
                    $excerpt = get_the_excerpt();
                    $excerpt = substr($excerpt, 0, 260);
                    $result = substr($excerpt, 0, strrpos($excerpt, ' '));
                    echo $result;
                    ?>
            </div>
        </div>
    </div>
<?php endwhile; ?>
</div>
<?php endif; ?>
<?php wp_reset_query(); ?>
<!--End Hiển thị bài viết chuyên mục-->

Một chút CSS cho nó sinh động

<style>
.product .col-inner{
    border: 1px solid #eef1fd;
    -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
    -ms-box-shadow: 0 1px 1px rgba(0,0,0,.04);
    box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
    background: white;
    padding: 20px;
}

.product .col-inner:hover{box-shadow: 0px 0px 35px 0px rgb(45 192 248 / 30%);transition: all 0.2s ease-in-out 0s;}

.product-h2{font-size:18px;margin: 0;}
</style>

Xem kết quả tại: Các gói bảo hiểm Petrolimex

Thông tin liên hệ Toancr

Hi vong, bài viết hướng dẫn sử dụng Custom Post Type UI  của Toancr sẽ có ích cho các bạn đọc. Toancr mang đến cho bạn những thông tin mới nhất về mua hàng Online. Cập nhật, chia sẻ, review những sản phẩm và đời sống giúp người mua hàng tốt hơn. Dưới đây là thông tin liên hệ Toàn nếu bạn có nhu cầu thiết kế website

• Điện thoại: 0935.961.044 – Zalo: 0346.260.994
• Email: info@camranhmedia.com | dungtoan96@gmail.com
• Website: toancr.com | camranhmedia.com
• Fanpage: fb.com/camranhmedia