Resalte la publicación de tema candente que contiene más de 5 comentarios

Al ejecutar un blog de WordPress, lo más importante es proporcionar contenido original y de alta calidad que atraiga a los lectores. Si tiene algunas publicaciones populares con muchos comentarios, debería considerar resaltar estos temas candentes. Es una excelente manera de captar la atención de los lectores.

Esta es una modificación muy fácil, que no requiere un complemento, y puede ayudarlo a filtrar visualmente el contenido en una lista de blogs y resaltar publicaciones importantes. Por ejemplo, puede elegir resaltar todas las publicaciones que contienen más de 5 comentarios.

Primero, profundicemos un poco dentro de los archivos principales de WordPress para tener una comprensión clara de la solución final.

Si hiciste algunas modificaciones de los archivos de temas en el pasado, probablemente hayas visto algo como esto:

<?php
/**
* The template part for displaying single posts
*
* @package WordPress
* @subpackage Twenty_Sixteen
* @since Twenty Sixteen 1.0
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><!-- .entry-header -->
<?php twentysixteen_excerpt(); ?>
<?php twentysixteen_post_thumbnail(); ?>
<div class="entry-content">

 post_class

Si busca post_Class dentro de los archivos principales de WordPress, puede encontrar fácilmente esta parte ubicada dentro de wp-includes/post-template.php:

$classes = array_map( 'esc_attr', $classes );
/**
* Filters the list of CSS classes for the current post.
*
* @since 2.7.0
*
* @param array $classes An array of post classes.
* @param array $class An array of additional classes added to the post.
* @param int $post_id The post ID.
*/
$classes = apply_filters( 'post_class', $classes, $class, $post->ID );
return array_unique( $classes );
}

apply_filters

Nuestra función para lograr esto se verá así:

/**
* Function for adding custom css class to post_class for posts with minimum number of comments
* Then styling of hot-topic css class can be done inside child theme style.css file or from WP Back end > Appearance > Customize
*/
if (! function_exists('wpklik_function_css_class_for_highly_commented_posts')) {
function wpklik_function_css_class_for_highly_commented_posts($classes, $class, $post_id) {
$min_comments = 5; // change this number to your liking
if (is_archive() || is_home()) {
if (get_comments_number() >= $min_comments) {
$classes[] = 'hot-topic';
}
}
return $classes;
}
add_filter('post_class', 'wpklik_function_css_class_for_highly_commented_posts', 10,3);
}

Con nuestra función, simplemente procesaremos la cantidad de comentarios en la lista de blogs y las páginas de archivo para cada publicación y, si ese número es mayor o igual que nuestro número mínimo deseado (establecido de forma predeterminada en 5), pasaremos nuestro tema de actualidad personalizado. clase css a estos artículos. Efectivamente, esto resaltará todas las publicaciones individuales con 5 o más comentarios en ellas.

Si ahora visita el blog e inspecciona las publicaciones que contienen más de 5 comentarios, notará una clase de tema candente.

style.css

Aquí hay un ejemplo del código que he usado para este propósito:

article.hot-topic:before {
content: "Trending !";
position: absolute;
left: -20px;
top: -20px;
transform: rotate(-7deg);
color: red;
font-weight: 600;
}
article.hot-topic .entry-title a {
text-decoration: underline;
}
article.hot-topic .entry-title a:hover {
color: red;
}
article.hot-topic span.comments-link a {
color: red;
font-weight: 600;
}

Y el resultado final es este:

Espero que algunos de ustedes encuentren esto interesante y útil, si es así, no olviden compartir.