Cách tạo nút Download bằng custom field với plugin Meta Box

Internet ra đời cung cấp cho con người muôn vàn lợi ích. Nó cho phép chúng ta trò chuyện, giao lưu, tìm kiếm tin tức, và nhất là chia sẻ kinh nghiệm và tải các tài liệu, tiện ích, ứng dụng, … về máy tính. Nếu bạn có một trang web và muốn chia sẻ tài liệu cho người dùng, việc tạo một nút Download là ý tưởng không tồi – vừa đẹp mắt, lại rất chuyên nghiệp.

Trong bài này, mình sẽ hướng dẫn các bạn tạo nút Download bằng custom field với plugin Meta Box, sau đó hiển thị nút này ra ngoài front end bằng hai cách là chèn code vào theme hoặc sử dụng shortcode. Nhưng trước tiên, hãy tìm hiểu kỹ hơn khi nào bạn nên tạo và sử dụng nút Download nhé!

Ứng dụng của nút Download

Nút Download có thể được ứng dụng cho rất nhiều loại website, điển hình như:

  • Website business: download profile, catalog, các quyết định, báo cáo thường niên của công ty.
  • Website bất động sản: tải về bảng giá, brochure dự án, thông tin về các căn hộ, khu đất còn trống.
  • Website du lịch: download brochure của chuyến đi.
  • Website về văn bản pháp luật: download các bộ luật.
  • Blog: Download các tài liệu mà blogger chia sẻ.

Dưới đây là ví dụ về nút Download trong trang bán sản phẩm của metabox.io.

nút Download trong trang bán sản phẩm của metabox.io

Giờ thì cùng đi vào chi tiết cách tạo nút Download tài liệu bằng custom field với plugin Meta Box nhé!

Chuẩn bị

Để tạo nút Download tài liệu bằng custom field, mình sẽ sử dụng một số công cụ sau:

  • Core plugin Meta Box: framework hỗ trợ tạo custom field, custom meta box một cách đơn giản và nhanh chóng. Bạn có thể tải plugin này từ wordpress.org.
  • Meta Box Builder: extension trả phí của plugin Meta Box, cung cấp cho bạn UI để tạo custom field ngay trong back end.

Nếu bạn không muốn dùng extension trả phí Meta Box Builder, bạn vẫn hoàn toàn có thể tạo custom field bằng cách tự code hoặc dùng công cụ Online Generator miễn phí của Meta Box. Công cụ này cung cấp cho bạn một giao diện trực quan để tạo custom field, sau đó nó sẽ tự khởi tạo code để bạn chèn vào file functions.php. Bạn có thể xem hướng dẫn sử dụng chi tiết tại đây.

Ngoài ra, mình cũng sử dụng theme eStar và tạo một child theme cho theme này để test. Theme đa chức năng này hoàn toàn miễn phí, bạn có thể tải nó tại đây.

Sau khi cài đặt và kích hoạt các plugin xong, hãy làm theo các bước sau:

Bước 1: Tạo nút download bằng custom field

Đầu tiên, vào Meta Box > Custom Fields > Add New. Sau đó, tìm và chọn field type là File Advanced.

Thêm custom field cho nút Download bằng plugin Meta Box

Tiếp theo, hãy tự đặt ID Label của field theo ý bạn. Mình đặt như sau:

đặt ID và Label của custom field

Để hiển thị custom field ra tất cả các bài viết trên website, mình chuyển sang tab Settings, sau đó chọn Posts trong phần Show for và thêm Post typesPost (bạn cũng có thể chọn post type khác như page hoặc custom post type mà bạn tự tạo).

chọn post type cho custom field tạo bởi plugin Meta Box

Cuối cùng, đừng quên ấn Publish để tạo custom field. 

Bước 2: Chèn tài liệu vào nút download

Tiếp theo, hãy vào một bài viết mà bạn muốn hiển thị nút tải về. Trong WordPress editor của bài viết đó, field vừa tạo ở trên hiển thị ra như sau:

Chèn tài liệu vào nút download

Hãy chèn file bạn muốn chia sẻ cho người đọc bằng cách bấm vào Add Media. Đây là file mình đã tải lên:

chèn file bạn muốn chia sẻ cho người xem website WordPress

Giờ thì mình đã tải xong một tệp muốn chia sẻ cho người đọc lên trang. Tuy nhiên, người đọc vẫn chưa thể thấy nút tải xuống ở ngoài trang web, vậy nên bạn cần hiển thị nó ra ngoài front end (xem tiếp tại bước 3)

Bước 3: Hiển thị nút Download ra ngoài front end

Để hiển thị nút Download ra ngoài front end, bạn có thể làm theo hai cách, đó là tạo code rồi chèn vào theme hoặc tạo và sử dụng shortcode. Cách thứ nhất sẽ hữu dụng trong trường hợp bạn chỉ cần hiển thị nút Download vào một vị trí của tất cả các trang. Còn cách thứ hai sẽ nhanh chóng và tiện lợi hơn khi bạn muốn chèn nút Download vào nhiều vị trí khác nhau trên trang khác nhau.

Cách 1: Hiển thị nút Download bằng cách chèn code vào theme

Trong ví dụ này, mình muốn hiển thị nút Download ở cuối cùng của tất cả bài viết:

hiển thị nút Download ở cuối cùng của tất cả bài viết trong website WordPress

Để làm điều đó, mình chèn đoạn code sau vào file functions.php của child theme:

add_action( 'estar_entry_footer_before', 'estar_child_add_link' );
function estar_child_add_link() {
	?>
	<div class="document_link_download abc">
		<?php
		$files = rwmb_meta( 'file_download' );
		foreach ( $files as $file ) : ?>
			
		<a class="document_link" href="<?php echo $file['url'] ?>" target="_blank">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
			<?php esc_html_e( 'Download document', 'estar' ) ?>		
		</a>

		<?php endforeach ?>
	</div>
	<?php
}

Trong đó:

  • 'file_download' là id của field để người dùng tải tài liệu mà mình vừa tạo ở bước 1
  • 'estar' là tên theme mà mình đang sử dụng
  • add_action( 'estar_entry_footer_before', 'estar_child_add_link' );  function estar_child_add_link() { ?> là đoạn code dùng để chỉ định vị trí hiển thị nút Download. Trong trường hợp này, mình hiển thị nút Download trong hook 'estar_entry_footer_before' của theme eStar. Hook này được tạo ra ở ngay phía trên danh sách các tags. Bạn có thể tham khảo hook này tại đây (dòng số 42).

Và đây là kết quả:

hiển thị nút Download ở một vị trí cố định trên toàn trang WordPress bằng plugin Meta Box

Vậy là chúng ta đã hiển thị nút Download ở một vị trí cố định trên toàn trang bằng cách chèn code trong theme. Nếu thấy cách này chưa phù hợp với nhu cầu của bạn, hãy thử cách 2 nhé!

Cách 2: Hiển thị nút Download bằng shortcode

Trước tiên, hãy chèn đoạn code sau vào file functions.php để tạo shortcode:

add_shortcode( 'estar_button_download', 'estar_button_download');
function estar_button_download() {
	ob_start();
	?>
	<div class="document_link_download abc">
		<?php
		$files = rwmb_meta( 'file_download' );
		foreach ( $files as $file ) : ?>
			
		<a class="document_link" href="<?php echo $file['url'] ?>" target="_blank">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
			<?php esc_html_e( 'Download document', 'estar' ) ?>		
		</a>

		<?php endforeach ?>
	</div>
	<?php
	return ob_get_clean();
}

Trong đó, estar_button_download là tên shortcode dùng để chèn nút Download. Bạn có thể thay phần này bằng bất cứ tên nào khác. Từ nay trở đi, bạn chỉ cần chèn shortcode này vào các vị trí mong muốn như bài viết, trang, widget.

Ví dụ, mình chèn shortcode [estar_button_download] vào trong nội dung của một bài đăng như sau:

chèn shortcode vào trong nội dung của một bài đăng WordPress

Hoặc mình có thể chèn vào một widget như thế này chẳng hạn:

Chèn shortcode vào widget của website WordPress
Chèn shortcode vào widget
Nút Download tạo bởi custom field với plugin Meta Box được hiển thị ra ngoài website WordPress

Tùy vào từng nhu cầu và hoàn cảnh mà bạn có thể hiển thị nút Download này ở các vị trí khác của theme sao cho hợp lý và thu hút nhất nhé!

Lời cuối

Bạn thấy sao, việc tạo nút Download trông đẹp mắt và chuyên nghiệp hơn hẳn so với việc chèn một đường link vừa dài vừa khô khan xấu xí đúng không nào? Bên cạnh việc tạo nút Download bằng custom field thì plugin Meta Box còn có rất nhiều ứng dụng hay ho khác mà tụi mình sẽ liên tục cập nhật trong các bài viết sắp tới. 

Nếu bạn có thắc mắc hay sáng kiến nào liên quan tới việc sử dụng plugin Meta Box, hãy chia sẻ với tụi mình trong phần bình luận, hoặc tham gia group user của Meta Box tại đây 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 *