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.