Cách thay đổi chiều rộng và chiều cao oEmbed trong WordPress

WordPress có khả năng thực hiện công việc về việc nhúng video và các oEmbed khác vào posts hoặc pages. Tuy nhiên, đôi khi bạn có thể muốn thay đổi độ rộng và chiều cao của phần nhúng một cách linh hoạt và tự động. Trong bài viết này, Vietnix sẽ hướng dẫn bạn cách thay đổi chiều rộng và chiều cao OEmbed trong WordPress.

Tại sao cần thay đổi chiều rộng và chiều cao OEmbed trong WordPress?

WordPress giúp bạn dễ dàng nhúng nội dung từ bên thứ ba vào bài viết và trang bằng công nghệ gọi là oEmbed.

Điều này cho phép bạn dễ dàng nhúng video YouTube, TikToks, tweet, và nhiều hơn nữa vào WordPress. Đặc biệt là nội dung này không được lưu trữ trên trang web WordPress, điều này giúp tiết kiệm tài nguyên máy chủ và cải thiện hiệu suất WordPress.

Nếu bạn muốn tìm hiểu sau hơn về cách nhúng video, tweet,… Vào WordPress, bạn có thể tham khảo bài viết sau đây.

WordPress tự động điều chỉnh chiều cao và chiều rộng của nội dung nhúng để phù hợp với các bài viết và trang một cách tốt. Tuy nhiên, một số người dùng có thể muốn thay đổi hành vi mặc định này.

Điều này rất tiện khi bạn đang sử dụng bố cục trang chủ tùy chỉnh hoặc làm việc trên thiết kế theme tùy chỉnh của riêng bạn. Nếu bạn muốn tìm hiểu thêm về thiết kế theme có thể tham khảo bài viết sau đây:

Chương trình khuyến mãi Mua Hosting Rinh Tên Miền

Thay đổi chiều rộng và chiều cao OEmbed trong WordPress bằng WPForms

Phương pháp này đòi hỏi bạn phải thêm code tùy chỉnh vào trang web WordPress. Chúng tôi sẽ sử dụng các thẻ điều kiện WordPress để phát hiện trang WordPress nào đang được xem và sau đó thay đổi chiều rộng và chiều cao mặc định của oEmbed tương ứng.

Chỉ cần thêm đoạn code sau vào tệp functions.php của theme, một plugin cụ thể cho trang web, hoặc code snippet plugin.

//Custom oEmbed Size
function wpb_oembed_defaults($embed_size) {
if(is_front_page()) {
        $embed_size['width'] = 940;
        $embed_size['height'] = 600;
}
else {
    $embed_size['width'] = 600;
        $embed_size['height'] = 338;
}
    return $embed_size;
}
add_filter('embed_defaults', 'wpb_oembed_defaults');

Vietnix khuyên bạn nên thêm code này sử dụng WPCode, code snippets plugin WordPress tốt nhất. Đây là cách dễ nhất để thêm code tùy chỉnh vào WordPress mà không cần chỉnh sửa tệp functions.php của theme.

Với phương pháp này, bạn không cần phải lo lắng về việc làm hỏng trang web. Hơn nữa, nếu bạn thay đổi theme WordPress, bạn sẽ có thể giữ lại tất cả các tùy chỉnh của mình.

Để bắt đầu, bạn cần cài đặt và kích hoạt plugin WPCode miễn phí. Đối với hướng dẫn từng bước, xem hướng dẫn của chúng tôi về cách cài đặt một plugin WordPress. Sau khi plugin được kích hoạt, đi đến Code Snippets > + Add Snippet từ bảng điều khiển quản trị WordPress. Sau đó, tìm tùy chọn Add Your Custom Code (New Snippet) và nhấp vào nút Use snippet.

Tiếp theo, chỉ cần sao chép và dán đoạn code từ phía trên vào hộp Code Preview. Bạn cũng cần chọn PHP Snippet làm loại code từ danh sách thả xuống ở bên phải.

Sau đó, chỉ cần chuyển công tắc ở đầu màn hình từ Inactive sang Active và nhấp vào nút Save Snippet.

Bạn có thể sử dụng bất kỳ thẻ điều kiện WordPress có sẵn nào để phát hiện các tình huống khác nhau.

Dưới đây là một ví dụ khác khi chúng tôi thay đổi chiều rộng mặc định của oEmbed cho một trang đích tùy chỉnh.

function wpb_oembed_defaults($embed_size) {
if( is_page( 42 ) ) {
        $embed_size['width'] = 940;
        $embed_size['height'] = 600;
}
else {
    $embed_size['width'] = 600;
        $embed_size['height'] = 338;
}
    return $embed_size;
}
add_filter('embed_defaults', 'wpb_oembed_defaults');

Như bạn có thể thấy, đoạn code này đơn giản là thiết lập một chiều rộng và chiều cao mặc định khác nhau cho một ID trang cụ thể.

Ngoài thay đổi chiều rộng và chiều cao oEMbed trong WordPress, bạn cũng có thể tham khảo thêm các bài viết khác về oEmbed tại Vietnix.vn để biết thêm nhiều kiến thức hữu ích.

Sử dụng CSS để thay đổi chiều rộng và chiều cao oEmbed trong WordPress

WordPress tự động thêm các lớp CSS mặc định vào các khu vực khác nhau của trang web. Các lớp CSS này sau đó có thể được sử dụng để thay đổi diện mạo của các nhúng trong các khu vực cụ thể của trang web.

Tương tự, WordPress cũng thêm các lớp CSS vào các block nhúng trong bài viết và trang. Một lần nữa, bạn sẽ sử dụng công cụ Inspect để tìm các lớp CSS được sử dụng bởi block nhúng.

Sau khi bạn có các lớp CSS này, bạn có thể sử dụng chúng để thiết lập chiều cao và chiều rộng động cho các oEmbed.

article#post-79 .wp-block-embed-pinterest {
    max-width: 200px!important;
    max-height: 400px!important;
}

Bạn có thể thử nghiệm code CSS của mình bằng cách thêm CSS tùy chỉnh trong trình tùy chỉnh theme. Khi bạn hài lòng, đừng quên lưu và xuất bản các thay đổi.

Để bắt đầu quá trình tối ưu website và đạt hiệu quả chuyển đổi doanh số cao nhất, bạn có thể đăng ký sử dụng Hosting WordPress của Vietnix để được hỗ trợ. Việc sử dụng Hosting WordPress của Vietnix sẽ giúp bạn tăng tốc độ và hiệu suất website, từ đó giúp tăng khả năng thu hút và giữ chân người dùng cũng như cải thiện trải nghiệm của họ trên website.

Vietnix cũng được biết đến là một nhà cung cấp giải pháp lưu trữ số và điện toán đám mây hàng đầu tại Việt Nam có hơn 11 năm kinh nghiệm trong lĩnh vực này. Với việc đăng ký bất cứ gói WordPress Hosting nào, bạn sẽ được hưởng sự tư vấn và hỗ trợ từ đội ngũ chuyên gia của Vietnix trong việc tối ưu tốc độ, hiệu suất cũng như giải quyết các vấn đề mà website đang gặp phải.

Hoạt động với phương châm “lấy thành công của khách hàng làm mục tiêu phục vụ”, Vietnix luôn chú trọng tới tốc độ, sự ổn định và bảo mật ở từng dịch vụ cung cấp cho khách hàng. Chính bởi vậy đã có hơn 100.000 dịch vụ được kích hoạt và 97% khách hàng giới thiệu dịch vụ Vietnix sau khi sử dụng. Chính bởi vậy, bạn có thể an tâm tin tưởng vào sự hỗ trợ của Vietnix trong việc tối ưu hóa website và đạt được hiệu quả kinh doanh cao nhất.

Mọi vấn đề thắc mắc cần tư vấn, quý khách vui lòng liên hệ:

• Địa chỉ: 265 Hồng Lạc, Phường 10, Quận Tân Bình, Thành Phố Hồ Chí Minh.
• Hotline: 1800 1093.
• Email: sales@vietnix.com.vn.

Lời kết

Chúng tôi hy vọng hai phương pháp này đã giúp bạn học cách dễ dàng thay đổi chiều rộng và chiều cao oEmbed trong WordPress. Bạn cũng có thể tham khảo thêm các bài viết khác về chủ đề WordPress để biết thêm nhiều kiến thức mới hữu ích, chúc bạn thành công!