loop - Insert content above an embedded video inside Wordress' php the_content

admin管理员组

文章数量:1317909

I'm a long time beginner in Wordpress theming (i do bits here and there for myself) and have a question. I run a very large website and i'm trying to redesign it (responsive etc) and have run into a problem...

Basically my content is text then a video or image underneath in every post. I am trying to position my tags underneath the text but before the media so it goes:-

1. header
2. text
3. tags
4. media

My question is would it be possible to do this.. somehow slip the tags in after the paragraphs but before the media?

Just incase it matters i have this in my Functions file to help control the embedded videos..

 /** embed modifyer */

function video_embed_html( $html ) { 
    return '<div class="innerpostvideo">' . $html . '</div>'; 
    } 
add_filter( 'embed_oembed_html', 'video_embed_html', 10 );

Thanks in advance!!

PS i can't edit every post to do this.. i have almost 10,000 posts

EDIT: I should mention the images are also links.

UPDATED: User Pat J Came up with a solution which was great but had a couple of problems. On the image post it works almost as intended except it prints the html inside the "a" tag of the img. On the Video post, it's acting kind of strange, it goes in this order:- 1, Paragraphs 2, video 3, My Custom HTML 4, Paragraphs repeated 5, Video Repeated So it's printing the content twice. His code is below:-

add_filter( 'the_content', 'wpse377076_insert_above_image', 20 );
/**
 * Inserts some HTML above a piece of media (image or video).
 *
 * @param  string $content The post/page content.
 * @return string          The filtered content.
 */
function wpse377076_insert_above_image( $content ) {
    // Checks for <img tags in the content.
    if ( false !== strpos( $content, '<img' ) || false !== strpos( $content, '<div class="innerpostvideo' ) ) {
        // Only inserts above the first image/video.
        $image_position = strpos( $content, '<img' );
        $video_position = strpos( $content, '<div class="innerpostvideo' );
        // Gets the position of the first item.
        $position = 0; 
        if ( false !== $image_position ) {
            $position = $image_position;
        }
        if ( false !== $video_position && $video_position < $image_position ) {
            $position = $video_position;
        }
        $content_up_to_first_media = substr( $content, 0, $position-1 );
        $content_after_first_media = substr( $content, $position );
        $content = 
            $content_up_to_first_media .
            '<div class="my-tags">My custom HTML</div>' .
            $content_after_first_media;
    }
    return $content;
}

I'm a long time beginner in Wordpress theming (i do bits here and there for myself) and have a question. I run a very large website and i'm trying to redesign it (responsive etc) and have run into a problem...

Basically my content is text then a video or image underneath in every post. I am trying to position my tags underneath the text but before the media so it goes:-

1. header
2. text
3. tags
4. media

My question is would it be possible to do this.. somehow slip the tags in after the paragraphs but before the media?

Just incase it matters i have this in my Functions file to help control the embedded videos..

 /** embed modifyer */

function video_embed_html( $html ) { 
    return '<div class="innerpostvideo">' . $html . '</div>'; 
    } 
add_filter( 'embed_oembed_html', 'video_embed_html', 10 );

Thanks in advance!!

PS i can't edit every post to do this.. i have almost 10,000 posts

EDIT: I should mention the images are also links.

UPDATED: User Pat J Came up with a solution which was great but had a couple of problems. On the image post it works almost as intended except it prints the html inside the "a" tag of the img. On the Video post, it's acting kind of strange, it goes in this order:- 1, Paragraphs 2, video 3, My Custom HTML 4, Paragraphs repeated 5, Video Repeated So it's printing the content twice. His code is below:-

add_filter( 'the_content', 'wpse377076_insert_above_image', 20 );
/**
 * Inserts some HTML above a piece of media (image or video).
 *
 * @param  string $content The post/page content.
 * @return string          The filtered content.
 */
function wpse377076_insert_above_image( $content ) {
    // Checks for <img tags in the content.
    if ( false !== strpos( $content, '<img' ) || false !== strpos( $content, '<div class="innerpostvideo' ) ) {
        // Only inserts above the first image/video.
        $image_position = strpos( $content, '<img' );
        $video_position = strpos( $content, '<div class="innerpostvideo' );
        // Gets the position of the first item.
        $position = 0; 
        if ( false !== $image_position ) {
            $position = $image_position;
        }
        if ( false !== $video_position && $video_position < $image_position ) {
            $position = $video_position;
        }
        $content_up_to_first_media = substr( $content, 0, $position-1 );
        $content_after_first_media = substr( $content, $position );
        $content = 
            $content_up_to_first_media .
            '<div class="my-tags">My custom HTML</div>' .
            $content_after_first_media;
    }
    return $content;
}

• loop
• css
• the-content

Share Improve this question edited Oct 29, 2020 at 17:29 Jason asked Oct 24, 2020 at 18:16 JasonJason 1333 bronze badges 2

• In your posts, are the images added via the Media Library, or are these Featured Images that have been placed at the bottom of the post content? Do they have a specific CSS ID or class applied to them? – Pat J Commented Oct 24, 2020 at 21:13
• Sorry for the late reply, went to bed haha! The images are from the Media Library and the videos are just Embedded Youtube / Vimeo using Oembed. I've added the class "innerpostvideo" to the Video Embeds but the images are have standard WP image classes attached .. (alignnone size-full wp-image-image ID here). Cheers – Jason Commented Oct 25, 2020 at 12:32

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I came up with this, which seems to work.

Notes:

• It adds the custom HTML before the very first image / media embed in a post's content; if there are more than one image / video, it'll only place the custom HTML once
• It requires the innerpostvideo div you mentioned in your question

You can add the code to your active theme's functions.php file, or write a custom plugin.

add_filter( 'the_content', 'wpse377076_insert_above_image', 20 );
/**
 * Inserts some HTML above a piece of media (image or video).
 *
 * @param  string $content The post/page content.
 * @return string          The filtered content.
 */
function wpse377076_insert_above_image( $content ) {
    // Checks for <img tags in the content.
    if ( false !== strpos( $content, '<img' ) || false !== strpos( $content, '<div class="innerpostvideo' ) ) {
        // Only inserts above the first image/video.
        $image_position = strpos( $content, '<img' );
        $video_position = strpos( $content, '<div class="innerpostvideo' );
        // Gets the position of the first item.
        $position = 0; 
        if ( false !== $image_position ) {
            $position = $image_position;
        }
        if ( false !== $video_position && $video_position < $image_position ) {
            $position = $video_position;
        }
        $content_up_to_first_media = substr( $content, 0, $position-1 );
        $content_after_first_media = substr( $content, $position );
        $content = 
            $content_up_to_first_media .
            '<div class="my-tags">My custom HTML</div>' .
            $content_after_first_media;
    }
    return $content;
}

本文标签： loopInsert content above an embedded video inside Wordress39 php thecontent