Cara mengunggah SVG ke WordPress: 2 metode

Ingin mempelajari cara mengunggah SVG ke WordPress? Kami akan menyajikan dalam tutorial ini metode untuk mencapai ini..

Administrator web dan perancang web terikat untuk menggunakan format file media yang berbeda dalam pekerjaan mereka. Salah satu format paling populer saat ini adalah SVG, format vektor berbasis XML. Sayangnya, tidak semua browser dan platform mendukung SVG, jadi Anda harus mengaktifkan dukungan SVG secara manual terlebih dahulu.

Artikel ini akan membahas langkah-langkah untuk mengunggah file SVG ke situs web WordPress menggunakan plugin Dukungan SVG. Kami juga akan menjawab beberapa pertanyaan mengenai masalah keamanan seputar format file media khusus ini dan mengapa SVG layak digunakan.

Untuk memulai, mari mengenal SVG dan cara kerjanya.

Tetapi sebelum kita mulai, jika Anda belum pernah menginstal WordPress, cari tahu Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda 

Lalu kembali ke mengapa kita ada di sini.

Apa itu SVG?

Scalable Vector Graphics (SVG) adalah format gambar grafik vektor berbasis teks XML. Meskipun format gambar umum seperti JPG dan PNG terdiri dari banyak kotak kecil yang disebut piksel, format ini bergantung pada bahasa markup XML untuk mendeskripsikan atribut gambar.

Pada bulan Januari 2022, 42% dari semua situs web di seluruh dunia menggunakan SVG. Persentase ini telah meningkat sejak Januari 2021, ketika hanya 29,4% situs web telah menggunakannya. Mirip dengan format PNG dan JPG, SVG populer di antara situs web dengan lalu lintas tinggi seperti Google, Wikipedia, dan YouTube.

Hal hebat lainnya tentang SVG adalah didukung secara luas oleh semua browser utama.

Berikut adalah daftar browser yang mendukung format file SVG:

navigator	Dukungan sebagian	Dukungan penuh
Bord	-	Versi 12-18, 79-96, 97
Firefox	versi 2	Versi 3-94, 95, 96-97
Firefox untuk Android	-	versi 95
Chrome	-	Versi 4-96, 97, 98-100
Chrome untuk Android	-	versi 96
Safari	versi 3.1	Versi 3.2-15.1, 15.2, TP
Opera	-	Versi 10-81, 82
Opera Mini	-	Semua versi
Opera Mobile	-	Rilis 12-12.1, 64
Safari di iOS	-	Rilis 3.2-15.1, 15.2
Android Browser	Versi 3-4.3	Rilis 4.4-4.4.4, 96
UC Browser untuk Android	-	versi 12.12
Samsung Internet	-	Rilis 4-14.0, 15.0
Peramban QQ	-	versi 10.4
Peramban Baidu	-	versi 7.12
Peramban KaiOS	-	versi 2.5

Bagaimana cara kerja SVG?

SVG menggunakan XML untuk menghasilkan gambar vektor dua dimensi. Tidak seperti JPG dan PNG, grafik vektor tidak memiliki piksel. Sebaliknya, perilaku mereka dijelaskan dalam file teks XML.

Untuk alasan ini, SVG dapat dicari, diindeks, dibuat skrip, dimodifikasi, dan dikompresi seperti kode. Akibatnya, siapa pun dapat membuatnya menggunakan editor teks atau perangkat lunak grafik vektor.

Apakah WordPress mendukung SVG?

Tidak ada dukungan SVG di WordPress secara default karena risiko keamanan yang ditimbulkannya – kami akan membahas masalah keamanan seputar SVG secara lebih mendalam nanti.

Berikut adalah pesan kesalahan yang muncul saat mengunggah grafik SVG ke situs web WordPress:

Ada sebuah diskusi saat ini tentang menjadikan SVG bagian dari fungsionalitas inti WordPress. Sampai saat itu, kita harus berkreasi dan menggunakan solusi lain untuk mengunggah gambar SVG ke WordPress.

Mengapa menggunakan WordPress SVG?

Terlepas dari masalah keamanannya, banyak pengguna masih menggunakan format gambar ini karena memiliki berbagai keunggulan. Berikut adalah beberapa manfaat menggunakan file SVG:

• Skalabilitas: Karena SVG adalah format gambar vektor, file SVG mempertahankan kualitas yang sama di semua resolusi layar. Keuntungan ini juga hadir setelah memperbesarnya, itulah sebabnya banyak orang menggunakan format gambar yang dapat diskalakan ini untuk ikon dan logo.
• Ukuran file lebih kecil : File SVG memudahkan untuk meningkatkan kinerja situs web karena menggunakan lebih sedikit ruang penyimpanan web dan memuat lebih cepat daripada gambar lain.
• -SEO friendly : Google mengindeks file SVG, memungkinkannya muncul di Penelusuran Gambar Google dan meningkatkan upaya penelusuran Anda. SEO. Dengan jenis gambar lain, Anda dibatasi untuk mengoptimalkan atribut altnya.
• SVG berbasis kode dapat diedit menggunakan editor teks atau perangkat lunak pengedit grafik vektor. Anda dapat mengoptimalkan file SVG untuk situs web atau bahkan menambahkan animasi untuk membuat grafik menjadi interaktif.

SVG di WordPress dan keamanan

Karena SVG pada dasarnya adalah file teks XML, SVG memiliki kerentanan yang dapat dieksploitasi yang tidak memengaruhi format gambar lainnya. Oleh karena itu, orang dapat dengan mudah membajaknya dengan kode berbahaya untuk meluncurkan serangan Cross-Site Scripting (XSS) dan XML External Entity (XXE) pada sistem Anda.

Untuk alasan ini, Anda harus berhati-hati saat menangani file SVG dan menambahkannya ke WordPress.

Untuk meminimalkan risiko keamanan, pastikan untuk membersihkan file SVG sebelum mengunggahnya ke perpustakaan media WordPress. Proses ini menghapus kode dan kesalahan yang mencurigakan, membuat gambar aman untuk situs web Anda.

Anda dapat membersihkan file SVG yang diunggah menggunakan plugin SVG – kami akan membahas langkah-langkahnya nanti. Namun, kami menyarankan Anda mendisinfeksinya dua kali dengan Tes Pembersih SVG -

Cara lain untuk mengamankan situs WordPress Anda adalah dengan membatasi unggahan SVG hanya untuk pengguna tepercaya. Pengguna yang dipilih harus menyadari masalah keamanan seputar format SVG – ini akan mencegah mereka mendapatkan file SVG dari sumber yang meragukan.

Cara Mengunggah File SVG ke WordPress dalam 2 Metode Aman

Secara teknis, ada dua cara untuk menambahkan dukungan SVG ke WordPress: menggunakan a WordPress Plugin atau dengan mengaktifkannya secara manual. Apa pun yang Anda pilih, kami sangat menyarankan agar Anda membatasi hak unduhan hanya untuk administrator dan pengguna tepercaya untuk meminimalkan unduhan berbahaya.

Gunakan plugin WordPress

Dalam tutorial ini, kita akan menggunakan Dukungan SVG. Ini WordPress Plugin menggunakan perpustakaan pembersih SVG yang akan aktif secara otomatis saat mengunggah file SVG ke perpustakaan media. Ini juga mudah diatur dan gratis untuk digunakan.

Berikut adalah langkah-langkah untuk mengonfigurasi dukungan SVG:

1. IInstal pluginnya dan aktifkan.

2. Akses ke pengaturan -> mendukung SVG dari dasbor WordPress Anda.

3. Centang kotak di sebelah opsi Batasi untuk administrator untuk membatasi hak unggah. Lakukan hal yang sama untuk opsi Aktifkan mode lanjutan jika Anda ingin mengakses fitur lanjutan, seperti rendering SVG sebaris dan gaya CSS.

4. Setelah menyimpan perubahan, Anda dapat dengan aman mulai mengunggah file SVG ke perpustakaan media.

Tambahkan dukungan WordPress SVG secara manual

Metode ini melibatkan pengeditan file functions.php dari situs WordPress Anda. Oleh karena itu, kami sangat menyarankan Anda mengikuti langkah-langkah ini jika Anda sudah familiar dengan PHP dan memahami sepenuhnya masalah keamanan SVG.

Pastikan Anda buat cadangan situs WordPress Anda sebelum melakukan perubahan untuk menghindari kehilangan data jika terjadi kesalahan konfigurasi.

Langkah-langkah berikut akan menjelaskan cara mengaktifkan SVG di WordPress secara manual dengan bantuan klien FTP seperti: FileZilla.

1. Buka direktori file situs web Anda di host Anda
2. Akses ke public_html -> wp-includes. Gulir ke bawah sampai Anda temukan function.php.

3. Klik kanan pada file ini dan pilih Lihat/Edit untuk membukanya dan tempelkan cuplikan kode berikut ke dalamnya:

function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');

4. Simpan perubahan dan coba unggah file SVG baru. Jika prosesnya berhasil, perpustakaan media Anda harus menerima unggahan file.

Banyaknya keunggulan file SVG berkontribusi pada semakin populernya jenis file ini. Sayangnya, file teks XML rentan terhadap injeksi kode, yang merupakan alasan utama WordPress tidak menyertakan dukungan SVG secara default.

Meskipun demikian, ada dua cara agar situs WordPress Anda menerima file SVG: menggunakan a WordPress Plugin atau mengedit file functions.php. Selain membatasi hak unggah, Anda akan dapat mengunggah file SVG dengan aman ke perpustakaan media situs web.

Sumber daya lain yang direkomendasikan

Kami juga mengundang Anda untuk berkonsultasi dengan ressources di bawah ini untuk mengambil lebih banyak kepemilikan dan kendali atas situs web dan blog Anda.

• Cara Membuat Plugin WordPress Sederhana
• Cara Membuat Plugin WordPress Blok Gutenberg Sederhana
• Cara mengatur beranda Anda di WordPress
• Cara Memahami Dasbor WordPress
• Cara Membuat Plugin WordPress Sederhana

Kesimpulan

Itu saja untuk panduan ini yang menunjukkan kepada Anda cara mengunggah SVG ke WordPress. Kami harap artikel ini memberi Anda beberapa wawasan tentang manfaat dan risiko mengunggah file SVG ke situs web WordPress. Jika Anda memiliki masalah atau saran, beri tahu kami di dalam komentar.

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.

Sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.   

...