Soporte » Diseño – Temas y plantillas » Tres primeras noticias en tres columnas, siguientes ancho total.

  • Buenas a todos,

    Me han pedido una web, basada en el tema Twenty fourteen.

    La cuestíon que me surge, es que quieren mostrar 3 noticias en la portada en 3 columnas respectivamente y posteriormente, que el resto de noticias se muestren ocupando el 100% del ancho permitido, al ir añadiendo noticias, vayan desplazandose. No he encontrado nada similar por ningún sitio, lo he maquetado mediante css pero salen todas las noticias en columnas y solo quiero que sean las 3 primeras. Desconozco si existe algún plugin que permita realizar lo que os comento.

    Muchas gracias de antemano, espero podáis ayudarme.

    Un saludo.

Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
  • Saludos panasd.

    Fíjate en el loop que aparece en el codex http://codex.wordpress.org/The_Loop allí tienen un ejemplo de como dar un diferente estilo a una categoría «Style Posts From Some Category Differently» que en tu caso será para dar estilo diferente a las tres primeras entradas.

    Veamos el siguiente código:

    <!-- Start the Loop. -->
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
     ... 
    
     <?php if ( in_category('3') ) { ?>
               <div class="post-cat-three">
     <?php } else { ?>
               <div class="post">
     <?php } ?>
    
     ...
    
     <?php endwhile; else: ?>

    Primero que nada debemos crear una variable que sirva de contador para determinar cuál es el post 1,2,3…N. A el siguiente trozo de código:

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    Le agregamos:

    <?php $i=0 if ( have_posts() ) : while ( have_posts() ) : the_post(); $i++?>

    Ya tenemos la variable ($i) que se va incrementando por cada post que se va mostrando.

    Como no nos interesa la categoría a la cuál pertenece el post pero si el número de post mostrado tendremos que cambiar:

    <?php if ( in_category('3') ) { ?>

    por esto:

    <?php if ( $i < 3 ) { ?>

    Para al final colocar la case que muestren las tres primeras noticias en columnas continuas y el resto ocupando el ancho total. Usaré las clases vertical y horizontal como ejemplo:

    <?php if ( $i < 3 ) { ?>
               <div class="vertical">
     <?php } else { ?>
               <div class="horizontal">
     <?php } ?>

    Estoy seguro que tu index o home no tiene el mismo código pero usando el ejemplo del loop de WordPress puedes lograr lo que buscas.

    Saludos y no olvides comentar como te resulta.

    Iniciador del debate panasd

    (@panasd)

    Muchas gracias Shinjiru_fred, estoy probandolo, pero cuando pongo esa plantilla a funcionar, me sale la página en blanco, como cuando tocas el functions.php y lo haces mal… De momento lo tengo apañado con css nth-child, pero quiero que se haga mediante php. Espero tu respuesta, muy agradecido.

    Un saludo

    Iniciador del debate panasd

    (@panasd)

    Pego el codigo de la plantilla creada:

    <?php
     /*
     Template Name: Portada Nueva
     */
    
     get_header(); ?>
     <div id="main-content" class="main-content">
    
    <?php
    	if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
    		// Include the featured content template.
    		get_template_part( 'featured-content' );
    	}
    ?>
    
    	<div id="primary" class="content-area">
    		<div id="content" class="site-content" role="main">
    			<!-- Start the Loop. -->
    			<?php $i=0 if ( have_posts() ) : while ( have_posts() ) : the_post(); $i++?>
    			<?php if ( $i < 3 ) { ?>
    					<div class="vertical">
    			<?php } else { ?>
    					<div class="horizontal">
    			<?php } ?>
    			<?php endwhile; else: ?>
    
    		</div><!-- #content -->
    
    	</div><!-- #primary -->
    	<?php get_sidebar( 'content' ); ?>
    </div><!-- #main-content -->
    
    <?php
    get_sidebar();
    get_footer();
Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
  • El debate ‘Tres primeras noticias en tres columnas, siguientes ancho total.’ está cerrado a nuevas respuestas.