=======================================
Mostrar entradas relacionadas en escritorio excepto en moviles solución con media queries CSS:
=======================================
function insert_related_posts($content) {
if (is_single() && in_the_loop() && is_main_query()) {
global $post;
$args = array(
'post_type' => 'post',
'posts_per_page' => 4,
'post__not_in' => array($post->ID),
'orderby' => 'rand',
);
$related_posts = new WP_Query($args);
if ($related_posts->have_posts()) {
$content .= '<style>
.related-posts-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 30px;
}
.related-post {
flex: 1 1 calc(25% - 20px);
text-align: left;
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s ease-in-out;
}
.related-post:hover {
transform: translateY(-5px);
}
.related-post img {
width: 100%;
height: auto;
border-radius: 10px;
}
.related-post-title {
font-size: 15px;
font-weight: 600;
margin-top: 10px;
line-height: 1.3;
}
.related-post-title a {
text-decoration: none;
color: #156a62;
}
/* Ocultar en dispositivos móviles */
@media (max-width: 767px) {
.related-posts-container {
display: none !important;
}
}
</style>';
$content .= '<div class="related-posts-container">';
while ($related_posts->have_posts()) {
$related_posts->the_post();
$content .= '<div class="related-post">
<a href="' . get_permalink() . '">
' . get_the_post_thumbnail(get_the_ID(), 'medium') . '
</a>
<div class="related-post-title">
<a href="' . get_permalink() . '">' . get_the_title() . '</a>
</div>
</div>';
}
$content .= '</div>';
wp_reset_postdata();
}
}
return $content;
}
add_filter('the_content', 'insert_related_posts');
=======================================
Mostrar entradas relacionadas en escritorio excepto en moviles solución important !wp_is_mobile()) :
=======================================
function insert_related_posts($content) {
if (is_single() && in_the_loop() && is_main_query() && !wp_is_mobile()) { // Solo en escritorio
global $post;
$args = array(
'post_type' => 'post',
'posts_per_page' => 4,
'post__not_in' => array($post->ID),
'orderby' => 'rand',
);
$related_posts = new WP_Query($args);
if ($related_posts->have_posts()) {
$content .= '<style>
.related-posts-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 30px;
}
.related-post {
flex: 1 1 calc(25% - 20px);
text-align: left;
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s ease-in-out;
}
.related-post:hover {
transform: translateY(-5px);
}
.related-post img {
width: 100%;
height: auto;
border-radius: 10px;
}
.related-post-title {
font-size: 15px;
font-weight: 600;
margin-top: 10px;
line-height: 1.3;
}
.related-post-title a {
text-decoration: none;
color: #156a62;
}
</style>';
$content .= '<div class="related-posts-container">';
while ($related_posts->have_posts()) {
$related_posts->the_post();
$content .= '<div class="related-post">
<a href="' . get_permalink() . '">
' . get_the_post_thumbnail(get_the_ID(), 'medium') . '
</a>
<div class="related-post-title">
<a href="' . get_permalink() . '">' . get_the_title() . '</a>
</div>
</div>';
}
$content .= '</div>';
wp_reset_postdata();
}
}
return $content;
}
add_filter('the_content', 'insert_related_posts');