[英]How do I style alternating WordPress posts?
我有一些特定類別的帖子顯示,但需要它們在每第二個帖子上有一些不同的樣式。
我使用的這段代碼以相同的樣式顯示列表中的所有帖子。
如何修改這些代碼,制作它,所以我只能編輯每一秒后的造型?
就目前而言,左邊是文本,右邊是圖像-第二個帖子只需要切換側面-這是簡單的樣式,但是我不確定如何拆分這些帖子以編輯#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;
}
}
?>
<?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;
}
}
?>
好的,所以在編輯您的問題時,我看到您想為其設置樣式,以便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();
} ?>
然后使用css中的'.right_image'類以其他方式(或使用絕對定位或任何適合您的方式)浮動圖像。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.