Upload gambar WebP WordPress tampa plugin
Ilustrasi

Upload gambar WebP WordPress tampa plugin

By default WordPress belum mendukung upload file gambar format WebP (baca webppy) ke dalam library gallery WordPress. Padahal semua browser modern saat ini telah mendukung format WebP.

WordPress sangat membatasi file berextensi apa saja yang boleh di upload ke sistem WP, demi menjaga keamana sitem WP itu sendiri. Secara default, WP cuma mengizinkan extensi file populer seperti;

  • Image files: .jpg, .jpeg, .png, .gif, .ico
  • Document files: .pdf, .doc, .xls, .ppt, .odt, .psd, .zip
  • Audio files: .mp3, .m4a, .ogg, .wav
  • Vidoe files: .mp4, .mov, .avi, .mpg, .ogv, .3gp, .3g2

Selain extensi file tersebut, kita harus meng unlock sendiri sistem WP untuk menambah daftar perizinan upload file.

Ada banyak cara untuk memaksa sistem WordPress supaya bisa menerima file berextention .webp. Salah satunya, ya… install plugin pihak ketiga.

Nah… Kalau urasan plugin, silahkan cari sendiri di laman galery plugin WordPress, yang develop plugin support webp banyak sekali.

InsertApps sendiri termasuk webdev yang tidak suka pasang plugin kalau membuat web/blog dengan CMS WordPress, kecuali tidak ada cara lain, baru pilah pilih install plugin.

Cara yang paling kami sukai dengan membuka permisi upload file WebP Ke sistem WP, cukup dengan trick simple saja, insert script ke dalam file functions.php.

Berikut code php untuk ‘unlock’ allow upload file .webp CMS WordPress tampa plugin:

// Allow upload .webp file format.
function allow_upload_webp_file($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'allow_upload_webp_file');

// Allow view thumbnail for webp format files.
function allow_webp_file_view($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', 'allow_webp_file_view', 10, 2);

Penjelasan code:

  • Blok code pertama, function allow_upload_webp_file() { } adalah sebuah fungsi—method—untuk menambah daftar extensi file .webp yang boleh di upload ke dalam sistem WordPress.
  • Block code kedua, function allow_webp_file_view() { } adalah fungsi untuk menambah kemampuan preview gambar dalam media gallery WP. Kalau function ini tidak ada, maka file WebP yang di upload tidak tampil thumbnail preview.
  • Baris code add_filter() adalah key functions bawaan dari WordPress yang memungkin untuk melakukan berbagai setting dan tweaking ke dalam sistem WordPress.

Cukup segitu saja codenya, sudah kelar urusan upload file .webp ke sitem WordPress tampa plugin—jasa makelar pihak ketiga.

Bagaimana mudah bukan?

Tambahan. Untuk nama function bebas saja, boleh mengganti dengan nama sesuka hati, asal jangan sama dengan nama functions yang sudah ada, juga tidak boleh ada spasi, ataupun dimulai dengan angka.

Misal;

// Fungsi allow upload file WebP WP tampa plugin
function mantan_sayang_izinkan_upload_file_webp_ke_dalam_wordpress() {
	// do something
}

// Menambah fungsi mantan ke sistem wp dengan mendaftar ke bagian wp add_filter
add_filter('mime_types', 'mantan_sayang_izinkan_upload_file_webp_ke_dalam_wordpress');

Baca aturan pakai add_filter selengkapnya di laman resmi dokumentasi WordPress: add filter function code reference.

Kesimpulan:

Hanya dengan beberapa baris script, portal news, blog, website pemda memakai CMS WordPress sudah bisa support upload file gambar .webp. Cara ini lebih super simple, mudah, dan sangat elegant ketimbang harus menginstall plugin khusus .webp. 🙏

FAQ:

Bagaimana cara ubah gambar JPG/PNG ke WebP atau convert image JPG to WebP❓

Tutorial cara mengubah gambar JPG ke WebP sudah ada penjelasan di laman blog Breedie dengan klik tautan berikut ini: Convert image JPG to WEBP.

Comment

comments powered by Disqus