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

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>

空位包含中的所有内容都隐藏了。在读取更多单击中隐藏所有内容，然后根据LI的数据属性显示内容。

此方法将导致稍高的Intial负载时间，但会立即显示新内容