HINWEIS: Seit Version 4.7.1 funktioniert dies nicht mehr genau wie hier veröffentlicht. Der Kommentar-Thread beginnt hier. Ich werde dies aktualisieren, sobald der beste Weg dazu klar ist. Dies ist das Beste, was ich bisher habe.
Für Ihre functions.php-Datei oder ein Funktionalitäts-Plugin
function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');
Ohne dies werden SVG-Dateien beim Versuch, sie über den Medien-Uploader hochzuladen, abgelehnt.
Vor WordPress 4.0 konnten Sie sie auch korrekt im Medien-Raster anzeigen lassen. Aber das ist jetzt kaputt. Wenn jemand weiß, wie man das repariert, lasst es mich wissen!
function fix_svg_thumb_display() {
echo '
td.media-icon img[src$=".svg"], img[src$=".svg"].attachment-post-thumbnail {
width: 100% !important;
height: auto !important;
}
';
}
add_action('admin_head', 'fix_svg_thumb_display');
Danke!
Vielen Dank. Ich habe ein Plugin für WordPress mit diesen Zeilen
Ist das dasselbe oder macht es mehr als deine Funktion?
Haha! Das ist mein Plugin :D
Es macht dasselbe. Seine ist für die Verwendung innerhalb Ihres Themes gedacht.
Mein Plugin macht eine sehr einfache Sache :P
Es scannt auch SVG-Dateien auf Sicherheitsrisiken.
Wie heißt dein Plugin, gib uns einen Link :)
Ich habe dich gefunden :) https://wordpress.org/plugins/scalable-vector-graphics-svg/
Tolles Plugin übrigens
Hat wie ein Zauber funktioniert! Habe gerade meine erste SVG-basierte Website ohne Bilddateien mit WordPress erstellt. Sie waren eine große Hilfe. Vielen Dank :)
Kannst du es mir zeigen?
Funktioniert hervorragend für den Upload, aber die SVG wird riesig angezeigt, wo immer sie in der WordPress-Verwaltung angezeigt wird. Gibt es eine Möglichkeit, dies zu verhindern?
Mit einem anderen Snippet, das ich hier gefunden habe, scheint eine einfache CSS-Injektion die Anzeige von SVGs im Verwaltungsbereich zu beheben. Dies behebt die Anzeige im Medien-Uploader und im Bereich "Hervorgehobenes Bild".
Ein Update zu @Steve's Snippet, um Ihre SVG-Thumbnails im Medienbibliotheks-Raster anzuzeigen. Dies ist meine bevorzugte Methode, da sie nicht auf die Thumbnail-Klasse angewiesen ist. Stattdessen ziele ich auf Bilder mit der Dateiendung
.svgab, indem ich den Selektorimg[src$=".svg"]verwende.Es funktioniert nicht :(
Habe ich den Code einfach in die functions.php-Datei einzufügen? Ich mache das mit einem responsiven Theme, füge den Code am Ende ein (aber ich habe das auch geändert und zum Ende des Codes hinzugefügt) und es funktioniert nicht?
Was soll ich tun?
Hoch
Nach den letzten Updates von WordPress wirft add_filter() eine Fehlermeldung aus, die besagt, dass es nicht definiert ist (veraltet?). Gibt es eine aktualisierte Methode, um das Hochladen von SVG in die Mediengalerie zuzulassen?
Danke!
Gelöst!
Ich habe den Code in die Kern-functions.php-Datei von WordPress eingefügt, falsch.
Dieser Code muss zu functions.php des Themes hinzugefügt werden, hier: /wp-content/themes/[theme]/functions.php
Einfach zu verwechseln.
Gibt es eine Möglichkeit, WordPress daran zu hindern, SVG-Dateien im Medien-Uploader zu komprimieren? Ich habe SVGs auf weniger als 1 KB und WordPress "komprimiert" sie auf bis zu 150 KB. Hmmm...
Wie hat css-tricks immer einen Artikel über genau das, was ich tun möchte? Das Beste.
Vielen Dank dafür!
Ja, es erlaubt mir, die SVG-Bilder hochzuladen, aber ich kann sie nicht auf meiner Vorderseite sehen, ich weiß nicht warum :\
Ich sehe, es setzt die Breite und Höhe standardmäßig auf 1 Pixel. Ich kann das manuell ändern, bin mir aber nicht sicher, wie es automatisch sein sollte... Irgendwelche Ideen?
Das unten stehende Problem enthält den Code, den Sie in wp-includes/media.php einfügen können
https://core.trac.wordpress.org/ticket/26256
obwohl ich gerade die Funktion image_downsize() in derselben Datei geändert habe, ersetzen
mit
Sie können das Miniaturbild für svg-Dateien immer noch nicht sehen, aber ich habe keine Zeit, das zu reparieren.
DANKE
2014 und ich finde dieses Snippet erst jetzt – ich muss unter einem Baum geschlafen haben!!! Vielen Dank :)
Wie würde ich die SVG-Bilder skalieren?
Funktioniert nicht mit WP 3.8.1
Ich benutze gerade 3.8.1 und es funktioniert bei mir. Gibt es Besonderheiten?
Funktioniert bei mir auch mit 3.8.1.
Ich habe gerade einen Trick gefunden, um das SVG und eine alternative Bitmap für ältere Browser in einem Bild-Tag auf http://lynn.ru/examples/svg/en.html anzuzeigen.
Und es responsiv zu machen auf http://www.mediaevent.de/tutorial/svg-responsive.html (deutsch).
Ich habe ein Plugin mit dieser Funktion erstellt, kann aber das SVG-Grafik nicht anzeigen.
Es erlaubt mir, eine SVG-Datei hochzuladen, aber sie wird weder im Frontend noch im Backend angezeigt.
Hatte noch jemand dieses Problem?
Vielleicht das? https://css-tricks.de/snippets/htaccess/serve-svg-correct-content-type/
Wenn Sie Adobe Illustrator CC verwenden, müssen Sie die Spezifikationen anpassen, um dem Artikel, den Chris oben erwähnt, zu entsprechen, sonst funktioniert es nicht. Das habe ich durch Versuch und Irrtum herausgefunden. Ich hoffe, das hilft und danke Chris für diese tolle Seite! :D
Was ist mit der Sicherheit? Warum werden SVG-Dateien von WordPress überhaupt blockiert? Könnte das Gefahren für die Websites bedeuten?
Zu viel Paranoia hier. Sie haben Unregelmäßigkeiten blockiert. Die meisten WordPress-Benutzer sind nicht technisch versiert. Sie sind Social-Media- und Blog-Manager, daher brauchen sie keine Dinge wie SVG. Das tut diesen Dingen keinerlei Sicherheitsrisiken bringen. Es macht Sie nur cooler als ein regulärer WordPress-Benutzer.
Dies ist überhaupt keine Paranoia. Es gibt eine Menge Sicherheitsrisiken im Zusammenhang mit SVGs, weshalb sie von Core nicht zugelassen werden.
https://core.trac.wordpress.org/ticket/24251
https://www.owasp.org/images/0/03/Mario_Heiderich_OWASP_Sweden_The_image_that_called_me.pdf
Ich habe alle Kommentare gelesen und dieses Snippet funktioniert gut für WordPress 3.8.2
für die Verwendung der Vorschaubilder im Frontend müssen Sie das Beitrag-Bild über CSS stylen
für Fallbacks verwenden Sie svgmagic, ein cooles jQuery-Plugin
Danke! Funktioniert bei mir gut.
Funktioniert auch wie ein Boss.
Beachten Sie: Sobald das SVG-Bild eingefügt ist, gibt ihm WordPress eine Dimension von 1px mal 1px. Es erschien wie ein Punkt. Bearbeiten Sie dies also im Texteditor, falls es Ihnen passiert (
Funktioniert nicht bei mir, WP 3.8.3.
In functions.php funktioniert es wie ein Zauber :)
Funktioniert immer noch über WordPress 3.9.2 – und danke! Ich habe diesen Code verwendet
Die drittletzte Zeile (echo) sollte die bei http://pastie.org/9470273 sein. Sie lässt sich hier im Kommentarfeld nicht einfügen.
Funktioniert sehr gut. Danke, hat mir Zeit gespart.
Hat jemand Erfahrung damit, SVG mit dem Theme-Customizer zum Laufen zu bringen? Anwendungsfall: Ermöglichen Sie dem Endbenutzer, ein SVG-Logo über den Theme-Customizer hochzuladen.
Die obigen Dinge funktionieren hervorragend für den Medien-Uploader, aber über den Customizer geht es nicht. SVG-Dateien sind ausgegraut und nicht wählbar, wenn Sie versuchen, sie hochzuladen.
TIA für jede Einsicht.
Vielen DANK ……. weiter so mit den guten Codes :) Gott segne dich :)
Hallo!
Danke dafür. Nun ja, eigentlich für alles. Sie bieten großartige Dinge. Ich habe dieses Skript heute benutzt und festgestellt, dass es das CSS nicht richtig druckte. Jedenfalls… Ich habe es leicht ergänzt und das Problem für mich gelöst. Die SVGs wurden in der Listenansicht nicht richtig angezeigt. Aber mit der Ergänzung schon. Vielleicht hilft das anderen.
Hmmm. das ist seltsam. Ich habe ein vor dem td und nach der schließenden CSS-Klammer hinzugefügt. Es scheint, als ob die Kommentarfunktion das herausgefiltert hat.
Die Anzeige des „Vorschaubilds“ funktionierte bei mir erst, als ich eine weitere ID hinzufügte.
#postimagediv img[src$=".svg"]Sie haben Recht, ich habe herausgefunden, dass man verwenden kann
Funktioniert nicht…
Warum speichert WP SVG als '.png'-Datei?
Wenn die Thumbnails in 4.X immer noch nicht funktionieren, müssen Sie möglicherweise sicherstellen, dass der Code als tatsächliche In-Page-Stylesheets eingefügt wird. Ich denke, die Codeanzeige erlaubt nicht die korrekte Anzeige des <style>-Elements, das der Eröffnung des Echos folgen soll.
es sollte also eigentlich so aussehen
HINWEIS: Dies wird nur in der Listenansicht angezeigt.
Sie haben es verstanden, Gray!
Bisher funktioniert das gut mit WordPress 4.0
Ich habe die Unterstützung für Vorschaubilder hinzugefügt und den hässlichen Rand um die Bilder in der Medienlistenansicht entfernt.
Gibt es Neuigkeiten oder Lösungen zum Medienraster?
Legende!
Das spricht stark für das Hochladen als Medium. Was, wenn ich SVG direkt schreiben wollte oder MathML direkt schreiben wollte? Wie kann ich WordPress dazu bringen, es korrekt zu parsen? Es ändert es automatisch in etwas Hässliches und entfernt alle Tags.
Warum kann etwas wie das nicht zu wp-includes/media-template.php im Kern hinzugefügt werden... um Vektorgrafiken auf der Admin-Seite für Miniaturbilder und Anhangsanzeigen anzuzeigen?
Kann mir jemand erklären, was falsch daran wäre, das zu tun? Ein Sicherheitsrisiko? Aufklären Sie mich!
Hey,
Ich bin auf diese coolen interaktiven SVG-Weihnachtsanimationen gestoßen.
Es ist ein Google Chrome Experiment.
Bitte schauen Sie sich das an.
https://ihatetomatoes.net/svg-christmas/
Dies dient zur Unterstützung von SVG-Benutzern.
Vielen Dank und weiter so.!
Danke!! Das hat mir sehr geholfen :)
Ich bin sicher, dass es einen besonderen Platz in der Hölle dafür gibt, was ich gerade getan habe, aber es hat für das Notwendige funktioniert.
Code manuell mit JavaScript in das WP-Medientemplate pushen…
https://gist.github.com/mchiron/860d474afc27018327d9
Gelöst!
https://gist.github.com/Lewiscowles1986/44f059876ec205dd4d27
Keine CSS-Bearbeitungen erforderlich in IE (Edge), FF (Edge) oder Chrome (Edge), gute Vorarbeit von allen, lasst uns Mullenweg buggen, dies für die Zukunft in Core WP aufzunehmen!
Es hat nur ein Jahr und ein paar Monate gedauert, bis sie es kaputt gemacht haben…
Grundsätzlich können Sie aufgrund des Präfixes „image/“ im MIME-Typ das Hochladen nie überstehen. WordPress übergibt speziell alle Dateien mit diesem Präfix an die GD-Erweiterung
getimagesize, wo verfügbar.Ich habe einen neuen Branch im Git-Repository, der zu „application/xml+svg“ wechselt, damit die Datei hochgeladen wird. Was dann passieren muss, ist eine Umbenennung des MIME-Typs in „image/svg+xml“ nach erfolgreichem Upload (suche nach einem Hook jetzt).
Es ist wirklich schlimm, dass das so ist, aber geben Sie mir ein oder zwei Wochen, und es wird wieder behoben sein.
Behoben, in Master zusammengeführt https://github.com/Lewiscowles1986/WordPressSVGPlugin
Es gibt jetzt auch einen vorgeschlagenen Core-Patch, um WordPress die Unterstützung out-of-the-box zu ermöglichen https://core.trac.wordpress.org/ticket/31973, jeder kann es sich ansehen und wenn möglich tun, was er kann, um es in den Kern zu bekommen (Warum ist es nicht schon da???)
@LewisCowles1
Sie sind ein Genie!!!
Danke dafür :)
Ich habe ein wenig von diesem Code genommen und ihn zu meinem Plugin „SVG Support“ hinzugefügt https://wordpress.org/plugins/svg-support/ (werde das neueste Update in den nächsten Tagen in das Repository hochladen), das tatsächlich etwas mehr tut, nämlich dass es Ihnen ermöglicht, Ihre SVGs zu stylen, nachdem Sie sie inline in Ihre Seite eingebettet haben, basierend auf einer Klasse.
Ich habe Stunden damit verbracht, dieses Thumbnail-Problem seit letztem Jahr zu lösen, also vielen Dank, dass Sie mir das gezeigt haben!!!
Beste Grüße
Hallo Ben,
Danke für den Hinweis und den Link ;). Freut mich, dass ich helfen konnte, es sollte wirklich im Kern sein, aber wenn Sie sich jemals den Kern angesehen und den Code betrachtet haben, werden Sie sehen, warum das nicht der Fall ist…
Leider funktioniert dies ab WP-Version 4.2.2 nicht mehr. Vielleicht haben sie ihre Sicherheit erhöht? Ich erhalte diese Meldung beim Versuch, SVG in die Medienbibliothek hochzuladen
„logo-petco.svg“ konnte wegen eines Fehlers nicht hochgeladen werden
Entschuldigung, dieser Dateityp ist aus Sicherheitsgründen nicht zulässig.
Hallo Nathan,
Ich kann immer noch mit dem Code aus diesem Gist hochladen, auch in 4.2.2…
https://gist.github.com/Lewiscowles1986/44f059876ec205dd4d27
Das Feedback, das ich vom WP Core-Team erhalten habe, war, dass taggbare Formate ausgenutzt werden können (die Ironie, dass WP HTML & JS verwendet, ging mir nicht verloren). Sehen Sie sich den Code in diesem Gist an, speichern Sie ihn im Verzeichnis „plugins“ und aktivieren Sie ihn ;)
Lewis – danke für deine Antwort.
Ich habe deine PHP-Datei in mein Plugins-Verzeichnis gelegt, ich habe auch Chris' obigen Code in meine functions.php und immer noch kein Glück beim Hochladen von SVG-Dateien in meine Medienbibliothek. Ich bin ratlos. Ich konnte SVG vor 4.2.2 hochladen.
Kann ich dir ein paar Screenshots per E-Mail schicken, damit ich dir zeigen kann, was los ist?
Hallo Nathan,
Screenshots werden Ihnen oder mir (oder sonst jemandem) definitiv nicht helfen, dies zu lösen. Machen Sie mir einen Gefallen: Deaktivieren Sie alle Plugins, außer meinem Gist-Plugin, das aktiv sein muss; wechseln Sie zu einem neuen, leeren Theme und ändern Sie es nicht, oder Core WordPress (wenn Sie Core geändert haben, müssen Sie zu einer sauberen Installation zurückkehren oder neu installieren); versuchen Sie es erneut. Es sieht so aus, als ob Ihr Theme oder eines, vielleicht mehrere Ihrer Plugins, das Problem verursacht. Ich habe das Plugin auf einigen WP-Installationen getestet und kann bestätigen, dass es für Standard-Deployments, Standard Salient Themes & Child Themes, Striking Themes & Child Themes, Themes 2012, 2014 & 2015 funktioniert, mit Akismet, Google Analyticator, Disqus Comment System, allen meinen benutzerdefinierten Client-Plugins, WooCommerce, vielleicht einigen Plugins, die ich nicht installiert habe…
Grundsätzlich ist das Plugin nicht sehr intelligent, es modifiziert nur das Upload-Types-Array & etwas Code, der sehr schäbig von WP in den DOM gedrängt wird.
Seien Sie auch vorsichtig, der Gist muss von GitHub kopiert werden. Das CSS-Tricks-Embedding im Kommentar scheint fehlerhaft zu sein (ich habe bereits ein Problem damit gemeldet).
Wenn das Obige nicht funktioniert, holen Sie sich einen Fachmann, der Ihnen hilft, wenn es kritisch ist; ich bin tatsächlich nicht verfügbar, Tausende von Meilen von zu Hause entfernt, daher könnten Antworten rar sein ;)
Viel Glück!
Lewis – Sie haben es getroffen. Anscheinend hat ein Plugin namens „Media Library Assistant“ das Problem verursacht (wer hätte das gedacht). Ich hätte alle Plugins zuerst deaktivieren sollen. Ich weiß deine gründliche Hilfe zu schätzen. Hab Spaß im Ausland :)
Lewis, das ist großartig!
Jetzt können Sie SVG-Thumbnails in Listen- und Rasteransicht sehen!
Auch das Vorschaubild funktioniert!
Es gibt immer noch Dinge, die nicht funktionieren
– Wenn ich ein SVG wie ein normales Bild in das TinyMCE-Feld einfüge, ist die Höhe 1 x 1 Pixel.
– Das Vorschaubild wird auch im Frontend nicht angezeigt (Sie benötigen CSS dafür).
– Keine SVGMagic-Unterstützung.
Lassen Sie uns unsere Plugins zusammenlegen, um das Beste aus beiden Welten zu machen, ich bin dabei.
Hallo T,
Danke! Um ehrlich zu sein, habe ich WP als Plattform irgendwie satt… Den 1px x 1px Bug habe ich ein paar Fixes für. Ich habe den Gist aktualisiert, um ihn zu patchen; obwohl es am besten ist, sicherzustellen, dass alle Bilder in einem Container sind, um die Größe zu begrenzen, und auf einigen Android-Browsern ist die Höhe mit img { width:100%; height:auto; } sehr daneben :(.
Ich glaube, CSS-Tricks hat einen Artikel dazu, aber es scheint zumindest vorerst ein komplexes Problem ohne permanente Lösung zu sein…
Viel Erfolg mit den restlichen Mods, bleiben Sie gerne hier oder auf Gist in Kontakt und verlinken Sie alles Coole ;).
Hallo,
Danke Chris. Diese Seite hat mich zum tausendsten Mal in die richtige Richtung gewiesen.
Du rockst einfach!!
Und natürlich danke an alle guten Leute in den Kommentaren! :)
Einen schönen Coding-Tag noch,
n3nad
Das funktioniert super!.
Gibt es Probleme mit dieser und der WordPress-Version 4.7/4.7.1? Ich habe versucht, es zum Laufen zu bringen, aber jedes Mal, wenn ich eine SVG-Datei hochlade, erhalte ich eine Fehlermeldung.
Danke, toller Tipp!! Ich habe auch den Fehler bei der neuen WP 4.7.1-Aktualisierung.
Es gibt eine Änderung bei der MIME-Prüfung in 4.7.1 (wp-includes/functions.php). Gibt es einen guten Ausschnitt, um SVG-Uploads zu aktivieren? Vorher habe ich verwendet
function custom_mtypes( $m ){$m['svg'] = 'image/svg+xml';
$m['svgz'] = 'image/svg+xml';
return $m;
}
add_filter( 'upload_mimes', 'custom_mtypes' );
aber jetzt funktioniert das nicht mehr. Ich glaube, in Zeile 2514 die
function wp_get_ext_types()ist neu
Das letzte Mal funktionierte es bei mir mit der WP-Version 4.6.2.
Ich habe sogar versucht, diese Version von Grund auf neu zu installieren, aber es hat nicht funktioniert
Seit 4.7.1 gibt es eine Änderung in der Art und Weise, wie WP MIME-Typen behandelt. Ich habe das hier gefunden und es sollte funktionieren, wenn es vor dem bestehenden Code platziert wird. Es ist nicht ideal, aber es ist besser als die anderen Vorschläge, die ich gesehen habe.
Es sollte mit dem Safe SVG Plugin funktionieren, das ich gestern unten vorgeschlagen habe.
Was auch immer Sie tun, verwenden Sie nicht die Workarounds, die vorschlagen, dass Sie Folgendes einfügen…
in Ihrer
wp-configDatei. Das ist extrem unsicher!PHP-Datei-Uploads für jedermann! :-|
Ich habe meinen vorgeschlagenen Workaround zum Hinzufügen von SVG-Unterstützung mit dem Safe SVG Plugin getestet und es funktioniert einwandfrei.
Das ist immer noch kein großartiger Workaround, aber es ist der beste, den ich bisher gefunden habe.
Ich habe diesen Thread auf wordpress.org gefunden, der es vielleicht wert ist, verfolgt zu werden, um zu sehen, ob jemand darauf antwortet.
Wenn jemand bessere Vorschläge hat, würde ich sie gerne hören :-)
Wer auch immer global das Hochladen von ungefilterten Dateitypen vorschlägt, hat den Code nicht vollständig geprüft. Das Problem ist, dass Sie mit MIME-Typen hochladen, die mit "image/" beginnen, die an die GD-Erweiterung übergeben werden, um Abmessungen und Dateinformationen zu erhalten, was für SVG-Dateien falsch zurückgegeben wird. Ändern Sie einfach "image/svg+xml" in "application/svg+xml" und ändern Sie später den MIME-Typ mit dem Hook
wp_check_filetype_and_extauf den korrekten für die Speicherung.Wenn ich mir Ihren Code ansehe, müssten Sie auch die
svgz-Erweiterung hinzufügen, aber das bedeutet, dass Sie keine anderen Uploads unsicher machen müssen, um die zu vereinfachte Bildinformationsprüfung von 4.7 zu umgehen.Es gibt ein Referenz-Plugin unter https://github.com/Lewiscowles1986/WordPressSVGPlugin/, das für 4.7 mit Grid, Attachment View etc. funktioniert.
WordPress 4.7.1 hat angeblich den hier beschriebenen SVG-Upload kaputt gemacht. Dies ist anscheinend ein Fehler, der in v4.7.2 behoben werden sollte. Um es zu beheben, fügen Sie den folgenden Code zu Ihrer functions.php hinzu:
Volle Anerkennung geht an das SVG Support Plugin
Das habe ich bemerkt! Danke, Ihr Code hat das Update-Problem für mich behoben!
In 4.7.2 sind auch XLSX-Datei-Uploads kaputt. Dieser Code hat es behoben.
Kleine Optimierungen wie die Eliminierung einer Reihe von Variablen und eines Funktionsaufrufs.
SVG hat intrinsische Sicherheitsprobleme, daher unterstützt WordPress SVG-Uploads nicht standardmäßig. SVG als Dokumentenformat ist anfällig für Cross-Site Scripting (XSS)-Angriffe, da es schwierig ist, einen SVG-Sanitizer zu schreiben, der diese verhindert. Bjørn Johansen erklärt dies hier eingehender: https://bjornjohansen.no/svg-in-wordpress
Wenn Sie dennoch SVG-Upload-Unterstützung in einem WordPress-Theme benötigen, empfiehlt Bjørn die Verwendung des Safe SVG Plugin. Obwohl es bei weitem nicht perfekt ist, bietet es zumindest etwas Sicherheit. Und wenn es sich um einen Kundenauftrag handelt, spenden Sie vielleicht und zeigen Sie dem Entwickler Daryll Doyle etwas Liebe.
Wenn ich eine kleine Website erstelle, von der ich weiß, dass sie nur von ein paar erfahrenen Benutzern genutzt wird, füge ich die Funktionalität über eine Funktion, ein Plugin oder sogar direkt zu
functions.phphinzu.Zu anderen Zeiten, wenn ich mir nicht 100% sicher bin, welche Anwendungsfälle es gibt, empfehle ich meinem Kunden, das Safe SVG Plugin zu verwenden.
Auf jeden Fall schlage ich vor, Ihrer Theme- oder Plugin-Dokumentation in Ihrer Readme-Datei einige Hinweise hinzuzufügen, um auf die potenziellen Gefahren und Risiken hinzuweisen, die mit der Aktivierung von SVG-Uploads in WordPress verbunden sind.
Vielen Dank an Sakin Shrestha, der mich zuerst darauf aufmerksam gemacht hat.
Sie sollten einfach keine ungefilterten Uploads zulassen, egal aus welchem Grund.
Alles sollte explizit definiert werden, auch wenn es im Moment etwas mehr Arbeit ist. Außerdem ist die Aussage "SVG ist unsicher" Unsinn!
Es leidet nicht unter mehr Problemen als HTML oder XML und alle seine Schwachstellen könnten von Browser-Anbietern und guten Praktiken (d. h. dem Kauf von, der internen Produktion und der Verwendung seriöser Anbieter von SVG-Inhalten) behoben werden.
Wir haben kleine Änderungen am obigen Code vorgenommen. Jetzt funktioniert es.
add_filter( ‘wp_check_filetype_and_ext’, function($data, $file, $filename, $mimes) {
global $wp_version; if( $wp_version == ‘4.7’ || ( (float) $wp_version < 4.7 ) ) { return $data; }
$filetype = wp_check_filetype( $filename, $mimes );
return [ ‘ext’ => $filetype[‘ext’], ‘type’ => $filetype[‘type’], ‘proper_filename’ => $data[‘proper_filename’] ];
}, 10, 4 );
function cc_mime_types( $mimes ){ $mimes[‘svg’] = ‘image/svg+xml’; return $mimes; } add_filter( ‘upload_mimes’, ‘cc_mime_types’ );
function fix_svg() { echo ‘ .attachment-266×266, .thumbnail img { width: 100% !important; height: auto !important; } ‘; } add_action( ‘admin_head’, ‘fix_svg’ );
Und übrigens, der obige Ausschnitt funktioniert, wenn Sie (einfaches CSS) einen Leerschlag dazwischen haben
function fix_svg_thumb_display() {
echo '
td .media-icon img[src$=".svg"], img[src$=".svg"].attachment-post-thumbnail {
width: 100% !important;
height: auto !important;
}
';
}
add_action('admin_head', 'fix_svg_thumb_display');
Ich will nicht wie ein Neuling klingen, aber hat der Code von Codepen alles für Sie kaputt gemacht? Ich komme nicht einmal mehr in wp-admin rein...
Der ursprüngliche Code funktioniert in Version 4.7.3 wieder! Juhu!!
Das Miniaturbild-Vorschaubild bekomme ich bei WP 4.73 nicht zum Laufen
Ich verwende dieses Plugin https://wordpress.org/plugins/svg-support/
Es gibt mir volle Kontrolle über CSS für die Bilder.
Bietet SVG-Unterstützung für die Mediathek
Funktioniert mit dem neuen Bild-Widget (WP 4.8-alpha +)
Beschränkt die SVG-Upload-Fähigkeit nur auf Administratoren
Und ist extrem einfach zu bedienen
Hallo Leute, es ist eine Weile her, seit ich hier nachgesehen habe.
Soweit ich sehen kann, funktioniert mein Ausschnitt immer noch.
Die einzigen 3 Dinge, die im Backend nicht funktionieren, sind
– Anzeige des SVG in der Listenansicht der Medien
– Anzeige des SVG in der Einzelansicht der Medien (wenn auf das Bild geklickt wird)
– Anzeige des SVG als Beitragsbild
Soweit ich das beurteilen kann, verwenden alle anderen Plugins JavaScript, um diese Funktionen zu erreichen.
Aber da ich es super schlank halten möchte, gibt es eine Möglichkeit, dies ohne JS-Code zu tun?
Okay, ich habe alles gelöst, indem ich die richtigen Dinge zusammengefügt habe. Danke an Lewis und Guenni007.
Außerdem funktioniert es einwandfrei, wenn SVG-Bilder im normalen TinyMCE-Editor verwendet werden. Der große Vorteil ist, dass es sehr klein ist und eine PNG-Fallback-Option bietet.
Ich werde versuchen, ein Plugin-Zip zu kompilieren und es als Plugin in WordPress hochzuladen, wenn das nicht zu kompliziert ist.
Das einzige Problem, das jetzt auftritt, wenn das neue Bild-Widget mit SVG verwendet wird, ist dieser Fehler:
Warning: Illegal string offset 'height' in /wp-includes/media.php on line 989 and line 988
Lösungen dafür sind willkommen.
Nutzen Sie einfach dieses https://wordpress.org/plugins/enable-svg-uploads/
Cool, ich wusste nicht, dass Lewis bereits sein eigenes Plugin erstellt hat.
Es funktioniert aber bisher noch nicht mit dem neuen Bild-Widget (kann sie nicht im Frontend sehen).
Außerdem hat es viele .json-Dateien und keinen PNG-Fallback, daher bleibe ich vorerst bei meinem.
Ich habe herausgefunden, dass es irgendwie ein Größenänderungsproblem ist, aber bisher hat niemand eine Lösung dafür.
Eröffnen Sie ein Problem (oder mehrere) mit Screenshots, es wird gepatcht, solange es kein Theme- oder Plugin-spezifisches Problem ist. Dann profitieren alle. So wie es ist, bin ich mir nicht sicher, ob ich Ihre Punkte verstanden habe. https://github.com/Lewiscowles1986/WordPressSVGPlugin. Ein eigenes zu entwickeln ist in Ordnung, wenn Sie dabei bleiben, was Lewis seit 2015 tut, seit er den Gist gestartet hat.
Ja, ich kenne das Gefühl, ich habe mein eigenes im Jahr 2014 entwickelt, wie man in der Zeitleiste sehen kann, aber es nie offiziell veröffentlicht.
Ich kann nicht glauben, dass Lewis weniger als 10 Installationen hat, wo Benbodhi 100.000 hat – das erscheint mir ziemlich unfair.
Ich habe das Miniaturbild im Medienraster zum Laufen gebracht, indem ich eine Funktion hinzugefügt habe, die Metadaten zu den SVG-Abmessungen des hochgeladenen SVG hinzufügt. Ich habe das einfach in meine functions.php eingefügt.
Ich habe es hier in dieser Antwort gefunden: https://wordpress.stackexchange.com/questions/255687/set-media-metadata-i-e-dimensions-field-on-svg-file-after-extracting-it-wit
Das Einzige, was mir bei diesen Ansätzen zur SVG-Unterstützung in WordPress fehlt, ist die Funktionalität für Titel und Beschreibungen in Inline-SVGs. Wäre es möglich, die Attribute "Alternativtext" und "Beschreibung" aus der Mediathek zu lesen und sie in die Inline-SVG-Elemente einzufügen?
Die Lösung, die für mich funktionierte, war, die Backbone.js-Vorlage im Footer von upload.php?mode=grid zu überschreiben. Dieses Tutorial hat mir geholfen: https://www.ibenic.com/extending-wordpress-media-uploader-embed-options/.
In der überschriebenen Vorlage (alle Vorlagen sind in wp-includes/media-template.php geschrieben, sie werden in den Admin-Footer gedruckt) mit der ID #tmpl-attachment müssen Sie die Zeile
<img src="{{ data.icon }}" class="icon" draggable="false" alt="" />ersetzenmit
<img src="{{ data.size.url }}" class="thumbnail" draggable="false" alt="" />Meinen Sie das ernst mit dem zweiten Ausschnitt? Er gibt einfach nur den CSS-Code an die Admin-Seite aus!
Ich hatte den gleichen Fehler wie einige von Ihnen beim Hochladen von SVG-Dateien in WordPress 5.0.3 über den WP-Hook, aber Enable SVG Uploads funktioniert wie erwartet, falls jemand am 21. Januar 2019 das gleiche Problem haben sollte.
Schöne Grüße.
Fügen Sie beide in functions.php ein
Hallo. Ich kann Webp nicht hochladen. Haben Sie Lösungen dafür?