Hola. Para mostrar el extracto de los posts en el slider, seguí los siguientes pasos:
1. PHP:
Abrí el archivo featured-content.php, buscá este código:
<h2 class="post-title entry-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<?php echo apply_atomic_shortcode( 'byline', '<div class="byline">' . __( '[entry-published]', 'oxygen' ) . '</div>' ); ?>
e insertá la siguiente línea:
<p class="entry-desc"><?php echo get_the_excerpt(); ?></p>
entre
</h2>
y
<?php echo apply_atomic_shortcode( 'byline', '<div class="byline">' . __( '[entry-published]', 'oxygen' ) . '</div>' ); ?>
Te tendría que quedar así:
<h2 class="post-title entry-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<p class="entry-desc"><?php echo get_the_excerpt(); ?></p>
<?php echo apply_atomic_shortcode( 'byline', '<div class="byline">' . __( '[entry-published]', 'oxygen' ) . '</div>' ); ?>
2. CSS:
Abrí el archivo style.css y hacéle los siguientes cambios:
a. Reemplazá esto:
.featured-post h2.entry-title a {
position: absolute;
bottom: 110px;
right: 0;
color: #111;
background: #fff;
padding: .4em 30px .4em 1.5em;
font-size: 1em;
text-transform: uppercase;
}
por esto:
.featured-post h2.entry-title a, .featured-post .entry-desc {
position: absolute;
right: 0;
background: #fff;
padding: .4em 30px .4em 1.5em;
}
.featured-post .entry-desc {
bottom: 53px;
color: #666;
font-family: Abel, sans-serif;
font-size: 1.5em;
}
.featured-post h2.entry-title a {
bottom: 120px;
color: #111;
font-size: 1em;
text-transform: uppercase;
}
b. Reemplazá esto:
.featured-post .byline {
position: absolute;
bottom: 82px;
right: 0;
color: #999;
background: #fff;
padding: .4em 30px .4em 1.3em;
font-size: 0.9166666666666667em;
}
por esto:
.featured-post .byline {
position: absolute;
bottom: 55px;
right: 0;
color: #999;
background: #fff;
padding: .4em 30px .4em 1.3em;
font-size: 0.9166666666666667em;
}
c. Reemplazá esto:
.featured-post:hover h2.entry-title a, .featured-post:hover .byline {
por esto:
.featured-post:hover h2.entry-title a, .featured-post:hover .byline, .featured-post:hover .entry-desc {
d. y, por último, reemplazá esto:
a, a img, .featured-post .byline{
por esto:
a, a img, .featured-post .byline, .featured-post .entry-desc {
Después podés hacerle más cambios a la hoja de estilos CSS para que quede como más te gusta.
Suerte. Saludos.
