Cách tải lên tệp WebP trên WordPress

Bạn có lo lắng về cách chuyển đổi hình ảnh .jpg và .png sang tệp .webp bằng một trang web đơn giản không? Một giải pháp rất gọn gàng và thông minh để thu nhỏ kích thước tệp hình ảnh của bạn để cải thiện tốc độ trang blog của bạn mà không phải trả bất kỳ khoản nào cho dịch vụ cơ bản này. Bây giờ bạn có thể thêm hình ảnh WebP trên trang web WordPress của mình mà không cần plugin. Chỉ cần truy cập trang web chuyển đổi hình ảnh trực tuyến và chọn tệp jpg, jpeg hoặc png của bạn. Sau đó, hãy nhấp vào “Bắt đầu chuyển đổi”. Xem hướng dẫn trong hình ảnh bên dưới.

1. https://image.online-convert.com/convert-to-webp
2. https://ezgif.com/jpg-to-webp

Làm thế nào về việc tải trực tiếp hình ảnh WebP lên WordPress? Điều này thật dễ dàng. Chỉ cần thêm một số dòng code trên tệp functions.php chủ đề của bạn. WordPress không hỗ trợ xem và tải lên các tệp WebP, nhưng tôi sẽ giải thích cho bạn cách bạn có thể làm cho nó hoạt động trong một vài bước đơn giản. Đăng nhập vào khu vực quản trị WordPress của bạn và đi tới Appearance / Theme Editor và tìm functions.php, sau đó sao chép và dán mã bên dưới vào cuối tệp và lưu nó.

//** *Enable upload for webp image files.*/
function webp_upload_mimes($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

Nếu bạn muốn xem trước hình ảnh (hình thu nhỏ) khi truy cập Media / Library, bạn phải thêm đoạn mã này vào bên dưới trong cùng một tệp functions.php. Bạn có thể tìm thấy tệp functions.php ở đâu? Đi tới Appearance / Theme Editor và tìm functions.php, sau đó sao chép và dán đoạn mã bên dưới vào cuối tệp và lưu nó.

//** * Enable preview / thumbnail for webp image files.*/
function webp_is_displayable($result, $path) {
    if ($result === false) {
        $displayable_image_types = array( IMAGETYPE_WEBP );
        $info = @getimagesize( $path );

        if (empty($info)) {
            $result = false;
        } elseif (!in_array($info[2], $displayable_image_types)) {
            $result = false;
        } else {
            $result = true;
        }
    }

    return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

WebP là gì? WebP là một định dạng hình ảnh hiện đại cung cấp khả năng nén không mất dữ liệu và mất dữ liệu vượt trội cho hình ảnh trên web. Sử dụng WebP, quản trị viên web và nhà phát triển web có thể tạo hình ảnh nhỏ hơn, phong phú hơn để làm cho web nhanh hơn. Hình ảnh không mất dữ liệu WebP có kích thước nhỏ hơn 26% so với PNG. Hình ảnh mất dữ liệu WebP nhỏ hơn 25-34% so với hình ảnh JPEG tương đương ở chỉ số chất lượng SSIM tương đương. WebP được hỗ trợ nguyên bản trong trình duyệt Google Chrome, Firefox, Edge, Opera và nhiều công cụ và thư viện phần mềm khác. Các nhà phát triển cũng đã hỗ trợ thêm nhiều công cụ chỉnh sửa hình ảnh.

Cách tải lên hình ảnh SVG trên WordPress

Đăng nhập vào khu vực quản trị WordPress của bạn và đi tới Appearance / Theme Editor và tìm functions.php, sau đó sao chép và dán mã bên dưới vào cuối tệp và lưu nó. Lưu ý: Trước khi tiếp tục, hãy nhớ sao lưu trang web WordPress mục nhập của bạn.

// Allow SVG
add_filter('wp_check_filetype_and_ext', function ($data, $file, $filename, $mimes) {

    if (!$data['type']) {
        $wp_filetype = wp_check_filetype($filename, $mimes);
        $ext = $wp_filetype['ext'];
        $type = $wp_filetype['type'];
        $proper_filename = $filename;
        if ($type && 0 === strpos($type, 'image/') && $ext !== 'svg') {
            $ext = $type = false;
        }
        $data['ext'] = $ext;
        $data['type'] = $type;
        $data['proper_filename'] = $proper_filename;
    }
    return $data;


}, 10, 4);


add_filter('upload_mimes', function ($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
});


add_action('admin_head', function () {
    echo '';
});

Cách hiển thị bản xem trước hình ảnh thu nhỏ .svg trên WordPress Back-End

Nếu bạn muốn xem bản xem trước hình ảnh (hình thu nhỏ) khi bạn truy cập WordPress / Media / Library, bạn phải thêm đoạn mã này vào bên dưới trong cùng một tệp functions.php. Bạn có thể tìm thấy tệp functions.php ở đâu? Đi tới Appearance / Theme Editor và tìm functions.php, sau đó sao chép và dán đoạn mã bên dưới vào cuối tệp và lưu nó.

//** * Enable preview / thumbnail for svg image files.*/
function webp_is_displayable($result, $path) {
    if ($result === false) {
        $displayable_image_types = array( IMAGETYPE_svg );
        $info = @getimagesize( $path );

        if (empty($info)) {
            $result = false;
        } elseif (!in_array($info[2], $displayable_image_types)) {
            $result = false;
        } else {
            $result = true;
        }
    }

    return $result;
}
add_filter('file_is_displayable_image', 'svg_is_displayable', 10, 2);

Sau khi nhập các mã ở trên, bạn sẽ có thể tải lên hình ảnh của mình ở định dạng .svg nhưng bạn sẽ không thể nhìn thấy chúng trong giao diện người dùng (bài viết / trang) WordPress của mình. Để làm điều này, hãy làm theo hướng dẫn bên dưới.

Cách hiển thị hình ảnh .svg trên Giao diện người dùng WordPress với CSS tùy chỉnh

Chuyển đến WordPress / Appearance / Customize / Extra CSS và sao chép, dán đoạn mã bên dưới rồi lưu.

/* Display .svg on front end */
img[src$=".svg"] { width: auto; height: auto; }

Cách hiển thị hình ảnh menu trên Giao diện người dùng WordPress với CSS tùy chỉnh

<script>let prevPos = 0;

window.onscroll = function() {
const currentPos = window.pageYOffset;

if (currentPos < prevPos) {
document.getElementById("footer-additional").style.bottom = "-150";
}
else {
document.getElementById("footer-additional").style.bottom = "0px";
}

prevPos = currentPos;
}
</script>

.footer-additional {
font-family: sans-serif;

text-align: center;

position: fixed;
z-index: 9999;

left: 0;
bottom: 0px;

width: 100%;
margin: 0;

background-color: #0057ff;
transition: bottom .25s ease-in-out;

display: flex;
flex-direction: column;
justify-content: center;
gap: 0px;
}


.footer-additional ul {
list-style: none;
padding-inline-start: 0;

display: flex;
justify-content: center;

margin: 0;
}

.footer-additional ul.mobile-menu {
border-bottom: 1px solid rgba(255,255,255,.5);
}

.footer-additional ul li {
// flex: 1 1 0px;
}

.footer-additional ul li a {
display: flex;
justify-content: center;
align-items: center;

padding: 5px 20px;

text-decoration: none;
color: white;
transition: all .35s ease-in-out;
}
.footer-additional ul li a:hover {
background: rgba(0,0,0,0.5)
}
.footer-additional ul.mobile-menu li a {
gap: 10px;
}


.footer-additional ul li:not(:last-child) {
border-right: 1px solid rgba(255,255,255,.5);
}


.footer-additional ul li img {
max-width: 30px;
}
.footer-additional ul li span {
color: #fff;
font-size: 15px;
}

@media only screen and (max-width: 850px) {
.footer-additional ul li a {
flex-direction: column;
}
}

@media only screen and (max-width: 640px) {
.footer-additional ul li img {
max-width: 17px;
}
.footer-additional ul li span {
color: #fff;
font-size: 12px;
}
}

@media only screen and (max-width: 471px) {
.footer-additional ul li img {
max-width: 15px;
}
.footer-additional ul li span {
color: #fff;
font-size: 9px;
}
}


@media only screen and (max-width: 388px) {
.footer-additional ul li img {
max-width: 15px;
}
.footer-additional ul li span {
color: #fff;
font-size: 9px;
}
}