Cách tạo công thức nấu ăn bằng plugin Meta Box

Khi ghé qua các trang web, blog về ẩm thực, bạn sẽ rất dễ dàng bắt gặp những công thức nấu ăn được trình bày đẹp mắt và chuyên nghiệp. Để tạo các công thức nấu ăn này, bên cạnh việc dùng tới plugin chuyên dụng, chúng ta cũng có thể dùng custom field và custom post type với plugin Meta Box. Trong bài viết này, mình sẽ hướng dẫn cách làm một cách cụ thể và chi tiết.

Để bạn dễ hình dung hơn thì dưới đây là ví dụ công thức nấu ăn mà mình tìm thấy trong một blog ẩm thực. Chúng ta cũng sẽ tạo một cái tương tự như vậy.

Ví dụ trình bày một công thức nấu ăn

Chuẩn bị

Trước khi bắt tay vào tạo công thức nấu ăn, bạn cần cài đặt và kích hoạt các công cụ sau:

  • Core plugin Meta Box (miễn phí): framework giúp bạn đơn giản hóa quá trình làm việc với custom field và meta box.
  • MB Custom Post Types & Custom Taxonomies (miễn phí): extension dùng để tạo custom post type để đăng công thức nấu ăn một cách dễ dàng và nhanh chóng. Có thể chạy độc lập với core plugin Meta Box.
  • Meta Box Builder (trả phí): extension cung cấp giao diện trực quan ngay trong backend giúp bạn tạo custom field thuận tiện hơn bằng cách kéo thả. Lưu ý là để dùng được extension này, bạn cần cài cả core plugin Meta Box nhé.
  • MB Views: giúp bạn lấy và hiển thị giá trị của custom field ra front end mà không cần chèn code vào theme file.
  • Theme eStar: theme WordPress miễn phí này có các hook giúp bạn hiển thị custom field ra ngoài front end một cách cực kỳ đơn giản và tiện lợi.

Ngoài ra, bạn cũng thể dùng các công cụ Post Type Generator Online Generator để tạo custom post type và custom fields mà không cần dùng tới hai extension kể trên. Các bạn có thể xem thêm hướng dẫn sử dụng của Post Type Generator ở đây và Online Generator ở đây.

Sau khi đã có đủ các công cụ cần thiết, hãy làm theo các bước sau để tạo công thức nấu ăn nhé:

Bước 1: Tạo custom post type Recipe và các custom field của nó

Trước hết, mình sẽ tạo một custom post type mới tên là Recipe chuyên dùng để đăng các công thức nấu ăn.

Bạn vào Meta Box > Post Types > New Post Types để tạo một post type mới:

Tạo post type cho công thức nấu ăn của bạn

Mình đã tạo một post type là Recipe với các thông tin như sau:

Điền thông tin chung cho công thức của bạn

Như bạn đã thấy ở phần đầu, một công thức nấu ăn thường sẽ có những mục như thời gian chuẩn bị, thời gian nấu, các đồ làm bếp cần thiết, nguyên liệu, các bước thực hiện, ghi chú, dinh dưỡng của món ăn, … Để thêm các mục này, mình sẽ tạo các custom field tương ứng là Prep time, Cook time, Resting time, Total time, Equipment, Ingredients, Instructions, … cho post type Recipe.

Bạn hãy vào Meta Box > Custom Fields > Add New để tạo các custom field mới cho công thức nấu ăn. Các field được tạo với tên và field type như sau:

Tên fieldLoại field
Prep timetext
Cook timetext
Resting timetext
Total timetext
Ingredientswysiwyg
Instructionswysiwyg
Videotext
Noteswysiwyg
Nutritionwysiwyg
Equipmentwysiwyg

Các bạn có thể xem thêm cách tạo và thiết lập custom field với Meta Box Builder tại đây.

Đây là các field mà mình đã tạo:

Kết quả các field đã tạo

Sau khi tạo field xong, hãy nhớ chuyển sang tab Settings và chọn post type là recipe:

Chọn post type recipe trong Settings

Ok, chúng ta đã có một post type recipe hoàn chỉnh với đầy đủ các custom field cần thiết.

Tiếp theo, hãy tạo một recipe (công thức nấu ăn) mới bằng cách vào Recipe > Add Recipe:

Tạo công thức nấu ăn mới bằng nhấn Add Recipe

Sau đó hãy kéo xuống dưới để thấy các custom field vừa được tạo cho post type recipe, sau đó nhập vào nội dung cho chúng. Ví dụ, mình nhập vào công thức nấu ăn món pizza như sau:

Nhập thời gian các bước trong công thức nấu ăn

Thông tin trong các custom field đã được điền xong, nhưng các công thức nấu ăn của bạn vẫn chưa được hiển thị ngoài website đâu:

Fontend chưa hiển thị công thức nấu ăn của bạn.

Do đó, chúng ta cần lấy dữ liệu của các custom field rồi hiển thị chúng ra ngoài front end.

Bước 2: Hiển thị dữ liệu của các custom field ra ngoài front end

Mình sẽ hiển thị các custom field tại một hook của theme eStar‘estar_entry_footer_before’ Bạn có thể tham khảo hook này tại đây.

Để hiển thị dữ liệu của các custom field ra ngoài front end, chúng ta có thể làm theo hai cách:

  • Cách 1: Chèn code trực tiếp vào file functions.php của theme
  • Cách 2: Dùng extension MB View của plugin Meta Box

Sau đây là hướng dẫn cụ thể từng cách:

Cách 1: Chèn code trực tiếp vào theme

Mình thêm đoạn code sau vào file functions.php của theme:

add_action( 'estar_entry_footer_before', 'estar_child_recipe' );
function estar_child_recipe() {
	if ( ! is_singular( 'recipe' ) ) {
		return;
	}
	$ingredients = rwmb_meta( 'ingredients' );
	$instructions = rwmb_meta( 'instructions' );
	$equipment = rwmb_meta( 'equipment' );
	$video = rwmb_meta( 'video' );
	$notes = rwmb_meta( 'note' );
	$nutrition = rwmb_meta( 'nutrition' );
	$prep_time = rwmb_meta( 'prep_time' );
	$cook_time = rwmb_meta( 'cook_time' );
	$resting_time = rwmb_meta( 'resting_time' );
	$total_time = rwmb_meta( 'total_time' );
	?>
	<div class="recipe-food__container">
		<h2 class="recipe-name">Recipe</h2>
		<div class="recipe-group recipe-times">
			<h3 class="recipe-header">
				<div class="recipe-line"></div>
			</h3>
			<div class="recipe-times__container">
				<div class="recipe-times__item">
					<span class="label">Prep Time</span>
					<span class="recipe-time"><?php echo $prep_time; ?></span>
				</div>
				<div class="recipe-times__item">
					<span class="label">Cook Time</span>
					<span class="recipe-time"><?php echo $cook_time; ?></span>
				</div>
				<div class="recipe-times__item">
					<span class="label">Resting Time</span>
					<span class="recipe-time"><?php echo $resting_time; ?></span>
				</div>
				<div class="recipe-times__item">
					<span class="label">Total Time</span>
					<span class="recipe-time"><?php echo $total_time; ?></span>
				</div>
			</div>
		</div>
		<div class="recipe-group recipe-equipment">
			<h3 class="recipe-header">
				Equipment
				<div class="recipe-line"></div>
			</h3>
			<?php echo do_shortcode( wpautop( $equipment ) ); ?>
		</div>
		<div class="recipe-group recipe-ingredients">
			<h3 class="recipe-header">
				Ingredients
				<div class="recipe-line"></div>
			</h3>
			<?php echo $ingredients; ?>
		</div>
		<div class="recipe-group recipe-instructions">
			<h3 class="recipe-header">
				Instructions
				<div class="recipe-line"></div>
			</h3>
			<?php echo $instructions; ?>
		</div>
		<div class="recipe-group recipe-video">
			<h3 class="recipe-header">
				Video
				<div class="recipe-line"></div>
			</h3>
			<?php echo wp_oembed_get( $video ); ?>
		</div>
		<div class="recipe-group recipe-notes">
			<h3 class="recipe-header">
				Notes
				<div class="recipe-line"></div>
			</h3>
			<?php echo $notes; ?>
		</div>
		<div class="recipe-group recipe-nutrition">
			<h3 class="recipe-header">
				Nutrition
				<div class="recipe-line"></div>
			</h3>
			<?php echo $nutrition; ?>
		</div>
	</div>
	<?php
}

Đoạn code trên có tác dụng in giá trị của các custom field mà chúng ta vừa tạo ở bước 1 ra ngoài front end, cụ thể là tại hook ‘estar_entry_footer_before’.

Trong đó:

  • ‘estar_child_recipe' là tên hàm, bạn đặt tên hàm này là gì cũng được
  • ingredients' , 'instructions' , 'equipment' , 'video' , 'note' , 'nutrition' , 'prep_time' , 'cook_time' , 'resting_time' , 'total_time' là ID của các custom field

Cách 2: Dùng extension MB Views của plugin Meta Box

Nếu bạn không muốn phải chèn code vào trong theme file, hãy sử dụng extension MB Views của plugin Meta Box.

Đầu tiên, vào Meta Box > Views > Add New:

Sử dụng extension MB Views của plugin Meta Box thay cho chèn code vào theme file.

Tiếp theo, hãy chèn đoạn code sau vào tab Template:

{% set ingredients = mb.rwmb_meta( 'ingredients' ) %}
{% set instructions = mb.rwmb_meta( 'instructions' ) %}
{% set equipment = mb.rwmb_meta( 'equipment' ) %}
{% set video = mb.rwmb_meta( 'video' ) %}
{% set notes = mb.rwmb_meta( 'note' ) %}
{% set nutrition = mb.rwmb_meta( 'nutrition' ) %}
{% set prep_time = mb.rwmb_meta( 'prep_time' ) %}
{% set cook_time = mb.rwmb_meta( 'cook_time' ) %}
{% set resting_time = mb.rwmb_meta( 'resting_time' ) %}
{% set total_time = mb.rwmb_meta( 'total_time' ) %}

<div class="recipe-food__container">
	<h2 class="recipe-name">Recipe</h2>
	<div class="recipe-group recipe-times">
		<h3 class="recipe-header">
			<div class="recipe-line"></div>
		</h3>
		<div class="recipe-times__container">
			<div class="recipe-times__item">
				<span class="label">Prep Time</span>
				<span class="recipe-time">{{ prep_time }}</span>
			</div>
			<div class="recipe-times__item">
				<span class="label">Cook Time</span>
				<span class="recipe-time">{{ cook_time }}</span>
			</div>
			<div class="recipe-times__item">
				<span class="label">Resting Time</span>
				<span class="recipe-time">{{ resting_time }}</span>
			</div>
			<div class="recipe-times__item">
				<span class="label">Total Time</span>
				<span class="recipe-time">{{ total_time }}</span>
			</div>
		</div>
	</div>
	<div class="recipe-group recipe-equipment">
		<h3 class="recipe-header">
			Equipment
			<div class="recipe-line"></div>
		</h3>
		{{ mb.wpautop( equipment ) }}
	</div>
	<div class="recipe-group recipe-ingredients">
		<h3 class="recipe-header">
			Ingredients
			<div class="recipe-line"></div>
		</h3>
		{{ ingredients }}
	</div>
	<div class="recipe-group recipe-instructions">
		<h3 class="recipe-header">
			Instructions
			<div class="recipe-line"></div>
		</h3>
		{{ instructions }}
	</div>
	<div class="recipe-group recipe-video">
		<h3 class="recipe-header">
			Video
			<div class="recipe-line"></div>
		</h3>
		{{ mb.wp_oembed_get( video ) }}
	</div>
	<div class="recipe-group recipe-notes">
		<h3 class="recipe-header">
			Notes
			<div class="recipe-line"></div>
		</h3>
		{{ notes }}
	</div>
	<div class="recipe-group recipe-nutrition">
		<h3 class="recipe-header">
			Nutrition
			<div class="recipe-line"></div>
		</h3>
		{{ nutrition }}
	</div>
</div>
Chèn code vào Template

Sau đó, bạn cần kéo xuống dưới phần Settings để chọn hiển thị các custom field cho post type recipe. Hãy chọn Singular trong phần Type và chọn recipe trong phần Location:

Chọn Singular và recipe trong Location.

Dù dùng cách nào ở bước 2 thì cũng cần điền đúng ID của các field nhé.

Đây là kết quả hiển thị của công thức nấu ăn ngoài trang web:

Công thức nấu ăn đã hiển thị trên website của bạn.

Giá trị của các custom field đã được hiển thị ra ngoài front end. Tuy nhiên, công thức nấu ăn vẫn chưa được đẹp mắt cho lắm. Vậy nên mình sẽ dùng CSS để style lại một chút cho đẹp mắt.

Bước 3: Dùng CSS sửa lại công thức nấu ăn cho đẹp mắt

Để chỉnh sửa công thức nấu ăn bằng CSS, hãy vào Customizer > Additional CSS. Bạn có thể tham khảo đoạn CSS này của mình:

.recipe-food__container {
	border: 1px solid #E0E0E0;
	padding: 20px;
	background: #b0e4e4;
}
.recipe-food__container p {
	margin-bottom: 5px;
}
.recipe-group {
	margin-bottom: 30px;
}

.recipe-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 1.2em;
	text-transform: uppercase;
	margin-bottom: 15px;
}
.recipe-line {
	flex: auto;
	height: 1px;
	border-bottom: 1px solid #e0e0e0;
	margin-left: 15px;
}
.recipe-times .recipe-line {
	margin-left: 0;
}
.recipe-times__container {
	display: flex;
	padding: 5px;
	margin: 5px 0;
}
.recipe-times__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	text-align: center;
}
.recipe-times__item .label {
	text-transform: uppercase;
	opacity: 0.6;
}

Giờ thì công thức làm pizza của mình trông đã ngon lành và đẹp mắt hơn rất nhiều rồi đấy:

Công thức nấu ăn say khi được "trang điểm" đã thu hút hơn.

Bạn có thể xem công thức đầy đủ tại đây.

Video hướng dẫn

Chúng mình đã làm video hướng dẫn chi tiết, bạn có thể tham khảo ở đây nhé.

Lời cuối

Bạn thấy đấy, việc tạo một công thức nấu ăn với plugin Meta Box cũng không quá khó đúng không nào? Chúng ta chỉ cần tạo custom post type, custom field rồi hiển thị chúng ra front end là xong, không có gì quá cao siêu cả.

Tùy vào nhu cầu của chủ website mà trong công thức nấu ăn sẽ có thêm những mục khác, bạn chỉ cần thêm bớt các custom field sao cho phù hợp là được. Chúc bạn xây dựng được một blog nấu ăn thành công. Nếu bạn có thắc mắc hay câu hỏi nào liên quan tới custom field và meta box, hãy để lại bình luận tại đây hoặc tham gia group Facebook Meta Box Users nhé!

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *