Hướng dẫn shortcode video wordpress - shortcode video wordpress

Video shortcode là chức năng cho phép bạn chèn video trên WordPress. Bạn có thể chèn video trực tiếp bằng cách upload lên WordPress. Và bạn cũng có thể chèn video từ url trên mạng. Nội dung của bài viết này mình sẽ hướng dẫn cho bạn dùng video shortcode để chèn vào blog WordPress.video shortcode để chèn vào blog WordPress.

Hướng dẫn shortcode video wordpress - shortcode video wordpress

WordPress có một chức năng rất hay đó là bạn chỉ cần bỏ url vào trong nội dung bài viết, hệ thống sẽ tự động chuyển thành video chứ không cần dùng shortcode.

Mục lục nội dung

  • 1 Video shortcode toàn tập trên WordPress Video shortcode toàn tập trên WordPress
    • 1.1 Sử dụng video shortcode Sử dụng video shortcode
  • 2 Tự động thêm thumbnail cho video trên WordPress Tự động thêm thumbnail cho video trên WordPress
  • 3 Video shortcode không hoạt động trong AJAX Video shortcode không hoạt động trong AJAX

Bạn hoàn toàn có thể chèn phim, ảnh hoặc nhạc vào WordPress một cách dễ dàng. Đối với bất kỳ post hoặc page nào có hỗ trợ editor (trình soạn thảo), bạn chỉ việc sao chép đường dẫn và bỏ vào nội dung bài viết.

Xem video hướng dẫn làm thịt nướng mọi chấm muối ớt:

https://www.youtube.com/watch?v=fiHDrn0sX1A

Đây là video ngắn với nội dung giải trí.

Như bạn thấy đoạn nội dung bên trên, mình chỉ chèn url video từ YouTube chứ không làm bất kỳ việc gì khác. Tuy nhiên, video của bạn phải nằm trong danh sách các dịch vụ hỗ trợ embed video vào WordPress. Tronh danh sách có tới hơn 30 dịch vụ. Đây đều là những dịch vụ cho phép upload video, nhạc và chia sẻ hình ảnh phổ biến hiện nay.

Sử dụng video shortcode

Nếu như bạn hoàn toàn có thể embed video hoặc nhạc một cách tự động thì bạn cũng có thể dùng shortcode để chèn video theo cách nâng cao hơn. Trong trình soạn thảo bạn nhấn vào nút Add Media. Nút này nằm ngay trên editor, dưới tiêu đề bài viết. Nếu bạn không thấy nút Add Media thì có nghĩa là bạn không có quyền thêm media vào bài viết.

Hướng dẫn shortcode video wordpress - shortcode video wordpress

Cửa sổ thêm media hiển thị lên. Bạn có thể upload video hoặc nhạc trực tiếp lên WordPress. Bên cạnh đó, bạn cũng có thể chèn media từ url như trong hình ảnh bên trên. Nếu bạn chọn cách upload video trực tiếp lên WordPress thì nên hạn chế nhé.

Xem thêm: Không nên upload nhạc và video trực tiếp lên WordPress Không nên upload nhạc và video trực tiếp lên WordPress

Ngoài cách dùng nút Add Media thì bạn có thể dùng shortcode video như bên dưới:

{video mp4="source.mp4" ogv="source.ogv" webm="source.webm" poster="video-thumbnail.jpg"};

Bạn thay dấu ngoặc { thành dấu ngoặc vuông nhé. Bạn có url nào của video thì cứ để vào, nếu không có định dạng OGV và định dạng WEBM thì chỉ điền MP4 thôi là đủ. Poster là thuộc tính cho phép bạn thiết lập thumbnail cho video.

Tự động thêm thumbnail cho video trên WordPress

Cách sử dụng video shortcode rất đơn giản. Chỉ một dòng như mình hướng dẫn bên trên. Nhưng để hiển thị thumbnail tự động cho video thay vì màn hình đen thuôi thì bạn bỏ đoạn code sau vào tập tin functions.php của giao diện.

function hocwp_theme_custom_video_code( $attr, $content = '' ) {
	if ( ! isset( $attr['poster'] ) && has_post_thumbnail() ) {

		$poster = wp_get_attachment_image_src(
			get_post_thumbnail_id(),
			'poster'
		);

		$attr['poster'] = $poster['0'];
	}

	return wp_video_shortcode( $attr, $content );
}

add_shortcode( 'video', 'hocwp_theme_custom_video_code' );

Bạn thêm đoạn code bên trên vào tập tin functions.php của giao diện. Mục địch của đoạn code này là định nghĩa lại shortcode video thay cho các mặc định của WordPress.

Video shortcode không hoạt động trong AJAX

Nếu bạn đang viết code có sử dụng AJAX mà video shortcode không hoạt động thì bạn chỉ cần dùng bộ lọc the_content để lọc nội dung hiển thị.

Sau khi thực hiện xong AJAX thì bạn để trong callback success hoặc complete đoạn script sau:

$("video,audio").mediaelementplayer();

MediaElement là framework cho phép bạn chạy video và audio bằng thẻ HTML5. Hiện tại thì framework này đã tích hợp vào bộ nhân của WordPress.

Như vậy qua bài viết này thì bạn đã biết cách chèn video hoặc audio vào WordPress rồi nhé. Cách chèn audio thì tương tự như video vậy. Bạn sử dụng shortcode audio thay vì video nhé.chèn video hoặc audio vào WordPress rồi nhé. Cách chèn audio thì tương tự như video vậy. Bạn sử dụng shortcode audio thay vì video nhé.

Hy vọng bài viết này sẽ giúp ích được bạn. Nếu bạn gặp bất kỳ rắc rối nào thì có thể để lại bình luận nhờ sự trợ giúp của cộng đồng WordPress. Chúc bạn thành công.

Trong quá trình phát triển WordPress Themes, WordPress Plugins có thể bạn cần định nghĩa nhiều shortcode để tăng tính tiện dụng trong việc truy vấn dữ liệu hiển thị, định dạng template tốt hơn. Trong chia sẻ này mình sẽ hướng dẫn bạn làm thế nào để có thể dễ dàng chèn video youtube vào nội dung với các định dạng tuỳ chỉnh ứng với từng vị trí hiển thị.

Mã khai báo khởi tạo shortcode chèn video youtube vào nội dung ?

// Add Shortcode
function polygon_simple_video_embed_shortcode( $atts ) {

	// Attributes
	extract( shortcode_atts(
		array(
			'src' => '',
			'width' => '',
			'height' => '',
		), $atts )
	);

	// Code
return '';

}
add_shortcode( 'polygon_simple_video_embed', 'polygon_simple_video_embed_shortcode' );

Sau khi khởi hàm khai báo trên, từ bây giờ bạn có thể dễ dàng gọi shortcode này ở bất cứ nơi nào (phần soạn thảo posts, pages, text-widget…. hay những vùng cho phép thực thi do_shortcode) để hiển thị video youtube từ liên kết của bạn như sau:

[polygon_simple_video_embed width="800" height="600" src="https://www.youtube.com/watch?v=WUeGxMJhd2E"]

Nghĩa là phần thể hiện sẽ hiển thị 8 posts mới nhất tại vị bạn muốn nó hiển thị.

Lời kết về cách tạo shortcode chèn video youtube vào nội dung

Việc tạo shortcode trong dự án sẽ hỗ trợ bạn thao tác mềm dẻo hơn quá trình tuỳ chỉnh hiển thị dữ liệu ngoài giao diện. Như ví dụ shortcode chèn video youtube trên việc thay đổi bổ sung các thông số sau này hoàn toàn hạn chế ảnh hưởng đến những nơi bạn đã chèn shortcode này trước đây (dĩ nhiên các thuộc tính bạn phải đồng nhất về tên gọi). Để việc tuỳ chỉnh các thông số hiển thị mã HTML đầu ra tốt hơn bạn có thể bổ sung thêm các điều kiện vào hàm như: chèn tiêu đề, mô tả ngắn gọn về video bên dưới, chèn các video link liên quan, video xem nhiều…

Đồng thời việc trên kết hợp với bài chia sẻ cách tạo button cho trình soạn thảo biết đâu bạn có thể có thêm ý tưởng phát triển 1 plugin chèn video youtube vào nội dung với nhiều tham số tuỳ chỉnh khác.chia sẻ cách tạo button cho trình soạn thảo biết đâu bạn có thể có thêm ý tưởng phát triển 1 plugin chèn video youtube vào nội dung với nhiều tham số tuỳ chỉnh khác.

Nếu trong quá trình thực hiện mã lệnh, có vấn đề và chỗ nào không hiểu bạn vui lòng để lại lời bình luận tại đây. Mình sẽ kiểm tra và hỗ trợ cho bạn giải quyết vấn đề bạn mắc phải ngay khi mình nhận được.

Chúc bạn có thể bổ sung thêm 1 phần kiến thức nho nhỏ trong quá trình học tập, làm việc cũng như chinh phục WordPress của mình. Mọi thắc mắc, ý kiến đóng góp mong bạn vui lòng để lại bình luận ngay bên dưới, mình và mọi người sẽ hỗ trợ bạn ngay khi có thể.- Cafe số 8 -
- Cafe số 8 -