- Desde
- 13 Dic 2011
- Mensajes
- 1.515
Muy buenas comunidad de forobeta.
Hoy les traigo el cómo hacer para colocar posts/artículos relacionados en sus entradas de WordPress:
Tutorial:
Colocar posts/artículos relacionados sin plugins
Hoy les traigo el cómo hacer para colocar posts/artículos relacionados en sus entradas de WordPress:
Tutorial:
Colocar posts/artículos relacionados sin plugins
1- Pegamos el siguiente código PHP en el archivo functions.php de nuestro theme actual:
PHP:
<?php
function relacionados(){
global $post; //Obtenemos la variable $post que contiene información del post
$postid = $post->ID; //Obtenemos el ID del post donde estamos, para excluirlo de loop
$cat = get_the_category($postid); //Obtenemos las categorías en las que figura nuestro post
$cat = $cat[0]->cat_ID; //Seleccionamos la primera de todas
$c_posts = 5; //Número de la cantidad de posts que van a aparecer
$ordby = 'rand'; //Ordenar random, ver más en http://codex.wordpress.org/Class_Reference/WP_Query#Order_.26_Orderby_Parameters "orderby"
$c_letras = 280; //Número de carácteres a mostrar como extracto de cada artículo
$query = array('posts_per_page' => $c_posts, 'cat' => $cat, 'post__not_in' => array($postid), 'orderby' => $ordby); //Nuestro "query" para el bucle de posts
?>
<!-- Relacionados por Lopezito -->
<section class="rposts">
<h3>Tal vez te interese..</h3>
<?php
query_posts($query);
while(have_posts()) : the_post();
?>
<article class="rpost">
<a href="<?php the_permalink(); ?>" title="Enlace permanente hacia <?php the_title_attribute(); ?>"><h5><?php the_title(); ?></h5></a>
<section class="rcont">
<a href="<?php the_permalink(); ?>" title="Enlace permanente hacia <?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
<?php echo substr(get_the_excerpt(),0,$c_letras); ?>...
</main>
</article>
<?php
endwhile;
wp_reset_query(); //finalizamos el query_posts
?>
</section>
<!-- / Relacionados por Lopezito -->
<?php
}
?>2- Agregamos el siguiente código CSS a una hoja de estilo(style.css) de nuestro theme:
Insertar CODE, HTML o PHP:
.rposts{padding:5px;margin:5px 0}
.rposts h3{font-weight:100;padding:10px;color:#FFF;font-size:19px;text-shadow:1px 1px rgba(88, 88, 88, 0.33);display:inline-block;background:#74B2CF!important;letter-spacing:1px}
.rpost{background:#fff!important;border-top:1px solid #eee!important}
.rpost:nth-child(2n+2){background:#F4FBFF!important}
.rpost a h5{text-decoration:none;font-size:15px;font-weight:100;text-shadow:1px 1px #fff;color:#444;margin-bottom:5px;padding:5px}
.rcont{margin:5px;overflow:hidden;color:#444;font-style:italic}
.rcont a img{float:left;width:48px!important;height:48px!important;border:none!important;margin:5px 15px;box-shadow:0 0 8px #FFF}3- Implementación, en single.php preferentemente antes de la linea endwhile;(puede estar o no en su theme):
PHP:
<?php relacionados(); ?>Resultado:
DEMO: Descargar AutoLikeWP v3.2 - Plugin WordPress
Extra:
Solo links:
Filtrar por etiquetas(tags):
1.a- Modificar:
1.b- Por:
2.a- Modificar:
2.b- Por:
3.a- Modificar:
3.b- Por:
4- CSS:
PHP:
<section class="rposts">
<h3>Tal vez te interese..</h3>1.b- Por:
PHP:
<section class="rposts">
<h3>Tal vez te interese..</h3>
<ul>2.a- Modificar:
PHP:
<article class="rpost">
<a href="<?php the_permalink(); ?>" title="Enlace permanente hacia <?php the_title_attribute(); ?>"><h5><?php the_title(); ?></h5></a>
<section class="rcont">
<a href="<?php the_permalink(); ?>" title="Enlace permanente hacia <?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
<?php echo substr(get_the_excerpt(),0,$c_letras); ?>...
</main>
</article>2.b- Por:
PHP:
<li class="rpost"><a href="<?php the_permalink(); ?>" title="Enlace permanente hacia <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>3.a- Modificar:
PHP:
</section>3.b- Por:
PHP:
</ul>
</section>4- CSS:
Insertar CODE, HTML o PHP:
.rposts{padding:5px;margin:5px 0}
.rposts h3{font-weight:100;padding:10px;color:#FFF;font-size:19px;text-shadow:1px 1px rgba(88, 88, 88, 0.33);display:inline-block;background:#74B2CF!important;letter-spacing:1px}
.rpost{padding:5px}
.rpost a{transition: all ease .5s;text-decoration:none;font-size:15px;font-weight:100;text-shadow:1px 1px #fff;color:#444;margin-bottom:5px;padding:5px}
.rpost a:hover{text-decoration:underline}Filtrar por etiquetas(tags):
1.a- Modificar:
1.b- Por:
2.a- Modificar:
2.b- Por:
PHP:
$cat = get_the_category($postid); //Obtenemos las categorías en las que figura nuestro post
$cat = $cat[0]->cat_ID; //Seleccionamos la primera de todas1.b- Por:
PHP:
$tag = get_the_tags($postid); //Obtenemos las etiquetas en las que figura nuestro post
$tag = $tag[0]->term_id; //Seleccionamos la primera de todas2.a- Modificar:
PHP:
$query = array('posts_per_page' => $c_posts, 'cat' => $cat, 'post__not_in' => array($postid), 'orderby' => $ordby); //Nuestro "query" para el bucle de posts2.b- Por:
PHP:
$query = array('posts_per_page' => $c_posts, 'tag' => $tag, 'post__not_in' => array($postid), 'orderby' => $ordby); //Nuestro "query" para el bucle de postsPueden luego ir acomodándolo como ustedes quieran, consultando el Main Page « WordPress Codex para agregar datos de los posts: fechas, autor, etc.
Eso es todo. Sí, rápido porque en el mismo código explique cada cosa y es sencillo el código para modificarlo.
7:No te olvides, si te gusto, agradecer con un "Me Agrada" y/o comentario. :encouragement:
Un saludo.
Última edición:
