Как использовать записи в качестве вкладок на пользовательской странице?

Всем привет. Я новичок в программировании/WordPress и мне нужна помощь с пользовательской страницей, которую я разрабатываю прямо сейчас. Идея проста:

• Список элементов слева
• Изображение с описанием снизу справа

Каждый элемент в списке, при нажатии, будет изменять изображение и описание, отображаемые справа, примерно как работают вкладки. Должна быть возможность удалять и добавлять элементы из панели управления, поэтому я подумал о создании пользовательского типа записи. Каждая новая запись будет добавляться в список, и ее содержимое будет доступно, когда пользователь нажимает на нее.

Проблема в том, что у меня нет представления о том, как это реализовать с помощью WordPress. Я знаю, как работают вкладки, но испытываю трудности с тем, как получить всю информацию о записях, как отобразить нужную, когда нажата заголовок, как сделать так, чтобы “вкладки” работали при добавлении или удалении новых записей и т.д. Есть ли советы о том, как мне подойти к этому?

Для меня я предлагаю вам решение, состоящее из трех частей:

1 – Создайте пользовательский тип записи (CTP).

2 – Создайте необходимые скрипты JavaScript и CSS.

3 – Создайте специализированный шаблон в корне вашей темы archive-$posttype.php, в нашем примере это будет archive-product.php

Я создал репозиторий на Git, откуда вы можете скачать плагин, вот ссылка: Custom CPT

Исходный код для страницы archive-product.php здесь: archive-product

Так что вы можете скачать их напрямую для тестирования и адаптации под ваши нужды.
Я использовал тему twentynineteen, вам нужно создать физическую страницу с именем: archive-product.php, и ее код указан выше в gist.
Код JS и CSS довольно простой, поэтому улучшите его под свои нужды.

Основной файл:

/**
* Название плагина:     Dro Cpt
* URI плагина:      ЗДЕСЬ УКАЖИТЕ САЙТ ПЛАГИНА
* Описание:     ЗДЕСЬ УКАЖИТЕ ОПИСАНИЕ ПЛАГИНА
* Автор:          ЗДЕСЬ УКАЖИТЕ СВОЁ ИМЯ
* URI автора:      ЗДЕСЬ УКАЖИТЕ СВОЙ САЙТ
* Текстовый домен:     dro-cpt
* Путь к домену:     /languages
* Версия:         0.1.0
*
* @package         Dro_Cpt
*/ 
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
// Подключаем наш плагин 
  add_action( 'plugins_loaded', 'dro_cpt' );

  function dro_cpt() {

/**
 * Создаем наш CTP
*/
   add_action( 'init', function() {
    $labels = array(
        'name' => _x('Продукты', 'общее название типа записи'),
        'singular_name' => _x('Продукт', 'единичное название типа записи'),
        'add_new' => _x('Добавить новый', 'книга'),
        'add_new_item' => __('Добавить новый продукт'),
        'edit_item' => __('Редактировать продукт'),
        'new_item' => __('Новый продукт'),
        'all_items' => __('Все продукты'),
        'view_item' => __('Просмотреть продукт'),
        'search_items' => __('Искать продукты'),
        'not_found' => __('Продукты не найдены'),
        'not_found_in_trash' => __('Продукты не найдены в корзине'),
        'parent_item_colon' => '',
        'menu_name' => 'Продукты'
    );
    $args = array(
        'labels' => $labels,
        'description' => 'Содержит наши продукты и специфические для продукта данные',
        'public' => true,
        'menu_position' => 5,
        'supports' => array('title', 'editor', 'thumbnail', 'excerpt'),
        'has_archive' => true, // Включение архива типа записи по адресу http://yoursite.com/product
    );
    register_post_type( 'product', $args ); // спасибо Даниэлю Патаки
} );
}

/**
* Подключение js и css только для нашего CTP.
*/
add_action( 'template_redirect', function() {
global $wp_query;
// Загружаем активы только для нашей страниц архива CTP.
if ( $wp_query->is_post_type_archive('product') ) {

    add_action( 'wp_enqueue_scripts', 'dro_cpt_scripts' );

    function dro_cpt_scripts() {
        wp_enqueue_script( 'dro-cpt-js', plugin_dir_url(__FILE__) . 'assets/js/dro-cpt.js', array('jquery'), '1.0.0', TRUE );
        wp_enqueue_style( 'dro-cpt-css', plugin_dir_url(__FILE__) . 'assets/css/dro-cpt.css' );
    }

}
});

Шаблон archive-product.php (twentynineteen/archive-product.php) :

<?php
/**
 * Шаблон для отображения архивных страниц
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 */

get_header();
?>

    <section id="primary" class="content-area">
        <main id="main" class="site-main">
                    <div class="dro-cpt">
        <?php if ( have_posts() ) : ?>

            <header class="page-header">
                <?php
                    the_archive_title( '<h1 class="page-title">', '</h1>' );
                ?>
            </header><!-- .page-header -->

            <?php
            // Запускаем цикл.
            while ( have_posts() ) :
                the_post();

                                the_title('<a class="dro-cpt-tab" href="#" data-id="'.get_the_ID().'">','</a>',TRUE);
                                echo '<div class="dro-cpt-description" id= "description-'.get_the_ID().'">';
                                the_post_thumbnail( 'thumbnail' );
                                echo '<div class=" single-description " >'.the_content().'</div>';
                                echo "</div>";
                // Конец цикла.
            endwhile;

            // Навигация по предыдущим/следующим страницам.
            twentynineteen_the_posts_navigation();

            // Если нет контента, подключаем шаблон "Нет записей".
        else :
            get_template_part( 'template-parts/content/content', 'none' );

        endif;
        ?>
                        <div class="dro-cpt-display"></div>
                    </div><!-- .dro-cpt -->
        </main><!-- #main -->
    </section><!-- #primary -->

<?php
get_footer();

JS ( plugins/dro-cpt/assets/dro-cpt.js) :

(function($){

    // отображаем первый элемент
    var firstDescr =  $('div.dro-cpt-description').first().html();
    $('div.dro-cpt-display').html(firstDescr);

    $('a.dro-cpt-tab').on('click',function(e){
        e.preventDefault();
        var id = $(this).data('id');
        var desc = $('#description-'+id).html();
        console.log(desc);
        $('div.dro-cpt-display').html(desc);
    });
})(jQuery);

CSS (plugins/dro-cpt/assets/dro-cpt.css):

div.dro-cpt{

    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #ccc;
}
div.dro-cpt a{
    text-decoration: none;
    color: #000;
    font-size: 1rem;
    border: 1px solid #ccc;
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 5px;
}
div.dro-cpt a:hover{
    background-color: #f5f5f5;
}
.dro-cpt-description{
    display: none;
}
div.dro-cpt-display{
    margin-top: 10px;
}