[SVG] Cho phép Upload SVG

Mặc định vì lý do bảo mật, wordpress không cho phép upload tệp .SVG lên thư viện Media. Tuy nhiên do nhu cầu ngày càng tăng và việc sử dụng các hình ảnh SVG là cần thiết cho việc tối ưu và làm đẹp Website. Trong bài đăng này sẽ giúp bạn Upload SVG lên Media chỉ bằng Function.

Function Allow Upload SVG lên Media của WordPress

Trong mã code được chia sẻ mình cũng đã tính đến bảo mật và chức năng. Một số ưu điểm của mã code mà mình đã code

• Cho phép Upload SVG hoàn chỉnh
• Bảo mật bằng cách kiểm tra quyền được chỉnh sửa bài đăng mới được Upload SVG
• Kiểm tra kỹ các tệp mới cho phép Upload SVG

Hướng dẫn Sử dụng

Để sử dụng [SVG] Cho phép Upload SVG rất đơn giản. Bạn hãy thêm Function được hướng dẫn trong Bài đăng này vào vị trí theo các bước chi tiết trong hướng dẫn dưới đây.

Đối với phần Functions:

• Bước 1: Truy cập vào Admin Dashboard tìm đến Giao diện (Themes) / Theme File Editor / Functions.php.
• Bước 2: Cuộn xuống dưới cùng của trình chỉnh sửa, dán Code sau vào cuối tệp và lưu lại.
• Bước 3: Chú ý, một số trường hợp cần Clear Cache nếu bạn đang sử dụng các Plugin Cache như WP Rocket, LiteSpeed Cache, ..etc
• Bước 4: Thưởng thức

Đối với phần CSS:

• Bước 1: Ở ngoài Front End (Giao diện người dùng, ví dụ Trang chủ). Trên thanh điều hướng Admin Bạn truy cập vào Tùy Biến (Customize) và tìm đến phần Custom CSS.
• Bước 2: Copy phần CSS và dán vào cuối phần chứa mã CSS và Lưu lại.
• Bước 3: Tải lại trang (Reload Page) hiển thị phần CSS trên. Chú ý, một số trường hợp cần Clear Cache nếu bạn đang sử dụng các Plugin Cache như WP Rocket, LiteSpeed Cache, ..etc.
• Bước 4: Thưởng thức

MẸO: Bạn có thể sử dụng phím tắt để Tải lại trang không kèm Cache, tuy nhiên vẫn cần chú ý Clear Cache với các Plugin tạo Cache như Bước 3.

Với Windows: Ctrl + Shift + R
Với macOS: Command + Shift + R

/*
* Cho phép Uploads Webp + SVG
* Chia sẻ bởi https://realdev.vn/
*/
function realdev_upload_svg( $mimes = array() ) {
    $user = wp_get_current_user();
    $current_user_roles = (array) $user->roles;
    $is_role_allowed = in_array('editor', $current_user_roles);
    if (!$is_role_allowed) {
        return $mimes;
    }
    $mimes['svg'] = 'image/svg+xml';
    $mimes['svgz'] = 'image/svg+xml';
    return $mimes;
}

add_filter('upload_mimes', 'realdev_upload_svg', 99);
function realdev_check_svg($checked, $file, $filename, $mimes) {
    if (!$checked['type']) {
        $check_filetype = wp_check_filetype($filename, $mimes);
        $ext = $check_filetype['ext'];
        $type = $check_filetype['type'];
        $proper_filename = $filename;
        if ($type && 0 === strpos($type, 'image/') && $ext !== 'svg') {
            $ext = $type = false;
        }
        $checked = compact('ext', 'type', 'proper_filename');
    }
    return $checked;
}
add_filter('wp_check_filetype_and_ext', 'realdev_check_svg', 10, 4);

Kết

Như vậy mình đã Chia sẻ Cho phép Upload SVG | Allow Upload SVG to WordPress chỉ bằng Function. Chúc bạn thành công.!

Lời ngỏ từ RealDev

Để viết lên được một bài đăng tâm huyết thì mình cũng mất rất nhiều thời gian cho việc viết code, viết content, tạo ảnh, thêm các hướng dẫn custom nên đừng tiếc tặng mình một đánh giá, reviews thật lòng nhé. Điều này rất quan trọng vì nó giúp mình có thêm động lực và niềm vui cho đi hơn.!

Các Core WordPress / Kiến thức được chia sẻ trên RealDev đều hoàn toàn tham khảo từ các nguồn chính thống của WordPress. Mình đã nghiên cứu đúc kết và sáng tạo thành kiến thức thực tế để áp dụng và sử dụng.

Bản thân mình thấy nó có ích và muốn chia sẻ tới nhiều người để hiểu hơn. Hãy sử dụng cẩn thận và chắc chắn nếu bạn có kiến thức về Website WordPress và tránh xung đột các tên Functions. Mọi sự hỗ trợ hãy Comment, để được giúp đỡ.

Chúc một ngày giàu năng lượng và nhiều tốt lành, may mắn đến Bạn và Gia đình.!

Nếu bạn cần mình hỗ trợ thêm, hoặc muốn liên hệ mình làm Dịch vụ nào đó liên quan đến Website WordPress thì mình luôn sẵn sàng phục vụ bạn bằng tất cả cái Tâm và Tầm mình có. Liên hệ mình theo một trong nhiều phương cách dưới đây:

• Hotline: 0907.648.555
• Facebook: https://www.facebook.com/TuNguoiTruyenLua/
• Zalo: https://zalo.me/vinhminhdao

Thân mến và Trân trọng tín nhiệm của Bạn.!