Question

我有一个称为空缺的WordPress自定义帖子类型。在我的空缺档案页面上，我希望有一份清单（包括我的摘录）的最新空缺。

当我单击每个空缺下的“阅读更多”链接时，我希望CPT的内容显示在另一个div的同一页上。当我单击另一个链接时，我希望它将div内容更改为新的CPT内容，而无需重新加载存档页面。

我希望这有意义吗？

<ul class="vacancies-list">
    <li>
        <h2>Vacancy title</h2>
        <p>Vacancy CPT Excerpt</p>
        <a href="">Read more</a>
    </li>
    <li>
        <h2>Vacancy title</h2>
        <p>Vacancy CPT Excerpt</p>
        <a href="">Read more</a>
    </li>
    <li>
        <h2>Vacancy title</h2>
        <p>Vacancy CPT Excerpt</p>
        <a href="">Read more</a>
    </li>
</ul>

<div class="vacancy-content">
    <p>When "read more clicked, I want content of CPT pulled here</p>
</div>

Answer 1

有两种方法：

添加一个AJAX函数，当用户单击“更多”时，该函数将动态加载cpt的内容。基本上，这是一种使用JavaScript执行常规WP_Query语句的方法。您可以在网上找到大量的goog教程，以了解如何基于所包含的库来实现这种事情。我个人倾向于使用jQuery及其.ajax（）函数。 -此方法将确保您的页面具有快速的初始加载时间，但是在单击“阅读更多”与显示内容之间会稍有延迟。

或将内容加载到隐藏的div中，然后使用JS切换该div的可见性。在列表项中添加唯一标识符。这样可以帮助您识别帖子，然后在空缺内容中显示相应的内容。这样的事情可以澄清：

<ul class="vacancies-list">
    <li data-post="1">
        <h2>Vacancy title</h2>
        <p>Vacancy CPT Excerpt</p>
        <a href="">Read more</a>
    </li>
    <li data-post="2">
        <h2>Vacancy title</h2>
        <p>Vacancy CPT Excerpt</p>
        <a href="">Read more</a>
    </li>
    <li data-post="3">
        <h2>Vacancy title</h2>
        <p>Vacancy CPT Excerpt</p>
        <a href="">Read more</a>
    </li>
</ul>

<div class="vacancy-content">
   <div class="content post-1">Lorem Ipsum</div>
   <div class="content post-2">Lorem Ipsum</div>
   <div class="content post-3">Lorem Ipsum</div>
</div>

空缺内容中的所有内容均被隐藏。在ReadMore上单击隐藏所有内容，然后根据li的数据属性显示内容。

此方法会导致初始加载时间稍长，但会立即显示新内容

单击链接时，WordPress CPT在同一页面上的div中显示内容

1 个答案: