Personally I think the use of HTML5 makes sense and I like the new possibilities, also in the field of semantics. WordPress has a feature on delivering content that come from the editor – setting breaks and paragraphs. Since forever WordPress is the reason for that, not TinyMCE and the same applies to the integration of images or other elements of this kind. In order to use HTML5 in a perfect way I had to replace the p-Tag with the figure-Tag and so is this small filter was created.
An alternative when inserting the image into the editor is the filter image_send_to_editor, which makes adjustments in many ways, but the p-Tag is not involved, since this is set when serving – wpautop().
I’m not particularly gifted in regex expressions and would be happy if you are providing some improvements and ideas to the solution, since this type is used frequently and the use of HTML5 is progressing. Maybe this solution from James is an great part. To what extent WordPress is respondeding is currently not clear at this point and I also couldn’t see a filter, so a regex wouldn’t be necessary at this place. In this context, there are some issues that require a revision of the WordPress Editor to use the editor in a clean way with HTML5. The Basic Theme I have in HTML5 Version version already incorporated some things.
// unautop for images
function fb_unautop_4_img( $content ) {
$content = preg_replace(
'/<p>\\s*?(<a rel=\"attachment.*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s',
'<figure>$1</figure>',
$content
);
return $content;
}
add_filter( 'the_content', 'fb_unautop_4_img', 99 );
Comments
5 responses to “Replace p-Tag on Images in Content of WordPress”
Hi Frank, interesting regular expression – I like what you’ve done with the output. We put up some similar code a few months ago, but hadn’t adapted it for outputting other types of tags around the images – http://blog.fublo.net/2011/05/wordpress-p-tag-removal/
@James: great; i will link to this for read other solutions. Thanks
I took your request for improvements on the regex. Here is my suggestion, more readable an safe:
(new try with displayed html-tags:)
$content = preg_replace( '!<p>\s*(<a rel="attachment[^>]+><img[^>]+></a>|<img[^>]+>)\s*</p>!', '<figure>$1</figure>',Frank,
Obviously James knowns what’s he doing on regex. The most common error on regex is forget the greedy nature of it, and dosn’t use “*?” or “+?” to reverse this greediness.
The double backslash is added by the WP, no?
Best,
JP
@Martin: thanks, i will test and use this, if works fine.
@Juan: the doubleslash was not from WP, is realy in my source. But an thanks for your hint!