Comment faire en sorte que WordPress prenne en charge le téléchargement d'images au format SVG et leur affichage dans la médiathèque

La colonne suivante du Tutoriel WordPress vous présentera comment activer WordPress pour prendre en charge le téléchargement d'images au format SVG et les afficher dans la médiathèque. J'espère que cela vous sera utile. amis dans le besoin !

En raison des caractéristiques des images au format SVG, du code malveillant peut être inséré et le site Web est facilement attaqué. Par conséquent, pour des raisons de sécurité, WordPress ne prend pas en charge le téléchargement du format SVG. images par défaut. De plus, contrairement à ce qui est dit sur Internet, les images au format SVG ont une valeur d'application très élevée. À l'exception de quelques petites icônes sur les pages Web qui peuvent utiliser des images SVG, il n'y a aucun avantage à utiliser le format SVG pour les images en couleurs normales. . Cependant, parfois vous avez vraiment besoin de cette image SVG, comme l'image LOGO de mon thème. Si l'image PNG n'est pas très claire sur le téléphone mobile, l'utilisation du format SVG ne posera pas ce problème.

Comment faire en sorte que WordPress prenne en charge le téléchargement d'images au format SVG ?

Vous pouvez ajouter le code suivant au modèle de fonction de thème actuel function.php :

Laissez WordPress prendre en charge le téléchargement de SVG, et seuls les administrateurs ont cette autorisation

// 只允许管理员上传SVG图片
if (current_user_can( 'manage_options' )) {
add_filter('upload_mimes', function ($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
});
}

Liste des bibliothèques multimédias mode Afficher les images SVG

// 媒体库列表模式显示SVG图片
add_action('admin_head', function () {
echo "<style>table.media .column-title .media-icon img[src*=&#39;.svg&#39;]{width: 100%;height: auto;}.components-responsive-wrapper__content[src*=&#39;.svg&#39;] {position: relative;}</style>";
});

Il existe de nombreux codes similaires sur Internet, mais aucun d'entre eux ne prend en charge le mode grille de la médiathèque pour afficher les images SVG. Le code suivant peut être implémenté :

// 媒体库网格模式显示SVG图片
function zm_display_svg_media($response, $attachment, $meta){
if($response['type'] === 'image' && $response['subtype'] === 'svg+xml' && class_exists('SimpleXMLElement')){
try {
$path = get_attached_file($attachment->ID);
if(@file_exists($path)){
$svg                = new SimpleXMLElement(@file_get_contents($path));
$src                = $response['url'];
$width              = (int) $svg['width'];
$height             = (int) $svg['height'];
$response['image']  = compact( 'src', 'width', 'height' );
$response['thumb']  = compact( 'src', 'width', 'height' );
 
$response['sizes']['full'] = array(
'height'        => $height,
'width'         => $width,
'url'           => $src,
'orientation'   => $height > $width ? 'portrait' : 'landscape',
);
}
}
catch(Exception $e){}
}
return $response;
}
add_filter('wp_prepare_attachment_for_js', 'zm_display_svg_media', 10, 3);

Un autre. celui avec relativement moins de code Il prend en charge le mode grille de la médiathèque pour afficher les codes d'image SVG. Cependant, si le mode de débogage est activé, un message d'erreur apparaîtra, mais cela n'affecte pas l'utilisation.

// 媒体库网格模式显示SVG图片
function zm_svg_metadata($data, $post_id) {
$data = array(
'sizes' => array(
'large' => array(
'file' => pathinfo(wp_get_attachment_url($post_id), PATHINFO_BASENAME)
)
)
);
return $data;
}
add_filter('wp_get_attachment_metadata', 'zm_svg_metadata', 10, 2);

Quant à l'utilisation de cette fonction, cela dépend si le thème que vous utilisez dispose de cette fonction. Vous pouvez également l'utiliser sur la page Web pour obtenir le lien après l'avoir téléchargé directement via FTP.

Si vous trouvez difficile de modifier le code, vous pouvez utiliser les plug-ins associés suivants :

SVG Support
Enable SVG
Safe SVG（据说该插件可以检测并去除SVG中的恶意代码，与250+110有的一拼）
WP SVG images
Easy SVG Support
Enable SVG Uploads
......

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!