Soporte » Diseño – Temas y plantillas » como mostrar entradas pero con este diseño

  • final2

    Saludos.
    Espero me puedan ayudar organizar la idea que tengo, de que manera mostrar las entradas aplicando el diseño que se muestra en la imagen. se como hacer el diseño para la pagina principal con su html, css, aplicando flexbox o bootstrap.

    comenzando en la parte superior muestra la entrada mas actual la mas reciente, y asi las siguientes que le siguen de forma ascendente.

    yo puedo mostrar las entras pero aplicando un solo diseño por ejemplo si se fijan en la imagen las entradas o los post NUMERO 2,NUMERO 3,NUMERO 4, lo puedo hacer de esa manera.

    DUDAS
    1-al utilizar el loop para mostrar todas las entradas como lo hago utilizando el diseño de la imagen.

    2-podria hacer un wp_query y mostrar el post mas reciente, despues aria otro y mostraria los otros 3 obiando el mas reciente, y hacer otra wp_query y mostrar los otros 2 que hacen falta oviando los que ya se estan mostrando pero creo que no es asi

    espero haberme explicado de la mejor manero de que es lo que quiero hacer.

    ojala me puedan aclara esta duda ya que desde hace rato quiero hacer algo asi.

Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
  • Moderador LGrusin

    (@lgrusin)

    Yo no haría dos querys, puedes usar una clase CSS diferente para la primera entrada. Aquí tienes un ejemplo:
    https://stackoverflow.com/questions/18357231/if-first-post-style-differently-wordpress

    • Esta respuesta fue modificada hace 11 meses, 4 semanas por LGrusin.
    Iniciador del debate novatophp2014

    (@novatophp2014)

    Saludo LGrusin. te agradesco por la respuesta, sabia que había una forma mas fácil de hacerlo, comenzare hacer los test y les aviso como me fue por si alguien necesita algo igual.

    si quieren segir aportando con mas ideas sera fantástico.

    Iniciador del debate novatophp2014

    (@novatophp2014)

    Comparto con usted, como deje el diseño,no es la gran cosa pero les sera de ayuda para sus proyectos.

    dise-o-Final

    ESTE ES EL HTML

    <?php
    get_header();
    ?>
    
    <section class="pagina-servicio">
    	<div class="container">
    		<div class="row">
    <?php 
    if (have_posts()) : $c=0;
     	while (have_posts()) : the_post(); 
    
     		$c++;
    		if( $c == 1) :
    
    			$thumbID = get_post_thumbnail_id( $post->ID );
    			$imgDestacada = wp_get_attachment_url( $thumbID );
    ?>
    			<div class="col-xs-12 col-md-9 col-lg-9">
    
    				<div class="contenedor-pagina-servicio">
    					<img src="<?php echo $imgDestacada;?>" alt=""> 
    
    					<div class="pagina-servicio-texto">
    						<h2><?php the_title(); ?></h2>
    						<div class="fecha-autor">
    							<span>Creado:</span> <?php the_author(); ?> - 
    							<span>Fecha:</span> <?php the_date(); ?>
    						</div>
    						<p><?php the_content(); ?></p>
    						<a href="<?php //get_permalink();?>">Leer mas...</a>
    					</div>
    				</div>
    			</div>	
    
    	
    </div><!-- 	container -->
    	</div>
    </section> 
    
    <section class="pagina2-servicio2">
    	<div class="container">
    		<div class="row">
    		
    		<?php   else :
    			$thumbID2 = get_post_thumbnail_id( $post->ID );
    			$imgDestacada2 = wp_get_attachment_url( $thumbID2 );
    		?>
    		<div class="col-xs-12 col-md-3 col-lg-3 ">
    			<div class="contenedor-pagina-servicio2">
    				<img src="<?php echo $imgDestacada2;?>" alt=""> 
    
    					<div class="pagina-servicio-texto2">
    						<h2><?php the_title(); ?></h2>
    				
    						<div class="fecha-autor2">
    							<span>Creado:</span> <?php the_author(); ?> - 
    						</div>				
    						<a href="<?php //get_permalink();?>">Leer mas...</a> 
    					</div>
    			</div>
    		</div>	<!-- colu -->
    		<?php 
    	   		endif;
    		endwhile;
    		?>
    	
    </div> <!-- contaier -->
    </div> <!-- row -->
    </section>
    <?php
    endif; ?>
    <?php get_footer(); ?>

    EL CSS

    
    
    /*#f3f3f3	#f5f5f5	#f6f6f6	#f8f8f8	#fafafa	#fbfbfb	#fdfdfd*/
    	/*background-color: #fdfdfd;*/
    
    /*PLANTILLA PAGE-SERVICIOS.PHP*/
    section.pagina-servicio{
    	display: flex;
    	justify-content: space-around;
    	/*background: rgba(51,51,51,0.3);*/
    	background-color: #f3f3f3;
    	margin-top: 20px;
    	margin-bottom: 20px;	
    }
    
    .pagina-servicio .contenedor-pagina-servicio{
    	display: flex;
    	/*justify-content: space-around;*/
    	margin-top: 30px;
    	margin-bottom: 20px;
    	background-color: #fafafa;
    	/*flex-wrap: wrap;*/
    }
    
    .pagina-servicio .contenedor-pagina-servicio img{
    	width: 50%;
    	border: 3px solid #f2f2f2;	
    }
    
    .pagina-servicio .pagina-servicio-texto{
    	flex-direction: column;
    	padding: 0 25px;
    	text-align: center;
    }
    
    .contenedor-pagina-servicio .pagina-servicio-texto h2{
    	font-family: 'Poppins';
    	font-size: 25px;
    	margin-top: 35px;
    	
    }
    .contenedor-pagina-servicio .pagina-servicio-texto p{
    	font-family: 'Poppins';
    	font-size: 12px;
    	text-align: justify;
    	padding: 0 10px;
    }
    
    .contenedor-pagina-servicio .pagina-servicio-texto a{
    	text-decoration: none;
    	font-family: 'Poppins';
    	color: #333;
    	font-weight: 600;
    }
    
    .pagina-servicio-texto .fecha-autor {
    	margin-bottom: 12px;
    	font-size: 13px;
    	
    }
    
    .pagina-servicio-texto .fecha-autor span{
    	color:#333;
    	font-weight: 600;
    }
    
    /*2do DISEÑO*/
    .pagina2-servicio2{
    	display: flex;
    	background-color: #f3f3f3;
    }
    
    .pagina2-servicio2 .contenedor-pagina-servicio2{
    	flex-direction: column;
    	margin-bottom: 20px;
    	background-color: #fafafa;
    }
    
    .contenedor-pagina-servicio2 .pagina-servicio-texto2 h2{
    	font-family: 'Poppins';
    	font-size: 25px;
    	margin-top: 35px;
    }
    
    .pagina2-servicio2 .contenedor-pagina-servicio2 img{
    	width: 100%;
    	height: 380px;
    
    }
    
Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
  • El debate ‘como mostrar entradas pero con este diseño’ está cerrado a nuevas respuestas.