Php 如何在wordpress主题中编写post循环代码

我有一个html主题，想把它转换成wordpress主题， 本主题中的项目部分将在帖子中显示，并具有特殊结构， 我的问题是编写一个php和wordpress函数，它可以以相同的外观显示，也可以从管理面板获取帖子，即使其动态 为了弄清楚问题，请看包含html主题的附件，我认为它可以通过一个while循环来完成。有人能帮我写这篇文章吗

以下是项目部分代码，我们希望将其转换为php代码：

<div id="home-presentation" class="custom-scroll">
        <div class="list">
            <div class="box">               

                <div class="fly first">
                    <h4><a href="portfolio.html">Projects</a></h4>
                </div>

                <div class="el_3 pos_3 fly big color_1">
                    <a href="portfolio_view.html" class="image">
                        <img src="images/temp/presentations/10/presentation.jpg" alt="backgrounds" > 
                        <span>
                        backgrounds
                        </span>
                        <ins></ins>
                    </a>
                </div>

                <div class="el_3 pos_7 fly without-image color_1">
                    <div class="project">
                    <span class="arrow top">&nbsp;</span><h5><a href="javascript:;">backgrounds</a></h5>
                    <p>Project: backgrounds</p>
                    <a href="portfolio_view.html" class="details" title="view details">view details</a>
                    <a href="portfolio_view.html" class="live" title="go live">go live</a>
                    </div>
                </div>

                <div class="el_5 pos_8 fly color_1">
                    <a href="portfolio_view.html" class="image">
                    <img src="images/temp/presentations/60/presentation.jpg" alt="last one" > 
                    <span>
                    and last
                    </span>
                    <ins></ins>
                    </a>
                </div>

            </div>
            <div class="box">

                <div class="el_8 pos_1 fly big color_1">
                    <a href="portfolio_view.html" class="image">
                        <img src="images/temp/presentations/58/presentation.jpg" alt="customer 3" > 
                        <span>
                        customer 3
                        </span>
                        <ins></ins>
                    </a>
                </div>

                <div class="el_6 pos_5 fly color_1">
                    <a href="portfolio_view.html" class="image">
                        <img src="images/temp/presentations/54/presentation.jpg" alt="customer 1" > 
                        <span>
                        customer 1
                        </span>
                        <ins></ins>
                    </a>
                </div>

                <div class="el_6 pos_6 fly without-image color_3">
                    <div class="project">
                        <span class="arrow left">&nbsp;</span><h5><a href="javascript:;">customer 1</a></h5>
                        <p>Project: customer 1</p>
                        <a href="portfolio_view.html" class="details" title="view details">view details</a>
                        <a href="portfolio_view.html" class="live" title="go live">go live</a>
                    </div>
                </div>

                <div class="el_5 pos_7 fly without-image color_3">
                    <div class="project">
                        <span class="arrow left">&nbsp;</span><h5><a href="javascript:;">last one</a></h5>
                        <p>Project: last one</p>
                        <a href="portfolio_view.html" class="details" title="view details">view details</a>
                        <a href="portfolio_view.html" class="live" title="go live">go live</a>
                    </div>
                </div>

                <div class="el_9 pos_8 fly without-image color_1">
                    <div class="project">
                        <span class="arrow right">&nbsp;</span><h5><a href="javascript:;">customer 4</a></h5>
                        <p>Project: customer 4</p>
                        <a href="portfolio_view.html" class="details" title="view details">view details</a>
                        <a href="portfolio_view.html" class="live" title="go live">go live</a>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="el_8 pos_1 fly without-image color_1">
                    <div class="project">
                        <span class="arrow left">&nbsp;</span><h5><a href="javascript:;">customer 3</a></h5>
                        <p>Project: customer 3</p>
                        <a href="portfolio_view.html" class="details" title="view details">view details</a>
                        <a href="portfolio_view.html" class="live" title="go live">go live</a>
                    </div>
                </div>

                <div class="el_7 pos_2 fly without-image color_3">
                    <div class="project">
                        <span class="arrow right">&nbsp;</span><h5><a href="javascript:;">customer 2</a></h5>
                        <p>Project: customer 2</p>
                        <a href="portfolio_view.html" class="details" title="view details">view details</a>
                        <a href="portfolio_view.html" class="live" title="go live">go live</a>
                    </div>
                </div>

                <div class="el_10 pos_3 fly color_1">
                    <a href="portfolio_view.html" class="image">
                        <img src="images/temp/presentations/63/presentation.jpg" alt="customer 5" > 
                        <span>
                        customer 5
                        </span>
                        <ins></ins>
                    </a>
                </div>

                <div class="el_10 pos_4 fly without-image color_1">
                    <div class="project">
                        <span class="arrow left">&nbsp;</span><h5><a href="javascript:;">customer 5</a></h5>
                        <p>Project: customer 5</p>
                        <a href="portfolio_view.html" class="details" title="view details">view details</a>
                        <a href="portfolio_view.html" class="live" title="go live">go live</a>
                    </div>
                </div>

                <div class="el_9 pos_5 fly big color_1">
                    <a href="portfolio_view.html" class="image">
                        <img src="images/temp/presentations/62/presentation.jpg" alt="customer 4" > 
                        <span>
                        customer 4
                        </span>
                        <ins></ins>
                    </a>
                </div>
            </div>
            <div class="box">
                <div class="el_7 pos_1 fly big color_1">
                    <a href="portfolio_view.html" class="image">
                        <img src="images/temp/presentations/65/presentation.jpg" alt="customer 2" > 
                        <span>
                        customer 2
                        </span>
                        <ins></ins>
                    </a>
                </div>

                <div class="el_4 pos_5 fly color_1">
                    <a href="portfolio_view.html" class="image">
                        <img src="images/temp/presentations/48/presentation.jpg" alt="free and safe" > 
                        <span>
                        free and safe
                        </span>
                        <ins></ins>
                    </a>
                </div>

                <div class="el_4 pos_6 fly without-image color_3">
                    <div class="project">
                        <span class="arrow left">&nbsp;</span><h5><a href="javascript:;">free and safe</a></h5>
                        <p>Project: free and safe</p>
                        <a href="portfolio_view.html" class="details" title="view details">view details</a>
                        <a href="portfolio_view.html" class="live" title="go live">go live</a>
                    </div>
                </div>

                <div class="el_5 pos_7 fly without-image color_3">
                    <div class="project">
                        <span class="arrow right">&nbsp;</span><h5><a href="javascript:;">last one</a></h5>
                        <p>Project: last one</p>
                        <a href="portfolio_view.html" class="details" title="view details">view details</a>
                        <a href="portfolio_view.html" class="live" title="go live">go live</a>
                    </div>
                </div>

                <div class="el_5 pos_8 fly color_1">
                    <a href="portfolio_view.html" class="image">
                        <img src="images/temp/presentations/50/presentation.jpg" alt="last one" > 
                        <span>
                        last one
                        </span>
                        <ins></ins>
                    </a>
                </div>

            </div>
            <div class="box">               

                <div class="fly last">
                <p><a href="http://dev.creativex.bg/svn/vladi/CreativeX/bg/portfolio/">Всички</a></p>

                <h6><a href="http://dev.creativex.bg/svn/vladi/CreativeX/bg/portfolio/"><span>453</span>Projectа</a></h6>
                </div>

                <div class="el_3 pos_1 fly color_1">
                    <a href="portfolio_view.html" class="image">
                        <img src="images/temp/presentations/46/presentation.jpg" alt="backgrounds" > 
                        <span>
                        background image
                        </span>
                        <ins></ins>
                    </a>
                </div>

                <div class="el_3 pos_2 fly without-image color_1">
                    <div class="project">
                        <span class="arrow left">&nbsp;</span><h5><a href="javascript:;">backgrounds</a></h5>
                        <p>Project: background image</p>
                        <a href="portfolio_view.html" class="details" title="view details">view details</a>
                        <a href="portfolio_view.html" class="live" title="go live">go live</a>
                    </div>
                </div>

                <div class="el_2 pos_3 fly without-image color_1">
                    <div class="project">
                        <span class="arrow right">&nbsp;</span><h5><a href="javascript:;">test 2</a></h5>
                        <p>Project: test 2</p>
                        <a href="portfolio_view.html" class="details" title="view details">view details</a>
                        <a href="portfolio_view.html" class="live" title="go live">go live</a>
                    </div>
                </div>

                <div class="el_2 pos_4 fly color_1">
                    <a href="portfolio_view.html" class="image">
                        <img src="images/temp/presentations/70/presentation.jpg" alt="test 2" > 
                        <span>
                        test 2
                        </span>
                        <ins></ins>
                    </a>
                </div>

                <div class="el_1 pos_5 fly color_1">
                    <a href="portfolio_view.html" class="image">
                        <img src="images/temp/presentations/71/presentation.jpg" alt="testovi danni" > 
                        <span>
                        testovi danni
                        </span>
                        <ins></ins>
                    </a>
                </div>

                <div class="el_1 pos_6 fly without-image color_3">
                    <div class="project">
                        <span class="arrow left">&nbsp;</span><h5><a href="javascript:;">testovi danni</a></h5>
                        <p>Project: testovi danni</p>
                        <a href="portfolio_view.html" class="details" title="view details">view details</a>
                        <a href="portfolio_view.html" class="live" title="go live">go live</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

---

尝试使用以下或遵循wordpress codex函数规则希望这将帮助您创建动态帖子

thnx，我知道这种结构，但是如果您看到上面，每个帖子都有这样一个自定义类：pos_{a number variable}和el_{a number variable}，如何定义一个变量来使用正确的数字，因为这个数字很重要，javascript使用它来制作一个布局，你可以在附件中看到，怎么做？好的，我检查了你的代码，但是当你通过循环时，你需要在你的类中传递一个变量，这个变量会随着你的类自动递增，比如1，2，3，然后你必须为特定类设置css，比如.class1{color:this}.class2{color this}FollowThis类已经在css中定义，但是你确定变量应该使用自动递增，因为数字似乎不遵循常规方法，你能给我一个合适的测试代码吗？thnx为你提供帮助你的案例在每个帖子上都有不同的颜色，所以你需要为每个帖子传递自定义css变量将自动递增我给出了为每个要格式化的邮箱编写css所需的示例代码是的，我得到了，但还有另一个问题，在这段代码中，每个带有box类的div包含2、3或4个post，每个框中的post数量不同，如何循环，这个div非常重要，因为当这个di包括v，你有什么想法，兄弟？

<?php $vik=1  query_post('showposts');

  while(have_posts()): the_post();
  ?>
   <li class="test<?php echo $vik; ?>">
   <?php the_title();
    the_content()
    the_permalink();
     ?>
    </li>
   <?php 
  $vik++;
endwhile; wp_reset_query(); ?>