Wordpress 循环 - 自定义主题 - HTML 集成

Question

我制作了一个 HTML 页面，我想将其集成到 Wordpress 中。

在我到达帖子部分之前，主题的集成已经正确完成

我的帖子显示算法有问题，所以我知道它来自 Wordpress 循环。

我在 Wordpress 循环上做了几次搜索，但我不明白不同的用途。

这是我想要自动化的 HTML 代码库：

<div class="oeuvres">
    <div class="line0">
        <div class="oeuvre">
            <img class="img-oeuvre" src="ressources/creations/lisemassages.png" alt="">
            <div class="infos-oeuvre">
               <p>Title</p>
               <p>Content</p>
               <a class="btn-oeuvre" href="" target="_blank">Voir le site</a>
            </div>
        </div>
        <div class="oeuvre">
            <img class="img-oeuvre" src="ressources/creations/centredesoi.png" alt="">
            <div class="infos-oeuvre">
                <p>Title</p>
                <p>Content</p>
                <a class="btn-oeuvre" href="" target="_blank">voir le site</a>
            </div>
        </div>
    </div><!--class line0 -->
</div>

<div class="oeuvres">
    <div class="line1">
        <div class="oeuvre">
            <div class="infos-oeuvre">
                    <p>title</p>
                    <p>Content</p>
                    <a class="btn-oeuvre" href="" target="_blank">Voir le site</a>
            </div>
            <img class="img-oeuvre" src="ressources/creations/comparepc.png" alt="">
        </div>

        <div class="oeuvre">
            <div class="infos-oeuvre">
                <p>Title</p>
                <p>Content</p>
                <a class="btn-oeuvre" href="" target="_blank">voir nos créations</a>
            </div>
            <img class="img-oeuvre" src="ressources/creations/wine&amp;sound.jpg" alt="">
        </div>
    </div><!--class line1 -->
</div>

我的循环在 class "line1" 之后，但是，我需要这个 class 是动态的：它必须每 2 个帖子通过 "line0"。

当这个值在循环外时如何更改它

这是我已经完成的代码，它可以工作但并不完美。

 <div class="oeuvres"> 

    <?php $i = 0 ; $line = ""  ; ?>
     //what i've try to do with those variables is to check if $i is pair or impair to change $line value but like i said its outside the loop so it doesnt change anything...... 

    <div class="<?php echo $line ; ?>">
        <?php while(have_posts()) : the_post(); ?>
        <?php // $i++;
        <?php //$line = ($i%0 == 0) ?"line0" : "line1" ;  ?>                                                                           
              <div class="oeuvre">                                                
                 <div class="infos-oeuvre">
                      <?php the_title(); ?>
                      <?php the_content()?>
                      <a class="btn-oeuvre" href="" target="_blank">Voir le site</a>
                   </div>
               </div>
         <?php endwhile; ?>
      </div>                                               
   </div>                                                     
   <?php endif; ?>

任何帮助或建议都会很棒！

谢谢

Answer 1

您可以手动传递 class 并在每一行内执行不同的循环。每 2 post，您将标记添加到 post 作为 line0、line1、line2 并使用它进行查询。

<div class="oeuvres">
<div class="line0">
<?php
// WP_Query arguments
$args = array (
    'post_type'              => 'post',
    // choose other differentiating parameter, for example tag 
    'tag'                     => 'line0'
);

// The Query
$query = new WP_Query( $args );

// The loop
if( $query->have_posts() ): while( $query->have_posts()): $query->the_post(); 
?>
    <div class="oeuvre">
        <img class="img-oeuvre" src="ressources/creations/centredesoi.png" alt="">
        <div class="infos-oeuvre">
            <p>Title</p>
            <p>Content</p>
            <a class="btn-oeuvre" href="" target="_blank">voir le site</a>
        </div>
    </div>
<?php

endwhile; endif;

// Restore original Post Data
wp_reset_postdata();

?>
</div><!--class line0 -->
</div>

<div class="oeuvres">
<div class="line1">
<?php
// WP_Query arguments
$args = array (
    'post_type'              => 'post',
    // choose other differentiating parameter, for example tag 
    'tag'                     => 'line1'
);

// The Query
$query = new WP_Query( $args );

// The loop
if( $query->have_posts() ): while( $query->have_posts()): $query->the_post(); 
?>

    <div class="oeuvre">
        <div class="infos-oeuvre">
            <p>Title</p>
            <p>Content</p>
            <a class="btn-oeuvre" href="" target="_blank">voir nos créations</a>
        </div>
        <img class="img-oeuvre" src="ressources/creations/wine&amp;sound.jpg" alt="">
    </div>
<?php

endwhile; endif;

// Restore original Post Data
wp_reset_postdata();

?>
</div><!--class line1 -->
</div>

Wordpress 循环 - 自定义主题 - HTML 集成

Wordpress loop - Custom theme - HTML integration

html

php

wordpress

wordpress-theming