Cara menambahkan file gambar svg di wordpress

Siap meningkatkan tampilan grafis situs WordPress Anda secara signifikan? Bayangkan logo dan ikon yang skalabel dan tampak tajam di perangkat apa pun, tanpa pikselasi, tanpa distorsi. Panduan ini menunjukkan cara mengunggah dan mengelola berkas SVG di WordPress menggunakan WP Media Folder, dan panduan ini cocok untuk siapa saja, bahkan jika Anda bukan seorang pengembang.

Dalam tutorial langkah demi langkah ini, kami akan membongkar manfaat file SVG, mengapa desainer menyukainya, dan mengapa mereka fantastis untuk kinerja SEO dan halaman. Anda akan mempelajari beberapa metode yang mudah diikuti untuk mengaktifkan unggahan SVG: Dari menggunakan plugin tepercaya hingga tweak kode sederhana, ditambah strategi pintar agar situs Anda tetap aman.

Kami akan menggunakan WP Media Folder, plugin manajemen media yang kuat dari Joomunited. 

Mengapa SVG luar biasa untuk grafik yang dapat diskalakan

Skalabilitas - SVG adalah file vektor. Itu berarti Anda dapat memperbesar, memperbesar, atau mengecilkannya tanpa kehilangan kualitas untuk logo, ikon, atau desain responsif.

ringan & seo - file SVG seringkali lebih kecil dari gambar raster dan XML berbasis teks, sehingga mesin pencari dapat membaca elemen kunci secara langsung (ALT TEXT, judul, dll.).

Styling & Animation - Anda dapat memanipulasi SVG melalui CSS atau JavaScript. Ingin efek hover atau animasi? Mudah.

Aksesibilitas - diatur dengan benar, SVG berisi tag teks dan peran yang dapat diakses yang dapat ditafsirkan oleh pembaca layar, hanya alasan kuat untuk menggunakannya.

Solusi untuk menambahkan SVG di WordPress

Blok WordPress SVG secara default karena risiko keamanan (SVG adalah XML, yang dapat mencakup kode berbahaya), namun, ada tiga cara yang dapat diandalkan untuk mengaktifkan dukungan SVG:

1. Gunakan plugin

a) WPCode + SVG Snippet

• Instal plugin WPCode gratis.
• Tambahkan cuplikan 'Izinkan file SVG' dari perpustakaannya dan aktifkan.
• Secara default, hanya administrator yang dapat mengunggah SVG.

b) Plugin Dukungan SVG

• Instal "Dukungan SVG" melalui plugin> Tambahkan yang baru, aktifkan.
• Dalam pengaturannya, periksa "Batasi ke Administrator" dan/atau "Aktifkan Mode Lanjutan" (Inline Rendering, CSS Styling).
• Unggah SVG Anda melalui media> Tambahkan baru atau seret & drop.

c) Opsi Lain :

• SVG Aman oleh Darrell Doyle, lebih tua tetapi masih digunakan.
• Dukungan SVG membersihkan unggahan untuk mencegah risiko XSS/XXE.
• HappyFiles/Catfolder menambahkan unggahan SVG dengan sanitasi dan pratinjau.

2. Tambahkan cuplikan kode ke fungsi.php

Anda dapat menggunakan kode berikut: 

fungsi enable_svg_upload ($ mimes) {$ mimes ['svg'] = 'image/svg+xml'; mengembalikan $ MIMES; } add_filter ('unggah_imimes', 'enable_svg_upload'); 

Di mana: Functions.php tema (selalu dapat ditempelkan tema anak!).

Kelemahan: Tidak ada sanitasi secara default - Risky kecuali dipasangkan dengan pembersih. Dan unggah terbatas pada admin (Anda dapat menyesuaikannya).

3. Pertimbangan Keamanan

 SVG = XML, yang dapat berisi:

• Serangan XSS (JavaScript).
• Serangan XXE (panggilan entitas eksternal).

Praktik Terbaik:

• Gunakan plugin seperti SVG Support, SVG Safe, HappyFiles dengan Sanitisasi Built -In.
• Sanitasi melalui alat online (misalnya, tes SVG Sanitizer Darryll Doyle) sebelum mengunggah.
• Batasi unggahan SVG hanya untuk admin atau pengguna tepercaya.

WP Media Folder dan mengapa itu penting bagi SVG di WordPress

WP Media Folder adalah manajer perpustakaan media yang kuat

- Struktur folder/sub -lipatan

-Darvanced filter, penyortiran, seret & drop

 - Ganti nama, tanda air, ganti massal, pratinjau, unduh

- Kompatibel dengan banyak alat seperti pembangun halaman, WooCommerce, dan WPML.

Sementara WP Media Folder itu sendiri tidak memungkinkan untuk menggunakan file SVG, itu akan memungkinkan kami untuk mengatur, memelihara, dan juga mengelola semua jenis file termasuk file SVG.

Wrapping Up: Tinggikan situs Anda dengan WP Media Folder

Berhenti bergulat dengan folder media yang berantakan dan file gambar yang tidak dioptimalkan. Sebagai gantinya, buka potensi penuh SVG, ringan, dapat dicari, dan dapat disesuaikan, dengan alat organisasi intuitif WP Media Folder. 

Apakah Anda seorang pencipta konten, perancang, atau pemilik usaha kecil, itu menempatkan teknologi yang kuat di tangan Anda tanpa kode apa pun. Situs Anda akan memuat lebih cepat, peringkat lebih tinggi, dan terlihat menakjubkan! Apa yang kamu tunggu? Buka di sini dan dapatkan salinan Anda sendiri.