Поддержка WordPress SVG: как включить SVG в WordPress

Сложность в этом заключается в том, что библиотека создается динамически, а это означает, что нам нужно все настроить в JavaScript, чтобы все было так, как мы хотим. Это где наш Mutation Observer вступает в игру. Мы можем искать все недавно добавленные DOM-узлы, а затем проверять, являются ли они вложением, и можем ли мы управлять ими так, как нам хочется.

Наше решение включает использование JavaScript для обнаружения нашего вложения и передачу его идентификатора обратно в PHP, чтобы мы могли получить полный URL-адрес вложения. Чтобы это работало, нам нужно подключиться к функциональности WordPress AJAX и зарегистрировать пользовательскую функцию, например ниже.

 //call our function when initiated from JavaScript add_action('wp_AJAX_svg_get_attachment_url', 'get_attachment_url_media_library'); 

wp_AJAX_{name_of_action} используется для создания пользовательских вызовов AJAX. Это означает, что всякий раз, когда вызывается WordPress AJAX, он будет искать action с тем же именем, зарегистрированным в этом хуке. В нашем случае, когда мы позже вызовем нашу AJAX-функцию, мы svg_get_attachment_url действие, называемое svg_get_attachment_url , которое, в свою очередь, вызовет нашу функцию get_attachment_url_media_library .

Если вы впервые заглядываете в WordPress AJAX, тогда начните с чтения документации по Кодексу.

Наша функция вернуть URL-адрес вложения довольно проста:

 //called via AJAX. returns the full URL of a media attachment (SVG) function get_attachment_url_media_library(){ $url = ''; $attachmentID = isset($_REQUEST['attachmentID']) ? $_REQUEST['attachmentID'] : ''; if($attachmentID){ $url = wp_get_attachment_url($attachmentID); } echo $url; die(); } 

Теперь, когда у нас отсортированы элементы PHP, давайте перейдем к компоненту JavaScript и добавим следующее. Вам нужно будет добавить следующее в поставленный в очередь публичный скрипт, чтобы это работало.

 //create a mutation observer to look for added 'attachments' in the media uploader var observer = new MutationObserver(function(mutations){ // look through all mutations that just occured for (var i=0; i < mutations.length; i++){ // look through all added nodes of this mutation for (var j=0; j < mutations[i].addedNodes.length; j++){ //get the applicable element element = $(mutations[i].addedNodes[j]); //execute only if we have a class if(element.attr('class')){ elementClass = element.attr('class'); //find all 'attachments' if (element.attr('class').indexOf('attachment') != -1){ //find attachment inner (which contains subtype info) attachmentPreview = element.children('.attachment-preview'); if(attachmentPreview.length != 0){ //only run for SVG elements if(attachmentPreview.attr('class').indexOf('subtype-svg+xml') != -1){ //bind an inner function to element so we have access to it. var handler = function(element){ //do a WP AJAX call to get the URL $.AJAX({ url: AJAXurl, data: { 'action' : 'svg_get_attachment_url', 'attachmentID' : element.attr('data-id') }, success: function(data){ if(data){ //replace the default image with the SVG element.find('img').attr('src', data); element.find('.filename').text('SVG Image'); } } }); }(element); } } } } } } }); observer.observe(document.body, { childList: true, subtree: true }); 

Вот разбивка того, как все это работает:

• Мы создаем новый ‘Mutation Observer’ и слушаем все изменения в элементе body. Мы ищем наши вложения, которые загружаются динамически (изначально при открытии библиотеки и, дополнительно, при прокрутке, чтобы загрузить больше).
• Мы просматриваем все добавленные элементы DOM и присваиваем их нашему element , именно на этом элементе мы проведем наши сравнения, чтобы проверить, находим ли мы нужный элемент.
• Мы проверяем, что у нашего элемента есть класс (как иногда мы перебираем стандартные текстовые элементы), и затем мы используем его класс, чтобы увидеть, есть ли у него имя класса attachment . Каждое из наших вложений будет иметь это, поэтому именно эти элементы мы ищем.
• Как только мы находимся во вложении, мы делаем еще одну проверку, чтобы убедиться, что мы находимся на одном вложении (как иногда мы можем быть на других элементах, которые, так случается, связаны с вложениями, но не самих вложений), тогда поиск любые дети с классом 'attachment-preview сообщат нам, если мы на правильном пути.
• Следующим шагом является проверка, есть ли у предварительного просмотра вложения класс subtype-svg+xml . Мы хотим активировать нашу функциональность только для изображений SVG.
• Здесь важная часть. Для каждого вложения мы создаем новую функцию и передаем element в качестве ссылки. Внутри этого мы создаем вызов AJAX . Именно здесь мы извлекаем data-id и вызываем нашу PHP-функцию, которую мы зарегистрировали ранее. Наше действие называется svg_get_attachment_url и это относится к функции, подключенной к действию wp_AJAX_svg_get_attachment_url .
• Наша функция AJAX передает идентификатор вложения обратно в PHP, который мы используем для получения URL-адреса объекта. Мы передаем его обратно нашему вызову AJAX, чтобы затем его можно было добавить к element , визуально обновляя его.

Здесь довольно много движущихся частей, но большинство из них занимаются поиском подходящих элементов DOM для выполнения нашей функции. Когда все будет сказано и сделано, вы увидите изображения SVG, отображаемые в виде сетки:

Дополнительные замечания:

• Хорошая вещь в этом заключается в том, что он срабатывает всякий раз, когда изменяется DOM, например, при начальной загрузке библиотеки, прокрутке библиотеки (загрузке новых вложений), а также при добавлении нового вложения в библиотеку и его загрузке.

• Скорость, с которой вы видите ваши SVG-изображения, будет полностью зависеть от WordPress, так как каждое вложение SVG должно выполнить свой собственный вызов AJAX, а затем передать обратно свой URL, заставляя браузер загрузить новое изображение. Мы фактически ждем дважды, что замедлит ход событий. Хотя все это работает, может потребоваться несколько секунд, чтобы все «встало» на свои места.

• Еще одна интересная «особенность» ( проблема ) заключается в том, что при добавлении новых изображений в библиотеку мультимедиа все вложения обновляются, а это означает, что выборка AJAX и рендеринг изображений должны произойти снова. Здесь не так много всего, что можно отрегулировать, так как это часть динамического процесса медиа библиотеки.

Макет колонки медиа библиотеки

Когда вы просматриваете библиотеку мультимедиа с использованием традиционной компоновки столбцов, вы заметите, что SVG снова отображаются неправильно.

 /*adjust SVG images when displayed inside media library column view*/ table.media .column-title .media-icon img[src*='.svg']{ width: 100%; height: auto; } 

 //Observer to adjust the media attachment modal window var attachmentPreviewObserver = new MutationObserver(function(mutations){ // look through all mutations that just occured for (var i=0; i < mutations.length; i++){ // look through all added nodes of this mutation for (var j=0; j < mutations[i].addedNodes.length; j++){ //get element var element = $(mutations[i].addedNodes[j]); //check if this is the attachment details section or if it contains the section //need this conditional as we need to trigger on initial modal open (creation) + next and previous navigation through media items var onAttachmentPage = false; if( (element.hasClass('attachment-details')) || element.find('.attachment-details').length != 0){ onAttachmentPage = true; } if(onAttachmentPage == true){ //find the URL value and update the details image 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 }); 

 /*sets all SVG's to be responsive. displaying at full width*/ img[src*='.svg']{ width: 100%; height: auto; }