Содержание
Вопрос или проблема
Я создаю тему для WordPress с помощью HTML и jQuery. Я хочу добавить атрибут данных к своему шаблону, чтобы иметь возможность контролировать поведение с помощью jQuery. Когда я добавляю атрибут данных в свой код, я получаю ошибку о том, что был добавлен недопустимый атрибут. Как это исправить без использования плагина?
Мой шаблон:
<?php
/**
* Заголовок: Макет резюме
* Слаг: portfolia/resume-default
* Категории: рекомендованные
*/
?>
<!-- wp:group {"metadata":{"categories":["featured"],"patternName":"portfolia/resume-default","name":"Макет резюме"},"className":"portfolia-resume-layout","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center","verticalAlignment":"top"}} -->
<div class="wp-block-group portfolia-resume-layout">
<!-- wp:group {"className":"portfolia-sidebar"} -->
<div class="wp-block-group portfolia-sidebar">
<!-- wp:buttons {"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-buttons">
<!-- wp:button {"backgroundColor":"black","textColor":"white","className":"portfolia-sidebar-item active","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}}} -->
<div class="wp-block-button portfolia-sidebar-item active"><a
class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background has-link-color wp-element-button">💼
Опыт</a></div>
<!-- /wp:button -->
<!-- wp:button {"backgroundColor":"black","textColor":"white","className":"portfolia-sidebar-item","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}}} -->
<div class="wp-block-button portfolia-sidebar-item"><a
class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background has-link-color wp-element-button">🔧
Навыки</a></div>
<!-- /wp:button -->
<!-- wp:button {"backgroundColor":"black","textColor":"white","className":"portfolia-sidebar-item is-style-fill","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}}} -->
<div class="wp-block-button portfolia-sidebar-item is-style-fill"><a
class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background has-link-color wp-element-button">🎓
Образование</a></div>
<!-- /wp:button -->
<!-- wp:button {"backgroundColor":"black","textColor":"white","className":"portfolia-sidebar-item","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}}} -->
<div class="wp-block-button portfolia-sidebar-item"><a
class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background has-link-color wp-element-button">📜
Сертификаты</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"portfolia-main-content"} -->
<div class="wp-block-group portfolia-main-content">
<!-- wp:group {"className":"portfolia-content-section active"} -->
<div id="experience" class="wp-block-group portfolia-content-section active">
<!-- wp:heading -->
<h2 class="wp-block-heading">Опыт</h2>
<!-- /wp:heading -->
<!-- wp:table {"hasFixedLayout":false,"className":"is-style-regular"} -->
<figure class="wp-block-table is-style-regular">
<table>
<thead>
<tr>
<th>Должность</th>
<th>Компания</th>
<th>Описание</th>
<th>Дата</th>
<th>Местоположение</th>
</tr>
</thead>
<tbody>
<tr>
<td>Инженер DevOps</td>
<td>Bitmama</td>
<td>Мы проводим тщательную оценку ваших конкурентов и</td>
<td>Янв 2021 - Настоящее время</td>
<td>Удаленно</td>
</tr>
<tr>
<td>Инженер по надежности клиентов (DevOps)</td>
<td>Cloudkite.io</td>
<td>Мы проводим тщательную оценку ваших конкурентов и</td>
<td>Июль 2020 – Июль 2022, Янв 2023 – Ноябрь 2023</td>
<td>Удаленно</td>
</tr>
<tr>
<td>Инженер DevOps</td>
<td>Goodlight (Andela)</td>
<td>Мы проводим тщательную оценку ваших конкурентов и</td>
<td>Авг 2019 - Мар 2020</td>
<td>Удаленно</td>
</tr>
<tr>
<td>Разработчик программного обеспечения</td>
<td>Andela Talent Accelerator</td>
<td>Мы проводим тщательную оценку ваших конкурентов и</td>
<td>Дек 2018 - Мар 2020</td>
<td>Лагос, Нигерия</td>
</tr>
</tbody>
</table>
</figure>
<!-- /wp:table -->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"portfolia-content-section"} -->
<div id="skills" class="wp-block-group portfolia-content-section">
<!-- wp:heading -->
<h2 class="wp-block-heading">Навыки</h2>
<!-- /wp:heading -->
<!-- wp:table {"hasFixedLayout":false,"className":"is-style-regular"} -->
<figure class="wp-block-table is-style-regular">
<table>
<thead>
<tr>
<th>Навык</th>
<th>Уровень</th>
<th>Опыт работы</th>
</tr>
</thead>
<tbody>
<tr>
<td>DevOps</td>
<td>Эксперт</td>
<td>5+</td>
</tr>
<tr>
<td>Облачные вычисления</td>
<td>Продвинутый</td>
<td>4</td>
</tr>
<tr>
<td>Контейнеризация</td>
<td>Продвинутый</td>
<td>3</td>
</tr>
<tr>
<td>CI/CD</td>
<td>Эксперт</td>
<td>5</td>
<tr>
<td>Инфраструктура как код</td>
<td>Продвинутый</td>
<td>4</td>
</tr>
</tbody>
</table>
</figure>
<!-- /wp:table -->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"portfolia-content-section"} -->
<div id="education" class="wp-block-group portfolia-content-section">
<!-- wp:heading -->
<h2 class="wp-block-heading">Образование</h2>
<!-- /wp:heading -->
<!-- wp:table {"hasFixedLayout":false,"className":"is-style-regular"} -->
<figure class="wp-block-table is-style-regular">
<table>
<thead>
<tr>
<th>Степень</th>
<th>Учебное заведение</th>
<th>Дата</th>
<th>GPA</th>
</tr>
</thead>
<tbody>
<tr>
<td>Магистр наук в области облачных вычислений</td>
<td>Технический институт</td>
<td>2019 - 2021</td>
<td>3.8</td>
</tr>
<tr>
<td>Бакалавр наук в области компьютерных наук</td>
<td>Университет технологии</td>
<td>2014 - 2018</td>
<td>3.7</td>
</tr>
</tbody>
</table>
</figure>
<!-- /wp:table -->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"portfolia-content-section"} -->
<div id="certifications" class="wp-block-group portfolia-content-section">
<!-- wp:heading -->
<h2 class="wp-block-heading">Сертификаты</h2>
<!-- /wp:heading -->
<!-- wp:table {"hasFixedLayout":false,"className":"is-style-regular"} -->
<figure class="wp-block-table is-style-regular">
<table>
<thead>
<tr>
<th>Сертификация</th>
<th>Дата</th>
<th>Срок действия</th>
<th>ID удостоверения</th>
</tr>
</thead>
<tbody>
<tr>
<td>AWS Certified DevOps Engineer - Professional</td>
<td>2022</td>
<td>2025</td>
<td>AWS-DEP-123456</td>
</tr>
<tr>
<td>Google Cloud Professional DevOps Engineer</td>
<td>2021</td>
<td>2024</td>
<td>GCP-DEP-789012</td>
</tr>
<tr>
<td>Certified Kubernetes Administrator (CKA)</td>
<td>2020</td>
<td>2023</td>
<td>CKA-345678</td>
</tr>
</tbody>
</table>
</figure>
<!-- /wp:table -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
Мой код jQuery:
jQuery(document).ready(function ($) {
$(".portfolia-content-section").hide();
$(".portfolia-content-section.active").show();
$(".portfolia-sidebar-item").click(function () {
$(".portfolia-sidebar-item").removeClass("active");
$(this).addClass("active");
const tabId = $(this).text().trim().toLowerCase().replace(/ /g, "_");
// Используйте console.log, чтобы проверить, какой tabId был создан
console.log("ID вкладки:", tabId);
$(".portfolia-content-section").hide();
$("#" + tabId).show();
});
});
Ответ или решение
Для того чтобы добавить пользовательские атрибуты к блочному шаблону в WordPress, не используя плагины, вы можете воспользоваться использованием встроенных свойств блока через attributes. Ваша проблема с ошибкой "недопустимое свойство" возникает из-за того, что вы пытаетесь добавить пользовательский атрибут, не следуя установленной практике.
Следуйте следующему примеру, чтобы корректно добавить пользовательский атрибут и передать его в ваш шаблон.
Шаг 1: Определение пользовательских атрибутов
Вам нужно добавить пользовательские атрибуты в ваш шаблон. Вот пример кода, который вы можете использовать для этого:
/**
* Title: Resume Layout
* Slug: portfolia/resume-default
* Categories: featured
*/
function portfolia_register_block_pattern() {
register_block_pattern(
'portfolia/resume-default',
array(
'title' => __( 'Resume Layout', 'text-domain' ),
'description' => _x( 'A simple resume layout', 'Block pattern description', 'text-domain' ),
'content' => '<!-- wp:group {"className":"portfolia-resume-layout"} -->
<div class="wp-block-group portfolia-resume-layout" data-custom-attribute="your-value">
<!-- wp:group {"className":"portfolia-sidebar"} -->
<div class="wp-block-group portfolia-sidebar">
<!-- wp:buttons {"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-buttons">
<!-- wp:button {"className":"portfolia-sidebar-item active"} -->
<div class="wp-block-button portfolia-sidebar-item active"><a class="wp-block-button__link">💼 Experience</a></div>
<!-- /wp:button -->
<!-- другие кнопки -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->
<!-- основной контент -->
</div>
<!-- /wp:group -->',
)
);
}
add_action( 'init', 'portfolia_register_block_pattern' );Шаг 2: Использование пользовательского атрибута в jQuery
Теперь, когда вы добавили пользовательский атрибут data-custom-attribute, вы можете использовать его в вашем jQuery коде. Убедитесь, что ваш jQuery код обращается к правильному атрибуту:
jQuery(document).ready(function ($) {
$(".portfolia-content-section").hide();
$(".portfolia-content-section.active").show();
$(".portfolia-sidebar-item").click(function () {
$(".portfolia-sidebar-item").removeClass("active");
$(this).addClass("active");
const tabId = $(this).text().trim().toLowerCase().replace(/ /g, "_");
// Используйте console.log для проверки, что генерируется tabId
console.log("Tab ID:", tabId);
$(".portfolia-content-section").hide();
$("#" + tabId).show();
});
});Перевод пользовательских атрибутов
Убедитесь, что вы изменили data-custom-attribute="your-value" на то, что вам нужно для вашей реализации. Вы также можете добавить дополнительные атрибуты, если это необходимо.
Теперь, когда ваши пользовательские атрибуты правильно добавлены в блок и доступны для вашего кода jQuery, вы должны избежать проблем с ошибками, и ваш функционал будет работать как задумано.
Если у вас есть дополнительные вопросы или проблемы, не стесняйтесь обращаться за помощью!