sıralama sorunu

11-12-2017, 22:37:42

problem bu arkadaşlar. Temayı aldığım sitenin demosunda da bu şekilde yani adam bunu bilerek yapmış ama benim gözüme çok kötü görünüyor ben bunu 2 x 2 şeklinde ayarlamak istiyorum
single.php dosyasındaki ilgili satır

<div class="reading"> <h3 style="text-shadow:1px 1px 2px #888;"><span class="rss-image" style="margin-left:10px;margin-right:5px;"></span> Related Wallpaper</h3>
 <?php if(function_exists('related_post')):?><?php new_related_post($post);?><?php endif; ?> </div> <?php endwhile; ?> <p style="font-size:12px;padding:10px;">
<?php echo get_theme_option('footer_disclaimer');?> </p> </div> <?php get_sidebar(); ?> </div> 
<?php get_footer(); ?>

style.css reading kısmı

.reading{width:100%;} 
.reading img {float:left;}
.reading img:hover{ background:#ddd;} 
.reading-block {width:48%;float:left;margin-right:5px; }

functions.php new_related_post kısmı

function new_related_post($post) {
$orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
    $category_ids = array();
    foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
        $args=array(
        'category__in' => $category_ids,
        'post__not_in' => array($post->ID),
        'posts_per_page'=> 4, // Number of related posts that will be displayed.
        'caller_get_posts'=>1,
        'orderby'=>'rand' // Randomize the posts
        );
    $my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
    while( $my_query->have_posts() ) {
    $my_query->the_post(); ?>
                <div class="reading-block view view-first">
                <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
                <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) 
                        {  //the_post_thumbnail(array(50,50), array("class" => "alignleft")); 
                                            the_post_thumbnail('wallpaper',array("class"=>"alignleft")); 
                        }
                      else { ?>
                            <img class="alignleft" src ="<?php echo get_template_directory_uri(); ?>/images/default.jpg" width="300" height="200" alt="pending image" />                                            
                  <?php }  ?>
                <div class="mask">
                        <h2><?php the_title();?></h2>
                        <p><?php echo getPostViews(get_the_ID());?></p>
                </div>
                </a>
         
    </div>
    <?php }
} }
$post = $orig_post;
wp_reset_query();
}

style.css view kısmı

.view,.view_3{
   width: 300px;
   height:180px;
   margin: 10px;
   float: left;
   border: 10px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 4px #424242;
   -moz-box-shadow: 1px 1px 4px #424242;
   box-shadow: 1px 1px 4px #424242;   /* originalcolor #e6e6e6; */
   cursor: default;
   /*
   background: #fff url(images/bgimg.jpg) no-repeat center center; */
}
 
.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(224, 95, 80, 0.7);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
   text-transform: capitalize;
}
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view-first a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-first:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}