Блог

Ответил сам: используйте короткие коды. Они работают на странице продукта, но не могут иметь объекты, использующие короткие коды, созданные на странице через серверную часть.

Я вставил объект tab в длинное описание продукта.

Она находится внутри вкладки «Описание», которая работает по умолчанию на странице с одним продуктом.

Рассматриваемый элемент имеет 4 разных варианта размера продукта, и я включаю вкладку со спецификацией для каждого размера.

До сих пор мне удавалось добавлять панель вкладок без каких-либо реальных проблем. Единственные проблемы, которые у меня есть:

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

Я больше знаком с HTML и CSS, но я не так хорош с PHP и JS. Я умею писать на C, поэтому я не боюсь кода и достаточно хорошо понимаю PHP. Я просто не очень хорошо знаю PHP-код для WordPress / WooCommerce, потому что я не прочитал все это.

Мне потребовалось всего около 15 минут, чтобы заставить объект tab работать, но я совершенно озадачен открытием начальной панели.

Код, который я использую в long_desc, основан на сочетании объекта Tabs из стандартного объекта tabs WP Bakery и классов WooCommerce из «вкладок описания».

Я не могу поместить эту информацию в пользовательские вкладки через functions.php (хотя я добавил отдельные вкладки «Доставка» и «Возврат», используя этот метод), потому что он должен быть встроен в содержимое и потому, что каждый набор вкладок уникален для каждого элемента.

Я понимаю, что это «быстрый и грязный» способ выполнения задач, и так и должно быть. Мне нужно запустить этот сайт.

Для краткости я удалил таблицы с фактической спецификацией и просто оставил простую <p> сноску.

Обратите внимание, что код должен выглядеть корректно только при размещении на странице с одним продуктом в WP. Он заимствует из библиотек, используемых в tab-description.

Мне просто нужно выяснить, как заставить его загружаться с активной первой вкладкой. На моем сайте он загружается каждый раз без активных вкладок, и фактическая важная информация не отображается.

Я считаю, что ответ заключается в создании части, которая вызывает JS для активации первой вкладки, но трудно следовать коду.

 <div class="woocommerce-tabs wc-tabs-wrapper " >
    <ul class="tabs wc-tabs" role="tablist">
            <li class=" tab-title-description active"  id="tab-title-drrr" role="tab" aria-controls="tab-drrr">
                <a href="#tab-drrr" ><span >27.5 - Standard</span></a>
            </li>
            <li class="tab-title-description" id="tab-title-shhh" role="tab" aria-controls="tab-shhh">
                <a href="#tab-shhh"><span >27.5 - Boost</span></a>
            </li>
            <li class="tab-title-description" id="tab-title-rrrr" role="tab" aria-controls="tab-rrrr">
                <a href="#tab-rrrr"><span >29 - Standard</span></a>
            </li>
            <li class="tab-title-description" id="tab-title-zzz" role="tab" aria-controls="tab-zzz">
                <a href="#tab-zzz"><span >29 - Boost</span></a>
            </li>
    </ul>
         <div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--drrr panel entry-content wc-tab active" id="tab-drrr" role="tabpanel" aria-labelledby="tab-title-drrr" style="display:block;">
         <p style="background-color: black; color: white; text-align: center; padding-bottom:8px; margin-top: 0px; margin-bottom: 4px;">* XX1 freebody sold separately</p>
         </div>
         <div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--shhh panel entry-content wc-tab" id="tab-shhh" role="tabpanel" aria-labelledby="tab-title-shhh" style="">
        <p style="background-color: black; color: white; text-align: center; padding-bottom:8px; margin-top: 0px; margin-bottom: 4px;">* XX1 freebody sold separately</p>
         </div>
         <div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--rrrr panel entry-content wc-tab" id="tab-rrrr" role="tabpanel" aria-labelledby="tab-title-rrrr" style="">
        <p style="background-color: black; color: white; text-align: center; padding-bottom:8px; margin-top: 0px; margin-bottom: 4px;">* XX1 freebody sold separately</p>           
         </div>
         <div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--zzz panel entry-content wc-tab" id="tab-zzz" role="tabpanel" aria-labelledby="tab-title-zzz" style="">
        <p style="background-color: black; color: white; text-align: center; padding-bottom:8px; margin-top: 0px; margin-bottom: 4px;">* XX1 freebody sold separately</p>       
         </div>
</div> 

Как указано выше,

Ответил сам: используйте короткие коды. Они работают на странице продукта, но не могут иметь объекты, использующие короткие коды, созданные на странице через серверную часть.

Я создал вкладки на обычной странице (где все виджеты работают нормально), затем переключил страницу в режим просмотра HTML. Все короткие коды находятся там и могут быть захвачены. Синтаксис для стилизации объекта tabs также присутствует и может быть изменен по желанию в окончательном коде.

Обратите внимание, что идентификаторы обычно представляют собой числовые строки, и их можно (осторожно) изменить для более разумного и разумного именования, чтобы помочь вам сохранить ваш код в чистоте.

Вы также можете повторно использовать этот код на нескольких страницах продукта без проблем. Идентификаторы не будут конфликтовать.