wordpress短代码也在仪表板中呈现内容

I am using a simple wordpress shortcode

function my_recent_post()
{
 echo 'hello';
}
add_shortcode( 'recent', 'my_recent_post' );

with the shortcode [recent] and its working fine and visible in front page, but the problem is, its printing the hello in the dashboard also. below is the screenshot, can anyone please help.

Update:

I was actually trying to show posts, so can you help me with this, because it renders the lists of posts in the dashboard itself like the "hello". I tried:

function lorem_function() { 
    global $post; 
    $args = array( 'posts_per_page' => 10, 'order'=> 'ASC', 'orderby' => 'title' ); 
    $postslist = get_posts( $args ); 
    foreach ( $postslist as $post ) : 
        setup_postdata( $post ); ?>
        <div> 
        <?php the_date(); ?> <br /> <?php the_title(); ?> <?php the_excerpt(); ?> 
        </div> 

    <?php endforeach; 
    wp_reset_postdata(); 
    return; 
} 
add_shortcode('lorem', 'lorem_function');

Based on your comments to me & Nikita Dudarev, what you need to do is create a variable to hold all the post information and then return it. Using the function you posted as an example:

function lorem_function() { 
    global $post; 
    $args = array( 'posts_per_page' => 10, 'order'=> 'ASC', 'orderby' => 'title' ); 
    $postslist = get_posts( $args ); 

    // create a variable to hold the post information
    $html ="";
    foreach ( $postslist as $post ) : 
        setup_postdata( $post ); 

        $backgroundstyle = ""; 

        // get the featured image and set it as the background
        if ( has_post_thumbnail() ) { // make sure the post has a featured image
            $imageurl = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'medium' ); // you can change "medium" to "thumbnail or full depending on the size you need
            // add the css for the background image. You can include background-size etc ad required
            $backgroundstyle = "background-image: url('".$imageurl[0]."');";
        }

        // add the information to the variable
        $html .= '<div style="'.$backgroundstyle.'">';
        $html .= get_the_date();
        $html .= "<br />";
        $html .= get_the_title();
        $html .= get_the_excerpt();
        $html .= "</div>";

    endforeach; 
    wp_reset_postdata(); 

    return $html; 
} 
add_shortcode('lorem', 'lorem_function');

Note that the_date(), the_title() and the_excerpt() all display the information (just like echo).

Instead you must use get_the_date(), get_the_title() and get_the_excerpt() - these get the same information, but instead of displaying it directly, they return it as a variable which you can then store in your html string to be returned.

Update:

As you don't want to use the variable name on each line for whatever reason, you can do it like this:

$html .= "<div>".get_the_date()."<br />".get_the_title().get_the_excerpt()."</div>";

I'm not sure why you specifically want to change it to do that - it makes absolutely no difference to how it works, it just makes it harder to read and identify any errors :-)

Your function must return a value, not output

function my_recent_post()
{
 return 'hello';
}
add_shortcode( 'recent', 'my_recent_post' );