Ikke den mest elegante løsning, for at vise første post med anden formatering med Foundation 5 – men det virker. Desuden kan du let redigere i det, hvis du kender lidt til WordPress Codex.
PHP (i fx. index.php):
<div class="row site-content first-post"> <div class="large-12 columns"> <?php $the_query = new WP_Query( 'showposts=1' ); ?> <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?> <a href="<?php the_permalink() ?>"> <div> <h2><?php the_title(); ?></h2> <p><?php the_post_thumbnail('thumbnail'); ?></p> <p><?php echo substr(get_the_excerpt(), 0,230); ?></p> <!-- <p><?php echo substr(strip_tags($post->post_content), 0, 250);?></p> --> </div> </a> <?php endwhile;?> </div> </div><!-- #row site-content --> <div class="row site-content posts"> <div class="large-4 medium-4 columns"> <?php $the_query = new WP_Query( 'posts_per_page=1&offset=1' ); ?> <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?> <a href="<?php the_permalink() ?>"> <div> <h2><?php the_title(); ?></h2> <p><?php the_post_thumbnail('thumbnail'); ?></p> <p><?php echo substr(get_the_excerpt(), 0,230); ?></p> <!-- <p><?php echo substr(strip_tags($post->post_content), 0, 250);?></p> --> </div> </a> <?php endwhile;?> </div> <div class="large-4 medium-4 columns"> <?php $the_query = new WP_Query( 'posts_per_page=1&offset=2' ); ?> <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?> <a href="<?php the_permalink() ?>"> <div> <h2><?php the_title(); ?></h2> <p><?php the_post_thumbnail('thumbnail'); ?></p> <p><?php echo substr(get_the_excerpt(), 0,230); ?></p> <!-- <p><?php echo substr(strip_tags($post->post_content), 0, 250);?></p> --> </div> </a> <?php endwhile;?> </div> <div class="large-4 medium-4 columns"> <?php $the_query = new WP_Query( 'posts_per_page=1&offset=3' ); ?> <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?> <a href="<?php the_permalink() ?>"> <div> <h2><?php the_title(); ?></h2> <p><?php the_post_thumbnail('thumbnail'); ?></p> <p><?php echo substr(get_the_excerpt(), 0,230); ?></p> <!-- <p><?php echo substr(strip_tags($post->post_content), 0, 250);?></p> --> </div> </a> <?php endwhile;?> </div> </div><!-- #row site-content -->
CSS:
body.home .first-post div a div, body.home .posts div a div { padding: 25px; margin: 15px; background: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-top: 1px solid #ECEDEE; border-right: 1px solid #D6D7D8; border-bottom: 1px solid #C2C3C3; border-left: 1px solid #D6D7D8; background-color: transparent; background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #F6F6F6), color-stop(0.35, #FFFFFF)); background-image: -o-linear-gradient(top , #F6F6F6 0%, #FFFFFF 35%); /* Opera */ background-image: -moz-linear-gradient(top , #F6F6F6 0%, #FFFFFF 35%) ;/* Mozilla Firefox */ background-image: -webkit-linear-gradient(center top , #F6F6F6 0%, #FFFFFF 35%); /* Webkit (Chrome 11+) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F6F6F6), color-stop(0.35, #FFFFFF)); /* Webkit (Safari/Chrome 10) */ background-image: -ms-linear-gradient(top , #F6F6F6 0%, #FFFFFF 35%); /* IE10 */ background-image: linear-gradient(top , #F6F6F6 0%, #FFFFFF 35%); /* Proposed W3C Markup */ background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; background-clip: border-box; background-origin: padding-box; background-size: auto auto; /* inside white border */ box-shadow: 0px 1px 0px 0px #FFF inset, 1px 0px 0px 0px #FFF inset, -1px 0px 0px 0px #FFF inset, 0px -1px 0px 0px #FFF inset, 0px 2px 0px 0px rgba(0, 0, 0, 0.03), 0px 1px 0px 0px rgba(0, 0, 0, 0.05);} body.home .first-post div a div {margin-top: 0;} body.home .first-post div a div h2 {font-size: 2.1em;} body.home .first-post div a div p {font-size: 1.15em;} body.home .first-post div a div, body.home .posts div a:first-child div {margin-left: 0;} body.home .first-post div a div, body.home .posts div a:last-child div {margin-right: 0;} body.home .first-post div a:hover div, body.home .posts div a:hover div { background-color: #F6F6F6; background-image: -moz-linear-gradient(center top , #efefef 0%, #FFF 100%);} body.home .first-post div a:hover div h2, body.home .posts div a:hover div h2 { color: #000;}
Resultatet: