如何设置WordPress的交替帖子?

时间:2015-11-06 12:12:56

标签: php css wordpress

我有一些帖子显示来自特定类别,但需要他们在每一个帖子上都有一些不同的样式。

此代码我显示了具有相同样式的列表中的所有帖子。

如何编辑此代码并使其成为可以每隔一篇文章编辑 ONLY 的样式?

左边的文字和右边的图片 - 第二个帖子只需要换边 - 它的造型很简单,但我不确定如何打破帖子最多编辑#case-left& #case-right是需要切换的两个div。

提前致谢。

<?php // PAGE LINK/TITLE          
if (is_page()) {
    $cat=get_cat_ID($post->post_title); //use page title to get a category ID
    $posts = get_posts ("category_name=case-study&posts_per_page=10");

    if ($posts) {
        foreach ($posts as $post):
        setup_postdata($post); 

?>

    <div class="serve-inner-split"> 
        <div id="case-split">
            <div id="case-left" class=" serve-left">
                <div id="case-study-content">
                    <h1 class="case-study-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
                    <p><?php //PULLS IN EXCERPT
                        $my_excerpt = get_the_excerpt();
                        if ( '' != $my_excerpt ) {
                        // Some string manipulation performed
                        }
                        echo $my_excerpt; // Outputs the processed value to the page
                    ?>
                    </p>
                    <a href="<?php the_permalink() ?>" class="header-quote">READ CASE STUDY</a>
                </div>
            </div>
            <div id="case-right" class="serve-grey">
                <?php
                if ( has_post_thumbnail() ) { // PULLS IN IMAGE check if the post has a Post Thumbnail assigned to it.
                    the_post_thumbnail();
                } 
                ?>
            </div>
        </div>
    </div>

    <?php endforeach;
    }
}

?> 

2 个答案:

答案 0 :(得分:1)

<?php // PAGE LINK/TITLE          
if (is_page()) {
  $cat=get_cat_ID($post->post_title); //use page title to get a category ID
  $posts = get_posts ("category_name=case-study&posts_per_page=10");
  if ($posts) {
    $counter = 1;
    $class = '';
    foreach ($posts as $post):
      setup_postdata($post); 
       if($counter%2 == 0) {
          $class = "even-no";
       } else {
        $class = '';
       }

?>
<div class="serve-inner-split <?php echo $class; ?>"> 
                <div id="case-split">
                        <div id="case-left" class=" serve-left">
                            <div id="case-study-content">
                                <h1 class="case-study-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
                                <p><?php //PULLS IN EXCERPT
                                    $my_excerpt = get_the_excerpt();
                                    if ( '' != $my_excerpt ) {
                                        // Some string manipulation performed
                                    }
                                    echo $my_excerpt; // Outputs the processed value to the page

                                    ?>
                                </p>
                                <a href="<?php the_permalink() ?>" class="header-quote">READ CASE STUDY</a>
                            </div>
                        </div>
                        <div id="case-right" class="serve-grey">
   <?php
if ( has_post_thumbnail() ) { // PULLS IN IMAGE check if the post has a Post Thumbnail assigned to it.
    the_post_thumbnail();
} 
?>
                        </div>
                    </div>
</div>


<?php $counter++; ?>
<?php endforeach;
  }
}
?>

答案 1 :(得分:0)

好的,所以在编辑你的问题时,我看到你想要设置它的样式,以便div切换位置。你可以在php

中这样做
<?php // PAGE LINK/TITLE
if (is_page()){}
    $i = 0;
    $cat=get_cat_ID($post->post_title); //use page title to get a category ID
    $posts = get_posts ("category_name=case-study&posts_per_page=10");
    if ($posts) {
        foreach ($posts as $post):
        setup_postdata($post);
    $i++;
    if ($i % 2 == 0):?>
        <div class="serve-inner-split">
            <div id="case-split">
                <?php if ( has_post_thumbnail() ):?>
                <div id="case-right" class="serve-grey">
                    <?php the_post_thumbnail(); ?>
                </div>
                <?php endif; ?>
                <div id="case-left" class=" serve-left">
                    <div id="case-study-content">
                        <h1 class="case-study-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
                        <p><?php //PULLS IN EXCERPT
                            $my_excerpt = get_the_excerpt();
                            if ( '' != $my_excerpt ) {
                                // Some string manipulation performed
                            }
                            echo $my_excerpt; // Outputs the processed value to the page

                            ?>
                        </p>
                        <a href="<?php the_permalink() ?>" class="header-quote">READ CASE STUDY</a>
                    </div>
                </div>
            </div>
        </div>
    <?php else: ?>
        <div class="serve-inner-split">
            <div id="case-split">
                <div id="case-left" class=" serve-left">
                    <div id="case-study-content">
                        <h1 class="case-study-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
                        <p><?php //PULLS IN EXCERPT
                            $my_excerpt = get_the_excerpt();
                            if ( '' != $my_excerpt ) {
                                // Some string manipulation performed
                            }
                            echo $my_excerpt; // Outputs the processed value to the page

                            ?>
                        </p>
                        <a href="<?php the_permalink() ?>" class="header-quote">READ CASE STUDY</a>
                    </div>
                </div>
                <?php if ( has_post_thumbnail() ):?>
                <div id="case-right" class="serve-grey">
                    <?php the_post_thumbnail(); ?>
                </div>
                <?php endif; ?>
            </div>
        </div>
    <?php endif;
?>
<?php endforeach;
wp_reset_postdata();
} ?>

但在我看来,那是不必要的。你也可以这样做:

<?php // PAGE LINK/TITLE
if (is_page()){}
    $i = 0;
    $cat=get_cat_ID($post->post_title); //use page title to get a category ID
    $posts = get_posts ("category_name=case-study&posts_per_page=10");
    if ($posts) {
        foreach ($posts as $post):
        setup_postdata($post);
    $class = '';
    $i++;
    if ($i % 2 == 0){
        $class = 'right_image'
    }
?>
        <div class="serve-inner-split <?php echo $class; ?>">
            <div id="case-split">
                <div id="case-left" class=" serve-left">
                    <div id="case-study-content">
                        <h1 class="case-study-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
                        <p><?php //PULLS IN EXCERPT
                            $my_excerpt = get_the_excerpt();
                            if ( '' != $my_excerpt ) {
                                // Some string manipulation performed
                            }
                            echo $my_excerpt; // Outputs the processed value to the page

                            ?>
                        </p>
                        <a href="<?php the_permalink() ?>" class="header-quote">READ CASE STUDY</a>
                    </div>
                </div>
                <?php if ( has_post_thumbnail() ):?>
                <div id="case-right" class="serve-grey">
                    <?php the_post_thumbnail(); ?>
                </div>
                <?php endif; ?>
            </div>
        </div>
<?php endforeach;
wp_reset_postdata();
} ?>

然后以另一种方式浮动图像(或使用绝对定位或任何适合你的方式),使用&#39; .right_image&#39;在CSS中的课程。