TuZonaWP utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies

Posteador
TuZonaWP
Administrador



Post Relacionados con Thumbnail en Wordpress



Los post relacionados son algo importante que no puede faltar en nuestro sitio web, debido a que aumenta la curiosidad del usuario, de tal forma con el cual se interesa en dicho post para dar clic y así seguir informan doce sobre cosas nuevas, uno de los beneficios que he traído para ti, es que no tendrás la necesidad de utilizar pluguins, ya que lo realizaremos utilizando código el cual puede ser personalizado, pues yo e agregado algunas funciones extras, por ende esto beneficia en nuestro sitio web ya que así podremos generar mas visitas, también le dará un diseño mas profesional a nuestro theme.

Como primer paso debe ingresar a su área admin en wordpress, ahora se dirige a la parte que dice apariencia - editor, ya dentro del área de editor debe buscar y dar clic en el archivo single.php.



<div class="prt">
<p>Post Relacionados</p>
<?php $related = get_posts( array( 'orderby'=>'rand', 'numberposts' => 4, 'post__not_in' => array($post->ID) ) );
if( $related ) foreach( $related as $post ) {
setup_postdata($post);
?>
<div class="rt">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php if (strlen($post->post_title) > 30) {
echo substr(the_title($before = '', $after = '', FALSE), 0, 30) . '...';
} else {
the_title();
}
?>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail('list_articles_thumbs'); }else{ ?>
<?php } ?>
</a>
</div>
<?php } wp_reset_postdata(); ?>
</div>



El código numberposts' => 4 indica el numero de post relacionados que tu deseas mostrar en esta ocasión tu puedes agregar el numero que gustes, para ello solo cambia el numero 4 por la cantidad que gustes.

Es importante agregar el código de post relacionados antes del código que muestra los comentarios, por lo general el código de comentarios se puede encontrar de la siguiente manera:


<div class="post-box-wrapper">
<div class="post-box">
<?php comments_template(); ?>
</div>
</div>


Una vez termines de realizar lo anterior, debes agregar los estilos CSS, así que en esta ocasión te lo dejare muy fácil y te mostrare el código CSS para que tu simplemente lo modifiques o adaptes de acuerdo a tu gusto.


/*Post related*/
.prt,
.btc {
margin: 0px 5px 20px 6px;
}

.prt {
text-align: center;
padding: 0 10px;
}

.rt a {
color: #222;
}

.rt {
display: inline-block;
margin: 10px 19px 10px 16px;
width: 150px;
}

.rt img {
margin-top: 10px;
}


Recuerda agregar el código CSS dentro del archivo style.css.
Esto seria prácticamente todo, ahora solo te queda poner un poco de tu parte para que le des un estilo de acuerdo a las necesidades de tu theme.

0 Comentarios


Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Ir al cielo