• 21-01-2018, 20:26:15
    #1
    Merhaba arkadaşlar yenı açtığım blog sitem için genel olarak beğendiğim bi tema olmuştu kurduktan sonra farkettim ki temanın post dizilimi listeleme şeklinde ilerliyor,post görünümünü BU LİNKTEKİ gibi yapma şansım var mı ?
  • 21-01-2018, 20:28:40
    #2
    Var hocam yapabilirsiniz. Sitenizin adresini atın bakayım bi.
  • 21-01-2018, 20:38:08
    #3
    Temanizin loop kismini sununla degistirip istediginiz gibi oynayabilirsiniz:

    <ul class="grid-wrap">
    
    	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
    	
    		<li class="grid-item">
    
    			
    			<p>
    				<?php if ( has_post_thumbnail() ) : ?>
                            		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'large' ); ?></a>
    				<?php endif; ?>
    			</p>
    
    			
    			<h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    
    			
    			<p class="author-text">Posted on <?php echo the_time('F jS, Y');?> by <?php the_author_posts_link(); ?> </p>            
    		
    			<?php the_excerpt(); ?>
    
    			<?php endwhile; ?>
    			<?php endif; ?>
    
    
    		</li>
    
    	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>></div>
    
    </ul>
    Style.css'ye de bunu ekleyin:

    .grid-wrap {
    	display: flex;
    	flex-flow: row wrap;	
    	align-items: center;	
    	justify-content: center;
    	list-style: none;
    }
    
    .grid-item {
    	flex-basis: 400px;	
    	height: 500px;		
    	padding: 10px;	
    	margin: 10px;	
    }
    
    
    .grid-item img {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	max-width: 400px;
    }
    
    .grid-wrap ul {
    	margin-left: 0;
    }
  • 21-01-2018, 20:45:24
    #4
    @media (min-width: 650px) {
        #main article {
            width: calc(50% - 10px);
        }
        #main article:nth-child(odd) {
            float: left;
            clear: left;
        }
        #main article:nth-child(even) {
            float: right;
            clear: right;
        }
    }
    Bu kodu style.css dosyanıza yapıştırın. İstediğniz şeyi karşılayacaktır.
  • 21-01-2018, 22:43:06
    #5
    Çok teşekkür ederim hocam dn kısa sürede geri dönüş yapacağım