<?php
$postTags = wp_get_post_terms( get_queried_object_id(), 'post_tag', ['fields' => 'ids'] );
$relatedPostsArgs = [
'post__not_in' => array( get_queried_object_id() ),
'posts_per_page' => 1,
'orderby' => 'rand',
'tax_query' => [
[
'taxonomy' => 'post_tag',
'terms' => $postTags
]
]
];
$relatedPosts = new wp_query( $relatedPostsArgs );
if( $relatedPosts->have_posts() ) :?>
<div id="temporary-suggestion" class="temporary-suggestion" style="display: block">
<span class="close-suggestion" onclick="function closeSuggestion(){document.getElementById('temporary-suggestion').remove()}closeSuggestion();">X</span>
<a target="_blank" href="<?php echo get_permalink() ?>"><img class="temporary-suggestion-image" alt="<?php the_title() ?>" src="<?php echo get_the_post_thumbnail_url($post->ID, "thumbnail") ?>">
<h4 id="temporary-suggestion-title"><?php the_title() ?></h4>
</a>
</div>
<style>
.temporary-suggestion {
position:fixed;
top:80px;
width:290px;
left:3px;
z-index:10000;
background:#fff;
color:#000;
border-radius:6px;
box-shadow:0 0 17px -2px #000;
display:none
}
.temporary-suggestion a {
padding:10px 7px 8px 5px;
float:right;
color:#020002;
font-size:15px;
font-weight:700;
background-image:none;
text-align:center;
line-height:24px
}
.temporary-suggestion h4 {
margin:0
}
.temporary-suggestion img {
height:180px;
border-radius:10px
}
.close-suggestion {
width: 37px;
height: 37px;
position: absolute;
top: -20px;
right: -10px;
background: #ff5700;
border-radius: 50%;
background-size: 11px;
cursor: pointer;
border: solid 5px #ea3b64;
color: #fff;
text-align: center;
line-height: 30px;
}
</style>
<?php endif; ?>