Foundation5: Første post i WP med anden CSS formatering

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:

Foundation 5

Leave a Reply

Your email address will not be published. Required fields are marked *