Hộp đèn video đáp ứng với Lity

Thong_Huynh · 26 Tháng Tám 2021 15:35

Hướng dẫn này chỉ cho bạn cách tạo hộp đèn bật lên video đáp ứng và trang nhã. Thay vì chỉ sử dụng khối WordPress tiêu chuẩn để nhúng video, chúng tôi sẽ sử dụng thư viện JavaScript Lity để đưa video vào trình phát video đáp ứng đầy đủ và nó sẽ hoạt động với YouTube và các video tự lưu trữ.

Bạn không cần thêm bất kỳ plugin mới nào vào trang web WordPress của mình. Tất cả những gì bạn cần là một chủ đề con tùy chỉnh để chúng tôi có thể thêm một chút PHP và JavaScript để làm cho nó hoạt động.

Về cơ bản, chúng ta cần một tệp PHP trên máy chủ để triển khai một shortcode tùy chỉnh. Chúng tôi cần thư viện mã nguồn mở Lity (tải xuống miễn phí) và chúng tôi cần tạo một chút CSS để hoàn thiện nó. Nếu bạn chưa có kinh nghiệm viết mã, điều đó có vẻ như là một công việc khó khăn, nhưng…

… Tất cả những gì chúng ta sẽ làm là tạo một hàm PHP duy nhất, thêm một vài định nghĩa CSS và sử dụng thư viện Lity JavaScript để thực hiện tất cả các công việc khó khăn.

Bắt đầu

Chúng tôi sẽ bắt đầu bằng cách sắp xếp các tệp của mình và chúng tôi sẽ đặt một chức năng giữ chỗ vào đó để chúng tôi có thể kiểm tra mọi thứ. Trong thư mục chính của chủ đề con tùy chỉnh của bạn, hãy tạo một tệp mới có tên là simple-video-lightbox.php và dán phần sau vào đó.

// Block direct access.
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
function svl_do_shortcode_video($params) {
   // We'll replace this with the proper code later.
   return 'Light-box in here';
}
add_shortcode('svl_video', 'svl_do_shortcode_video');

Hàm của chúng ta bắt đầu bằng “ svl_ ”, viết tắt của “Simple Video Light-Box”.

Chúng tôi cũng cần một thư mục mà chúng tôi có thể thêm các tệp hỗ trợ của mình, vì vậy hãy tạo một thư mục con trong chủ đề con tùy chỉnh của bạn có tên là simple-video-lightbox . Tiếp theo, truy cập trang web Lity và tải xuống phiên bản hiện tại. Giải nén tệp zip và đi vào thư mục “dist” (có thể phân phối) và bạn sẽ thấy một số tệp. Chúng tôi chỉ cần các tệp JS & CSS được rút gọn , vì vậy hãy sao chép lity.min.css và lity.min.js vào thư mục con hộp đèn đơn giản mới.

Lấy một bản sao của tệp SVG nút phát YouTube, lưu vào thư mục con và đổi tên thành youtube-play-button.svg .

Yoiu cũng sẽ cần một nút phát tiêu chuẩn (không phải YouTube). Tìm hoặc tạo SVG và lưu nó trong thư mục con, với tên " standard-play-butotn.svg "

Tạo một tệp CSS trống trong thư mục con có tên svl-frontend.css .

Cuối cùng, chúng ta cần yêu cầu chủ đề con tùy chỉnh của mình sử dụng mã mới, vì vậy hãy mở tệp functions.php của chủ đề con tùy chỉnh của bạn và thêm phần sau vào đó.

/**
 * Simple Video Light-box.
 */
require_once 'simple-video-lightbox.php';

Được rồi, như vậy là đủ để nói với WordPress rằng chúng tôi đã tạo một shortcode mới có tên là svl_video , vì vậy hãy xem nó có hoạt động không. Chỉnh sửa trang hoặc bài đăng, tạo khối mã ngắn và thêm mã ngắn mới với thông số “url” trỏ đến video YouTube. Lưu nội dung của bạn và xem nó. Nếu mọi thứ hoạt động bình thường, bạn sẽ thấy văn bản “ Hộp đèn ở đây ” được hiển thị khi bạn muốn video của mình.

Hiển thị HTML của Mã ngắn

Bây giờ "giàn giáo" đã sẵn sàng, chúng tôi có thể thêm mã để hiển thị HTML thích hợp. Chúng tôi sẽ tạo một vùng figurechứa bên ngoài , bao bọc một hình ảnh thu nhỏ / áp phích mà chúng tôi có thể lấy từ YouTube (dựa trên URL video) hoặc chúng tôi có thể chỉ định nó theo cách thủ công (với thông số thumb = ”…”). Cập nhật tệp simple-video-lightbox.php của bạn với tệp sau.

/**
 * WP Tutorials : Simple Video Lightbox (svl)
 *
 * https://wp-tutorials.tech/add-functionality/responsive-video-light-box/
 */
// Block direct access.
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
const SVL_LITY_VERSION = '2.4.1';
function svl_enqueue_assets() {
   global $svl_have_assets_been_queued;
   if (is_null($svl_have_assets_been_queued)) {
      $base_url = get_stylesheet_directory_uri() . '/' . pathinfo(__FILE__, PATHINFO_FILENAME) . '/';
      $theme_version = wp_get_theme()->get('Version');
      // Lity
      wp_enqueue_style('lity', $base_url . 'lity.min.css', null, SVL_LITY_VERSION);
      wp_enqueue_script('lity', $base_url . 'lity.min.js', null, SVL_LITY_VERSION, true);
      // Our frontend CSS.
      wp_enqueue_style('svl-frontend', $base_url . 'svl-frontend.css', null, $theme_version);
      $svl_have_assets_been_queued = true;
   }
}
function svl_do_shortcode_video($atts) {
   $html = '';
   if (is_admin()) {
      // Don't do anything.
   } elseif (wp_doing_ajax()) {
      // Don't do anything.
   } else {
      // Enqueue the assets.
      svl_enqueue_assets();
      // Parse the arguments passed from the shortcode.
      $args = shortcode_atts(
         array(
            'url' => '',
            'thumb' => '',
            'alt' => 'A video',
            'w' => 400,
            'h' => 300,
            'caption' => '',
         ),
         $atts
      );
      if (empty($args['alt']) && !empty($args['caption'])) {
         $args['alt'] = $args['caption'];
      }
      $video_url = null;
      $css_classes = array('svl-container');
      if (empty($video_url = $args['url'])) {
         // No video URL specified.
      } elseif (strpos($video_url, 'youtube.com') > 0) {
         // We have a YouTube video URL, so parse the URL to grab the video
         // reference (v=xxxxxx) and maybe try to get the post JPEG for the
         // video too.
         $youtube_video_ref = null;
         $css_classes[] = 'youtube';
         if (!empty($args['thumb'])) {
            // We've set the thumbnail/poster in the "thumb" arg, so we
            // don't need to fetch the poster from YouTube.
         } else {
            $url_parts = parse_url($video_url);
            $query_args = null;
            if (is_array($url_parts) && array_key_exists('query', $url_parts)) {
               parse_str($url_parts['query'], $query_args);
            }
            if (is_array($query_args) && array_key_exists('v', $query_args) && !empty($query_args['v'])) {
               $youtube_video_ref = $query_args['v'];
            }
            if (!empty($youtube_video_ref)) {
               // Point the thumbnail/poster to YouTube,
               $args['thumb'] = sprintf(
                  'https://img.youtube.com/vi/%s/0.jpg',
                  $youtube_video_ref
               );
            }
         }
      } else {
         // Non-YouTube video, possibly self-hosted.
      }
      // If we've got a valid video URL, render the HTML.
      if (empty($video_url)) {
         // No video ref found, so do nothing.
         $html .= 'ERROR: No video_url';
      } else {
         $html .= sprintf('', implode(' ', $css_classes));
         $html .= sprintf('', esc_url($video_url), esc_attr($args['alt']));
         // For the SEO and screen-reader.
         if (!empty($args['caption'])) {
            $html .= sprintf('Video: %s', esc_attr($args['caption']));
         }
         // The thumbnail / poster image.
         $html .= sprintf(
            '',
            esc_url($args['thumb']),
            $args['w'],
            $args['h'],
            esc_attr($args['alt'])
         );
         $html .= '';
         if (!empty($args['caption'])) {
            $html .= sprintf('Video: %s', esc_attr($args['caption']));
            $html .= sprintf('%s', esc_html($args['caption']));
         }
         $html .= ''; // .svl-container
      }
   }
   return $html;
}
add_shortcode('svl_video', 'svl_do_shortcode_video');

Điều này có vẻ giống như một chút vụn vặt nhưng nó được phá vỡ khá đẹp và có vô số bình luận nữa. Các thông số cho shortcode của chúng tôi đi kèm, $attsvì vậy chúng tôi cần kéo URL video và có thể là thẻ alt hình ảnh thân thiện với SEO cho hình ảnh thu nhỏ của chúng tôi.

Phân tích cú pháp $attsđể lấy các thông số của shortcode.
Đặt hàng trước CSS / JS cho Lity, cùng với CSS của riêng chúng tôi.
Nếu chúng tôi đã chỉ định URL video có “youtube.com” trong đó và chúng tôi chưa chỉ định URL hình thu nhỏ…
1. Cố gắng tự động tạo URL hình ảnh thu nhỏ dựa trên URL video YouTube.
Nếu mã ngắn chưa chỉ định URL video…
1. Xuất một thông báo lỗi.
Khác…
1. Mở <figure>phần tử.
2. Mở <a>cho Lity.
3. Nếu chú thích đã được chỉ định…
  1. Xuất nó trong một <span>phần tử trình đọc màn hình đặc biệt - cũng tốt cho SEO.
4. Hiển thị <img>hình thu nhỏ / áp phích.
5. Nếu chú thích đã được chỉ định…
  1. Kết xuất một <figcaption>
6. Đóng <figure>phần tử.
Quay lại $htmlđể WordPress có thể hiển thị nó cho chúng tôi.

Đó là đủ để "làm cho nó hoạt động". Lưu các thay đổi của bạn, tải lại nội dung của bạn và bạn sẽ thấy hình thu nhỏ video của mình. Nhấp vào nó - nó sẽ mở hộp đèn video và phát

Điều gì sẽ xảy ra nếu nó không hoạt động…

Nếu đó là URL YouTube nhưng bạn không thấy hình thu nhỏ video, hãy kiểm tra xem URL YouTube của bạn có chính xác không và tham chiếu video có được chỉ định bằng “v = xxxxxxxxxx”
Hình thu nhỏ hiển thị OK, nhưng nhấp vào hình thu nhỏ sẽ đưa bạn đến trang YouTube thay vì hiển thị hộp đèn bật ra.
- Kiểm tra bảng điều khiển JavaScript của trình duyệt của bạn để xem liệu nó có không thể tải tệp lity.min.js vì lý do nào đó hay không.

Thêm một số kiểu

Bây giờ chúng tôi đã có một mã ngắn hoạt động để phát video YouTube, nhưng không rõ ràng rằng hình ảnh là một video - nó chỉ giống như một hình ảnh. Vì vậy, hãy đặt một nút Play trên hình ảnh với một số CSS. Dán phần sau vào tệp svl-frontend.css của bạn ..

/**
 * Simple Video Light-box
 *
 * https://wp-tutorials.tech/add-functionality/responsive-video-light-box/
 */
.svl-container {
   position:  relative;
   margin-bottom:  1em;
}
.svl-container > a {
   display:  block;
   border:  1px solid lightgrey;
   box-shadow: 0 0 1.00em rgba( 0, 0, 0, 0.20 );
   border-radius:  0.35em;
   overflow: hidden;
}
.svl-container > a:hover {
   box-shadow: 0 0 1.00em rgba( 0, 0, 0, 0.40 );
}
.svl-container > a img {
   display:  block;
   width:  100%;
   object-fit:  cover;
}
.svl-container > a::before {
   content: url( 'standard-play-butotn.svg' );
   position:  absolute;
   left:  50%;
   top:  50%;
   width:  25%;
   max-width:  5em;
   transform: translate(-50%, -50%);
   transition: 0.3s;
   opacity: 0.85;
   z-index:  10;
}
.svl-container.youtube > a::before {
   content: url( 'youtube-play-button.svg' );
}
.svl-container > a:hover::before {
   opacity: 1.00;
}
.svl-container figcaption {
   text-align: center;
   position:  absolute;
   bottom:  0;
   width:  100%;
   padding: 0.5em 0;
   color:  white;
   background-color:  #444444c0;
   pointer-events: none;
}

CSS khá đơn giản - dễ dàng hack nó để phù hợp với nhu cầu của bạn.

Kết thúc nó

Tôi nghĩ sẽ đẹp hơn nếu nhúng video như thế này, thay vì nhúng nội dung của YouTube, bởi vì nó tránh sử dụng iFrame. iFrames là một ý tưởng tồi vào những năm 2000 và bây giờ chúng vẫn là một ý tưởng tồi. Vì vậy, ở đó.

Bây giờ bạn đã kiểm soát 100% HTML, bạn thực sự có thể sử dụng nó cho SEO. Hãy thử mở rộng mã này một chút…

Đặt thuộc tính aria-label của <a>phần tử để có khả năng truy cập tốt hơn.
Rắc một số JavaScript mojo tùy chỉnh lên nó để hiển thị một số hiệu ứng di chuột qua thú vị.
Hãy xem trang web của Lity để biết thêm thông tin, vì nó không chỉ giới hạn ở việc hiển thị video.

Chúc bạn vui vẻ khi thêm hình thu nhỏ video trên trang web WordPress của bạn!