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:
