4 cách đặt oEmbed max width WordPress

2 tháng ago, WordPress Themes, Views
4 cách đặt oEmbed max width WordPress

4 Cách Đặt oEmbed Max Width WordPress

Giới thiệu oEmbed và tầm quan trọng của Max Width

oEmbed là một giao thức cho phép một trang web nhúng nội dung từ một trang web khác (như YouTube, Vimeo, Twitter, Instagram, v.v.) một cách dễ dàng. WordPress hỗ trợ oEmbed, cho phép bạn chỉ cần dán URL của một video YouTube vào trình soạn thảo và WordPress sẽ tự động nhúng video đó vào bài viết của bạn. Tuy nhiên, kích thước mặc định của các oEmbed này đôi khi không phù hợp với bố cục trang web của bạn. Đó là lý do tại sao việc đặt max-width (chiều rộng tối đa) cho oEmbed là rất quan trọng.

Việc kiểm soát chiều rộng tối đa của oEmbed mang lại nhiều lợi ích:

  • Đảm bảo nội dung nhúng không tràn ra khỏi container của nó, duy trì tính thẩm mỹ của trang web.
  • Tối ưu hóa trải nghiệm người dùng trên các thiết bị khác nhau, đặc biệt là trên thiết bị di động.
  • Giúp trang web tải nhanh hơn bằng cách tránh việc tải các nội dung nhúng quá lớn.

Cách 1: Sử dụng CSS để đặt Max Width cho oEmbed

Cách đơn giản nhất để đặt max-width cho oEmbed là sử dụng CSS. Bạn có thể thêm CSS tùy chỉnh vào chủ đề của bạn thông qua trình tùy biến của WordPress (Appearance -> Customize -> Additional CSS) hoặc thông qua tệp style.css của chủ đề con.

Ví dụ, để đặt max-width cho tất cả các video YouTube nhúng là 640px, bạn có thể sử dụng CSS sau:


.wp-block-embed-youtube {
  max-width: 640px;
  margin: 0 auto; /* Để căn giữa video */
}

.wp-block-embed-youtube iframe {
  width: 100%;
  height: auto;
}

Giải thích:

  • .wp-block-embed-youtube là class CSS của khối YouTube trong WordPress Gutenberg.
  • max-width: 640px; đặt chiều rộng tối đa cho khối này là 640px.
  • margin: 0 auto; căn giữa khối này theo chiều ngang.
  • .wp-block-embed-youtube iframe chọn iframe bên trong khối YouTube.
  • width: 100%; đảm bảo iframe luôn chiếm 100% chiều rộng của khối cha của nó.
  • height: auto; giữ tỷ lệ khung hình của video.

Bạn có thể điều chỉnh giá trị max-width cho phù hợp với bố cục trang web của bạn. Ngoài ra, bạn có thể sử dụng các class CSS khác để nhắm mục tiêu các loại oEmbed khác nhau, ví dụ:

  • .wp-block-embed-vimeo cho video Vimeo.
  • .wp-block-embed-twitter cho tweet Twitter.
  • .wp-block-embed-instagram cho ảnh Instagram.

Cách 2: Sử dụng filter `embed_oembed_html`

Một cách khác để kiểm soát chiều rộng tối đa của oEmbed là sử dụng filter embed_oembed_html trong WordPress. Filter này cho phép bạn sửa đổi HTML của oEmbed trước khi nó được hiển thị trên trang web của bạn. Bạn có thể thêm code này vào tệp functions.php của chủ đề con của bạn.

Ví dụ, để đặt max-width cho tất cả các oEmbed là 640px, bạn có thể sử dụng code sau:


function my_embed_oembed_html( $html, $url, $attr ) {
  return '
' . $html . '
';
}
add_filter( 'embed_oembed_html', 'my_embed_oembed_html', 10, 3 );

function my_oembed_styles() {
  echo '';
}
add_action( 'wp_head', 'my_oembed_styles' );

Giải thích:

  • Hàm my_embed_oembed_html nhận ba tham số: $html (HTML của oEmbed), $url (URL của nội dung nhúng) và $attr (các thuộc tính).
  • Hàm này bọc HTML của oEmbed trong một div với class embed-container và inline style max-width: 640px; margin: 0 auto;.
  • Hàm my_oembed_styles thêm CSS vào phần head của trang web để đảm bảo video có tỷ lệ khung hình đúng (16:9 trong ví dụ này) và chiếm đầy đủ không gian của container.
  • add_filter( 'embed_oembed_html', 'my_embed_oembed_html', 10, 3 ); đăng ký hàm my_embed_oembed_html với filter embed_oembed_html.
  • add_action( 'wp_head', 'my_oembed_styles' ); đăng ký hàm my_oembed_styles để được thực thi trong phần head của trang web.

Cách này linh hoạt hơn cách sử dụng CSS vì nó cho phép bạn sửa đổi HTML của oEmbed trước khi nó được hiển thị. Bạn có thể sử dụng nó để thêm các class CSS tùy chỉnh hoặc các thuộc tính khác vào oEmbed.

Cách 3: Sử dụng Plugin WordPress

Nếu bạn không muốn viết code, bạn có thể sử dụng một plugin WordPress để quản lý kích thước oEmbed. Có rất nhiều plugin miễn phí và trả phí có sẵn trên WordPress.org. Một số plugin phổ biến bao gồm:

  • oEmbed Plus: Plugin này cho phép bạn kiểm soát kích thước của oEmbed và thêm các tính năng khác, chẳng hạn như lazy loading.
  • Advanced oEmbed: Plugin này cung cấp các tùy chọn nâng cao để tùy chỉnh oEmbed, bao gồm cả việc đặt max-width.
  • Responsive Video Embeds: Plugin này tập trung vào việc làm cho video nhúng responsive trên các thiết bị khác nhau.

Sử dụng plugin là cách dễ nhất để quản lý kích thước oEmbed nếu bạn không quen thuộc với CSS hoặc code.

Cách 4: Sử dụng shortcode

Mặc dù ít phổ biến hơn, bạn có thể sử dụng shortcode để tạo một wrapper cho nội dung oEmbed và kiểm soát kích thước của nó. Cách này đòi hỏi bạn phải tạo một shortcode tùy chỉnh trong tệp functions.php của chủ đề con.

Ví dụ, bạn có thể tạo một shortcode có tên là embed_wrapper như sau:


function embed_wrapper_shortcode( $atts, $content = null ) {
    $atts = shortcode_atts( array(
        'width' => '640', // Chiều rộng mặc định
    ), $atts );

    $width = esc_attr( $atts['width'] );

    return '
' . do_shortcode( $content ) . '
';
}
add_shortcode( 'embed_wrapper', 'embed_wrapper_shortcode' );

Sau đó, bạn có thể sử dụng shortcode này trong bài viết của bạn như sau:


[embed_wrapper width="800"]
https://www.youtube.com/watch?v=YOUR_VIDEO_ID
[/embed_wrapper]

Giải thích:

  • Hàm embed_wrapper_shortcode nhận hai tham số: $atts (các thuộc tính của shortcode) và $content (nội dung bên trong shortcode).
  • Hàm này sử dụng hàm shortcode_atts để xác định các thuộc tính mặc định của shortcode. Trong ví dụ này, chúng ta chỉ có một thuộc tính là width với giá trị mặc định là 640.
  • Hàm này bọc nội dung bên trong shortcode (URL của video YouTube) trong một div với inline style max-width được đặt bằng giá trị của thuộc tính width.
  • Hàm do_shortcode( $content ) đảm bảo rằng bất kỳ shortcode nào bên trong shortcode embed_wrapper đều được xử lý. Điều này quan trọng vì URL của video YouTube sẽ tự động được chuyển đổi thành một oEmbed bởi WordPress.
  • add_shortcode( 'embed_wrapper', 'embed_wrapper_shortcode' ); đăng ký shortcode embed_wrapper với WordPress.

Cách này linh hoạt hơn cách sử dụng CSS trực tiếp, nhưng nó đòi hỏi bạn phải viết code và sử dụng shortcode trong mỗi bài viết.

Kết luận

Việc đặt max-width cho oEmbed là rất quan trọng để đảm bảo trang web của bạn có giao diện đẹp và thân thiện với người dùng trên tất cả các thiết bị. Có nhiều cách để thực hiện việc này, từ việc sử dụng CSS đơn giản đến việc sử dụng plugin hoặc code tùy chỉnh. Hãy chọn phương pháp phù hợp nhất với kỹ năng và nhu cầu của bạn.

Related Topics by Tag
, , , ,

..