Hướng dẫn custom post type trong wordpress sử dụng plugin toolset

Hướng dẫn custom post type trong wordpress sử dụng plugin toolset

Ngày 25 - 02 - 2017 - Tại chuyên mục: Wordpress - Lượt xem: 851

Custom post type trong wordpress là 1 trong những kiến thức quan trọng mà một lập trình viên wordpress chắc chắn phải biết. Có rất nhiều cách để tạo post type trong wordpress nhưng hôm nay mình sẽ hướng dẫn cho các bạn sử dụng plugin toolset để tạo và quản lý custom post type.

1. Custom post type trong wordpress là gì ?

Mặt định khi cài wordpress lên các bạn sẽ thấy phần post (bài viết) và page (trang). 2 phần này có nhiệm vụ xuất bản nội dung, người ta gọi nó là post type.

Trường hợp 2 phần này chưa đủ đáp ứng nhu cầu của bạn, bạn muốn có thêm 1 phần là sản phẩm để úp sản phẩm của website thì bắt buộc phải tạo thêm 1 post type mới và khi đó phần sản phẩm này sẽ gọi là custom post type.

Custom post type thường được sử dụng trong trường hợp chúng ta muốn phát triên thêm chức năng cho website ví dụ:

  • Khu vực để post sản phẩm (làm web shop)
  • Khu vực để hiển thị dịch vụ (Web site dịch vụ, công ty)
  • Khu vực để hiển thị dự án (Web bất động sản…)

Tài liệu về custom post type trong wordpress.

* Phía trên là những tài liệu hướng dẫn custom post type wordpress bằng cách sự dụng code, còn hôm nay mình sẽ hướng dẫn các bạn dùng plugin toolset để làm việc đó.

2. Cài đặt, tổng quan về plugin toolset.

Đây là một trong những plugin mình thường xuyên dùng. Chức năng của nó không chỉ dùng để tạo custom post type mà đồng thời trong 1 plugin này các bạn có thể tạo: custom taxonomy, custom field, custom term field, custom user field…

Các vấn đề trên sẽ được giải quyết 1 cách dễ dàng thông qua 1 giao diện rất trực quan.

Cài đặt plugin toolset:

Custom post type trong wordpress

Cách thức cài đặt rất đơn giản, các bạn vào khu vực cài mới plugin tìm kiếm với tên là Toolset Types sau đó kết quả trả về như hình trên chọn đúng plugin và cài đặt như 1 plugin bình thường. Các bạn có thể download plugin tại đây.

Sau khi cài đặt các bạn sẽ thấy xuất hiện menu toolset trong admin như hình bên dưới là bạn đã cài đặt thành công.

Tạo custom post type trong wordpress

Các bạn có thể thấy rất nhiều menu con như:

  • Dạng bài viết – > Custom post type
  • Thẻ taxonomy -> Custom taxonomy
  • Các trường của bài viết -> Custom field
  • Trường thuật ngữ -> Custom term field
  • Trường dữ liệu người dùng -> Custom user field

Ở nội dùng bài này chúng ta sẽ đi tìm hiểu menu đầu tiên đó là Dạng bài viết hay là custompost type.

3. Tạo custom post type trong wordpress bằng plugin Toolset Type.

Giả sử khách hàng có yêu cầu 1 chức năng là dịch vụ bao gồm: Tên dịch vụ, ảnh đại diện, nội dung của dịch vụ. Để giải quyết vấn đề trên chúng ta cần đi tạo custom post type dịch vụ như sau:

Bước 1: Vào admin, duy chuyển đến menu toolset chọn menu Dạng bài viết (Đối với tiếng việt)

Bước 2: Click vào button thêm mới để tạo 1 custom post type mới và điền đẩy đủ các thông tin như hình bên dưới.

Ở phần Name and description các bạn có thể điền như hình trên, chú ý phần slug đây được xem là mã của post type này, nó sẽ dùng để lấy dữ liệu ra ngoài. Các bạn có thể thay đổi icon menu hiện trong admin để cho chuyên nghiệp.

Ở phần Các mục cần hiển thị khi chỉnh sửa. Đối với yêu cầu ban đầu phần dịch vụ sẽ có là: Tên dịch vụ, ảnh đại diện, nội dung dịch vụ. Vì thế chúng ta phải điều chỉnh phần này hợp với yêu cầu như sau.

Chúng ta chọn:

  • Tiêu đề để làm phần tên dịch vụ,
  • Trình soạn thảo để làm nội dung dịch vụ 
  • Hình nhỏ để làm hình ảnh của dịch vụ.

Bước 3: Click vào lưu định dạng bài viết và quay lại kiểm tra kết quả.

Sau khi lưu, bên thanh menu của admin xuất hiện menu “Dịch vụ” là thành công.

4. Cách hiện thị nội dung của custom post type ra ngoài giao diện.

Cách đặt tên cho file hiển thị nội dung custom post type là: archive-{slug_postype}.php. Trong đó slug_postype tên slug của post type được đặt trong quá trình tạo post type. Ví dụ ở trường hợp custom post type dịch vụ thì tên file cần đặt là: archive-dich-vu.php

Nội dung của file archive-dich-vu.php sẽ là:

<?php get_header(); ?>
<div id="content">
	<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		<?php the_title(); ?>
	<?php endwhile; else : ?>
	<p>Không có dịch vụ nào</p>
	<?php endif; ?>
</div>
<?php get_footer(); ?>

Để xem nội dung post type chúng ta truy cập đường dẫn: domain.com/{slug_postype}. Trong trường hợp này để xem danh sách các dịch vụ chúng ta truy cập đường dẫn: domain.com/dich-vu

Hiển thị nội dung của custom post type tại 1 vị trí bất kỳ trên website.

Ví dụ: Hiển thị 5 dịch vụ mới nhất.

<div class="widget">
	<h3>Dịch vụ</h3>
	<ul>
		<?php $getposts = new WP_query(); $getposts->query('post_status=publish&showposts=5&post_type=dich-vu'); ?>
		<?php global $wp_query; $wp_query->in_the_loop = true; ?>
		<?php while ($getposts->have_posts()) : $getposts->the_post(); ?>
			<li>
				<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
			</li>
		<?php endwhile; wp_reset_postdata(); ?>
	</ul>
</div>

Ở ví dụ này:

  • post_type=dich-vu đây là phần định nghĩa lấy ra các dịch vụ.
  • showposts=5 lấy 5 dịch vụ mới nhất.

Ví dụ: Lấy 5 dịch vụ mới nhất có hình đại diện

<div class="widget">
	<h3>Dịch vụ</h3>
	<ul>
		<?php $getposts = new WP_query(); $getposts->query('post_status=publish&showposts=5&post_type=dich-vu'); ?>
		<?php global $wp_query; $wp_query->in_the_loop = true; ?>
		<?php while ($getposts->have_posts()) : $getposts->the_post(); ?>
			<li>
				<div class="img">
					<a href="<?php the_permalink(); ?>">
						<?php echo get_the_post_thumbnail( get_the_id(), 'full', array( 'class' =>'thumnail') ); ?>
					</a>
				</div>
				<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
			</li>
		<?php endwhile; wp_reset_postdata(); ?>
	</ul>
</div>

5. Tóm lại

Ở bài này mình đã giới thiệu cho các bạn khái niệm về custom post type trong wordpress, plugin toolset và cách sử dụng nó để tạo custom post type. Hy vọng với chút ít kiến thức này có thể giúp các bạn 1 phần trong trong quá trình học wordpress cũng như là lập trình theme wordpress.

Nếu còn thắc mắc gì về custom post type trong wordpress các bạn có thể cmt phía bên dưới để trao đổi thêm. Facebook của mình là Blog Huy Kira like để cùng học wordpress và nhận code wordpress miễn phí nhé!

Chào thân ái và quyết thắng!!!

HuyKira

Đam mê hóa học, ưng thi vào trường kinh tế... Đậu vào trường Sư phạm, quyết tâm đi dạy... Ra trường đi làm designer, tự học frontend, chuyển qua làm PHP, được công ty đào tạo laravel... Và hiện tại đang code react native... 😂😂 tối về viết blog... (Còn tiếp...)

1
AVT