4 cách đặt oEmbed max width WordPress

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

Giới Thiệu về oEmbed và Max Width trong WordPress

oEmbed là một giao thức cho phép nhúng nội dung đa phương tiện từ các website khác vào trang web của bạn một cách dễ dàng. Thay vì phải sao chép và dán mã nhúng phức tạp, WordPress tự động chuyển đổi các URL hợp lệ thành nội dung được nhúng trực tiếp, ví dụ như video YouTube, bài đăng Twitter, hoặc ảnh Instagram.

Max Width (chiều rộng tối đa) là một thuộc tính quan trọng trong việc hiển thị nội dung oEmbed một cách thẩm mỹ và phù hợp với bố cục trang web của bạn. Việc kiểm soát chiều rộng tối đa giúp đảm bảo rằng nội dung được nhúng không bị tràn ra ngoài container, phá vỡ giao diện, đặc biệt trên các thiết bị di động.

Bài viết này sẽ hướng dẫn bạn 4 cách để đặt oEmbed Max Width trong WordPress, giúp bạn tùy chỉnh hiển thị nội dung nhúng một cách chuyên nghiệp.

Cách 1: Sử Dụng WordPress Theme Customizer (Tùy Biến Giao Diện)

Một số theme WordPress đã tích hợp sẵn các tùy chọn để điều chỉnh chiều rộng tối đa của nội dung oEmbed thông qua Theme Customizer (Công cụ Tùy Biến Giao Diện). Cách thực hiện như sau:

  1. Đăng nhập vào trang quản trị WordPress.
  2. Đi đến Appearance (Giao Diện) -> Customize (Tùy Biến).
  3. Tìm kiếm các tùy chọn liên quan đến “Content Width” (Chiều Rộng Nội Dung) hoặc “oEmbed Settings” (Cài Đặt oEmbed). Tùy thuộc vào theme bạn sử dụng, vị trí và tên gọi của các tùy chọn này có thể khác nhau.
  4. Nhập giá trị chiều rộng tối đa mong muốn (thường là pixel).
  5. Xem trước thay đổi và nhấn “Publish” (Đăng) để lưu lại.

Ưu điểm của phương pháp này là dễ thực hiện, không cần code. Tuy nhiên, nó phụ thuộc vào việc theme của bạn có hỗ trợ tùy chọn này hay không.

Cách 2: Sử Dụng CSS (Cascading Style Sheets)

Nếu theme của bạn không cung cấp tùy chọn tùy biến oEmbed max width, bạn có thể sử dụng CSS để can thiệp vào cách hiển thị nội dung nhúng. Bạn có thể thêm CSS trực tiếp vào Theme Customizer hoặc sử dụng child theme để đảm bảo các thay đổi không bị mất khi cập nhật theme.

Dưới đây là ví dụ về CSS để đặt max width cho iframe (thường được sử dụng để nhúng nội dung oEmbed):


.entry-content iframe,
.entry-content object,
.entry-content embed {
    max-width: 100%;
    width: 100%;
    height: auto;
}
  • .entry-content: Chọn phần tử chứa nội dung bài viết (thường là class này). Điều này đảm bảo CSS chỉ áp dụng cho nội dung nhúng trong bài viết.
  • iframe, object, embed: Chọn tất cả các thẻ iframe, object, và embed (các thẻ thường được sử dụng để nhúng nội dung).
  • max-width: 100%;: Đặt chiều rộng tối đa là 100% của container cha.
  • width: 100%;: Đặt chiều rộng là 100%.
  • height: auto;: Giữ tỷ lệ khung hình ban đầu.

Để thêm CSS vào Theme Customizer:

  1. Đi đến Appearance (Giao Diện) -> Customize (Tùy Biến).
  2. Chọn “Additional CSS” (CSS Bổ Sung).
  3. Dán đoạn code CSS trên vào.
  4. Xem trước thay đổi và nhấn “Publish” (Đăng).

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

Có nhiều plugin WordPress được thiết kế để quản lý nội dung oEmbed và cho phép bạn tùy chỉnh các cài đặt, bao gồm cả max width. Một số plugin phổ biến bao gồm:

  • “oEmbed Plus”: Cung cấp các tùy chọn nâng cao cho oEmbed, bao gồm lazy loading và tùy chỉnh chiều rộng.
  • “EmbedPress”: Cho phép bạn nhúng nội dung từ nhiều nguồn khác nhau và tùy chỉnh cách hiển thị.
  • “Jetpack”: Một plugin đa năng với nhiều tính năng, bao gồm cả tùy chọn oEmbed. (Tuy nhiên, việc sử dụng Jetpack chỉ vì oEmbed có thể không hiệu quả nếu bạn không sử dụng các tính năng khác của plugin.)

Để sử dụng plugin:

  1. Đi đến Plugins (Plugin) -> Add New (Cài Mới).
  2. Tìm kiếm plugin bạn muốn sử dụng.
  3. Cài đặt và kích hoạt plugin.
  4. Truy cập trang cài đặt của plugin và tìm kiếm các tùy chọn liên quan đến oEmbed max width.
  5. Cấu hình cài đặt theo ý muốn và lưu lại.

Plugin là một giải pháp tiện lợi, đặc biệt nếu bạn không muốn chỉnh sửa code. Tuy nhiên, hãy chọn plugin từ những nhà phát triển uy tín và đảm bảo plugin tương thích với phiên bản WordPress của bạn.

Cách 4: Sử Dụng Filter trong File functions.php

Đây là một phương pháp nâng cao, đòi hỏi bạn phải chỉnh sửa file functions.php của theme. Bạn nên sử dụng child theme để đảm bảo các thay đổi không bị mất khi cập nhật theme.

WordPress cung cấp một filter (bộ lọc) gọi là embed_defaults cho phép bạn sửa đổi các tham số mặc định của oEmbed. Bạn có thể sử dụng filter này để đặt max width.

Thêm đoạn code sau vào file functions.php của child theme:


function my_custom_embed_defaults( $defaults ) {
    $defaults['width'] = 640; // Đặt chiều rộng mặc định
    return $defaults;
}
add_filter( 'embed_defaults', 'my_custom_embed_defaults' );
  • my_custom_embed_defaults: Tên hàm bạn tự đặt.
  • $defaults: Mảng chứa các tham số mặc định của oEmbed.
  • $defaults['width'] = 640;: Thay đổi chiều rộng mặc định thành 640px. Bạn có thể thay đổi giá trị này theo ý muốn.
  • add_filter( 'embed_defaults', 'my_custom_embed_defaults' );: Kết nối hàm của bạn với filter embed_defaults.

Phương pháp này cho phép bạn kiểm soát chiều rộng mặc định của tất cả các nội dung oEmbed trên trang web của bạn. Lưu ý rằng nếu nguồn nhúng cung cấp kích thước lớn hơn chiều rộng bạn đặt, nội dung sẽ được co lại để phù hợp.

Lưu ý quan trọng: Trước khi chỉnh sửa file functions.php, hãy sao lưu file này để tránh mất dữ liệu nếu có lỗi xảy ra.

Kết luận

Bài viết đã giới thiệu 4 cách đặt oEmbed Max Width trong WordPress. Mỗi phương pháp có ưu và nhược điểm riêng, tùy thuộc vào trình độ kỹ thuật và nhu cầu của bạn. Nếu bạn không muốn chỉnh sửa code, việc sử dụng Theme Customizer hoặc plugin là những lựa chọn đơn giản. Nếu bạn muốn kiểm soát chi tiết hơn, việc sử dụng CSS hoặc filter trong file functions.php sẽ phù hợp hơn.

Việc điều chỉnh oEmbed Max Width là một bước quan trọng để đảm bảo trang web của bạn có giao diện chuyên nghiệp và thân thiện với người dùng trên mọi thiết bị.

Related Topics by Tag
, , , ,

..