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, когда пользователи нажимают «Подробнее». По сути, это способ выполнения регулярного оператора WP_Query с использованием JavaScript. В Интернете вы можете найти множество руководств по goog о том, как реализовать такую ​​вещь на основе ваших включенных библиотек. Лично я склонен использовать jQuery и его функцию .ajax (). - Этот метод обеспечит быстрое начальное время загрузки страницы, но между нажатием «Подробнее» и отображаемым содержимым будет небольшая задержка.

Или загрузите содержимое в скрытый div, а затем просто переключите видимость указанного div с помощью JS. Добавьте уникальный идентификатор в ваши элементы списка. Это должно помочь вам идентифицировать пост, а затем отобразить соответствующий контент в Vacancy-content. Как то так уточнить:

<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-Click скрыть все содержимое, а затем отобразить содержимое на основе атрибута данных li.

Этот метод вызовет немного большее начальное время загрузки, но сразу отобразит новое содержимое