SVG для WordPress

Добавить поддержку и улучшить отображение графики SVG в WordPress.

Оглавление:
  1. Добавить поддержку SVG
  2. Отобразить SVG

Добавить поддержку SVG

Добавить поддержку загрузки SVG в библиотеку медиафайлов WordPress.

// добавить поддержку формата SVG
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_action('upload_mines', 'add_file_types_to_uploads');

Теперь файл в формате SVG будет выглядеть как обычный файл.

файл SVG может содержать вредоносный код.

к меню ↑

Отобразить SVG

Для отображения SVG файла в библиотеке WordPress в режиме списка используется JavaScript. Код ниже регистрирует пользовательскую функцию AJAX.

//вызываем функцию js
add_action('wp_AJAX_svg_get_attachment_url', 'get_attachment_url_media_library');

Функция возвращает URL-адрес приложения в админке WordPress.

//вернуть полный URL вложения через AJAX  
function get_attachment_url_media_library(){

$url = '';
    $attachmentID = isset($_REQUEST['attachmentID']) ? $_REQUEST['attachmentID'] : '';
    if($attachmentID){
        $url = wp_get_attachment_url($attachmentID);
    }

    echo $url;

    die();
}

add_action( 'admin_footer', 'my_action_javascript' ); // добавим js в админку

JavaScript с описанием:

function my_action_javascript() { ?> 
<script type="text/javascript">
 
//окно с вложением 
var attachmentPreviewObserver = new MutationObserver(function(mutations){
    // что произошло
    for (var i=0; i < mutations.length; i++){

        //все добавленные узлы
        for (var j=0; j < mutations[i].addedNodes.length; j++){

            //получить элемент
            var element = $(mutations[i].addedNodes[j]);

			//проверить прикрепление файла + навигация по элементам
            var onAttachmentPage = false;
            if( (element.hasClass('attachment-details')) || element.find('.attachment-details').length != 0){
                onAttachmentPage = true;
            }

            if(onAttachmentPage == true){   
                //поиск значения и детали обновления изображения 
                var urlLabel = element.find('label[data-setting="url"]');
                if(urlLabel.length != 0){
                    var value = urlLabel.find('input').val();
                    element.find('.details-image').attr('src', value);
                }
            }
        } 
    }   
});

attachmentPreviewObserver.observe(document.body, {
  childList: true,
  subtree: true
});</script><?php
}

Ширина для изображения SVG:

function my_action_css() {
	echo "<style>img[src*='.svg']{
               width: 100%;
             }</style>";
}

add_action( 'admin_footer', 'my_action_css' ); // добавим css в админку

Результат:

Поддержка SVG файлов в WordPress
Поддержка SVG в WordPress

Скачать код