Bài viết sau sẽ hướng dẫn các bạn tạo shortcode để nhúng một video từ youtube vào wordpress ở dạng responsive một cách đơn giản nhất
Responsive là dạng website tự thu gọn theo kích thước trình duyệt. Đối với một số website thiết kế dạng responsive thì một số thành phần sẽ co lại cho phù hợp với kích thước trình duyệt, nhưng với video mặc định của Youtube thì không cho chúng ta khả năng này, nghĩa là với kích thước trình duyệt nhỏ lại, thì video vẫn vậy, dẫn đến bị vỡ khung hoặc vỡ cấu trúc website, làm cho website ở dạng mobile, hoặc màn hình nhỏ không được đẹp cho lắm.
Do đó, bài viết này sẽ hướng dẫn các bạn cách làm một đoạn shortcode nhỏ để giải quyết vấn đề này
Nguyên liệu cần cho bài học
- Bộ cài WordPress
- Một code editor
- Một chương trình FTP để upload plugin của bạn lên host
Khởi tạo plugin
Để tạo một plugin mới, bạn mở trình soạn thảo code của bạn lên, sau đó chép đoạn code bên dưới và save với tên wptutsplus-responsive-video-shortcode.php
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php /* Plugin Name: WpTuts+ Responsive Video Shortcode Plugin URI: https://sharecodeweb.net Description: This plugin provides a shortcode you wrap around the ID of a video in YouTube. The plugin then adds the necessary markup and CSS to make that video responsive. To use it, type [responsive-video]'source'[/responsive-video], where 'source' is the iframe embed code for your video. Version: 1.0 Author: Share Code Web Author URI: https://sharecodeweb.net License: GPLv2 */ ?> |
Tạo shortcode
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php // register the shortcode to wrap html around the content function wptuts_responsive_video_shortcode( $atts ) { extract( shortcode_atts( array ( 'identifier' => '' ), $atts ) ); return '<div class="wptuts-video-container"><iframe src="//www.youtube.com/embed/' . $identifier . '" height="240" width="320" allowfullscreen="" frameborder="0"></iframe></div> <!--.wptuts-video-container-->'; } add_shortcode ('responsive-video', 'wptuts_responsive_video_shortcode' ); ?> |
Bao bên ngoài là một thẻ div có class là wptuts-video-container. Và chúng ta sẽ sử dụng class này để tạo responsive. Biến $identifier sẽ giúp chúng ta lấy Id video trên Youtube
Style
Mở một file và chép đoạn css sau, sau đó lưu với tên style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* stylesheet for use with responsive video shortcode plugin. Provides the CSS that makes the video responsive. */ .wptuts-video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .wptuts-video-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; } |
Để file style này hoạt động thì chúng ta cần đăng ký nó với file plugin của chúng ta, bằng đoạn code bên dưới
|
1 2 3 4 5 6 7 8 |
<?php // Register stylesheet with hook 'wp_enqueue_scripts', which can be used for front end CSS and JavaScript function wptuts_responsive_video_add_stylesheet() { wp_register_style( 'wptuts_responsive_video_style', plugins_url( 'style.css', __FILE__ ) ); wp_enqueue_style( 'wptuts_responsive_video_style' ); } add_action( 'wp_enqueue_scripts', 'wptuts_responsive_video_add_stylesheet' ); ?> |
Sử dụng shortcode
Để sử dụng shortcode này rất đơn giản, bạn chỉ việc lấy Id của Youtube rồi vứt vào shortcode theo cấu trúc như sau
|
1 |
[responsive-video identifier="O56p5nOYNHo"] |
Khi đó chúng ta sẽ được như demo
