Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Wordpress Tips > Hướng dẫn tạo Shortcode Responsive video cho wordpress
Hướng dẫn tạo Shortcode Responsive video cho wordpress
Nguyễn Trung Hiếu
Share Code Web Company 2013

Hướng dẫn tạo Shortcode Responsive video cho wordpress

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

Tạo 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

Để 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

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

Khi đó chúng ta sẽ được như demo
create shortcode for responsive video

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}