Das Wordpress
  1. Das Wordpress
  3. Wie man die Markup WordPress Inserts für Post-Bilder ändert
Intereting Posts
Wenn ich die Kategoriebasis von meinen URLs entferne, wie schwierig wird Rollback sein? databaseabfragen minimieren, wenn Sie erweiterte benutzerdefinierte Felder verwenden Taxonomiezahl pro Post-Typ So erhalten Sie alle Tags eines benutzerdefinierten Posttyps nach ID Wie fügt man AJAX zur PHP-Tabelle hinzu, dessen Daten über API aufgerufen werden Fügen Sie weitere Zeilen in der Medienauswahl hinzu Ersetzen Sie den Slug der Elternseiten durch # WordPress Benutzerdefinierte Post-Abfrage-Sortierung funktioniert nicht function, die vor dem wp_loaded-Hook aufgerufen wurde, triggers eine Warnmeldung aus RSS-Schaltfläche in Paginierungskategorien / Tags WordPress als Frontend-Website für iOS-App Nach dem Upgrade auf PHP 7.0 gibt mein Kontaktformular einen Fehler aus Tastaturkürzel zum Aktualisieren einer Seite oder eines Posts? Ein Kontrollkästchen Option für die Beschreibung in Widget Hinzufügen des Datums zum ACF-Feld

Wie man die Markup WordPress Inserts für Post-Bilder ändert

Ich entwickle ein Thema mit Unterstrichen für WordPress.

Wenn der Benutzer ein Bild mit dem TinyMCE-Editor hinzufügt, wird der folgende Code eingefügt: 

process

Wenn ich auf die letzte von WordPress erzeugte Seite schaue, erscheint das HTML im DOM 

 process

Ich habe eine function erstellt, um ein Thumbnail mit einer Breite von 300 Pixeln zu erzeugen: 

 add_action( 'after_setup_theme', 'images_theme_setup' ); function images_theme_setup() { add_image_size( 'preload-thumb', 300 ); // 300 pixels wide (and unlimited height) }

Jetzt möchte ich Pil ( https://github.com/gilbitron/Pil ) kompatiblen Markup verwenden, um Bilder zu liefern, so dass ich den preload-thumb bedienen und dann das größere Bild bedienen kann

Ich muss zu dem Markup wechseln, um das unten zu entsprechen

Solutions Collecting From Web of "Wie man die Markup WordPress Inserts für Post-Bilder ändert"

Soweit ich weiß, könntest du den Filter image_send_to_editor so image_send_to_editor : 

 function html5_insert_image($html, $id, $caption, $title, $align, https://wordpress.stackexchange.com/questions/231693/how-to-change-the-markup-wordpress-inserts-for-post-images/$url) { https://wordpress.stackexchange.com/questions/231693/how-to-change-the-markup-wordpress-inserts-for-post-images/$url = wp_get_attachment_url($id); $html5 = "
"; $html5 .= "$title"; $html5 .= "
"; return $html5; } add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

Für zusätzliche Tags wie data-pil-thumb-url und data-full-width und data-full-height Sie den entsprechenden Code innerhalb dieser function hinzufügen und zur $html5 Zeichenkette $html5 .

Siehe auch diese Seite für ein Beispiel mit einer Bildunterschrift

bei css-tricks oder
diese detailliertere
an.

Es gibt einen Filter namens image_send_to_editor , mit dem Sie das Markup festlegen können. Sie benötigen außerdem wp_get_attachment_metadata , um Breite und Höhe abzurufen. Es heißt so (ungetestet): 

  add_filter( 'image_send_to_editor', 'wpse_231693_img_markup', 10, 7 ); function wpse_231693_img_markup ($html, $id, $alt, $title, $align, https://wordpress.stackexchange.com/questions/231693/how-to-change-the-markup-wordpress-inserts-for-post-images/$url, $size ) { $metadata = wp_get_attachment_metadata ($id); https://wordpress.stackexchange.com/questions/231693/how-to-change-the-markup-wordpress-inserts-for-post-images/$url = wp_get_attachment_url($id); $html = '
' . $alt . '
'; return $html; }

Du brauchst einen cleveren Regex, um XXX aus $ url zu konstruieren, aber das überlasse ich dir.