Используйте Chart.js в пользовательской теме WordPress

На чтение 4 мин Опубликовано 05.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Шаги для интеграции Chart.js в кастомную тему WordPress
Избежание ошибки «Смешанный контент»
Заключение

Вопрос или проблема

Я пытаюсь использовать Chart.js в кастомной теме WordPress. Я установил пакет согласно пошаговому руководству на сайте Chart.js. В моей основной папке темы теперь есть папка node_modules.

В моем файле main.js я хочу добавить JavaScript для настройки графика, но у меня возникает ошибка на первой строке моего js файла: import Chart from ‘chart.js/auto’;

Ошибка, которую я получаю, гласит: Смешанный контент: Страница ‘https://www.xxxxxxxxxxxxxxxxx.io/’ загружена по HTTPS, но запрашивает небезопасный скрипт ‘http://www.xxxxxxxxxxxxxxx.io/wp-content/themes/xxxxxxxxxxxxxxxxtheme/js/node_modules/chart.js/auto/’. Этот запрос был заблокирован; содержимое должно доставляться по HTTPS.

Как я могу это исправить?

С уважением,
Себастьяan

Я ввел код точно так, как указано в инструкциях пошагового руководства.

Ответ или решение

Привет, Себастьян!

Проблема, с которой вы столкнулись, связана с тем, что вы пытаетесь импортировать Chart.js из директории node_modules, что не является правильным способом использования библиотеки в вашей кастомной теме WordPress. Давайте разберемся, как правильно интегрировать Chart.js в вашу тему и устранить ошибку «Смешанный контент».

Шаги для интеграции Chart.js в кастомную тему WordPress

Установка Chart.js:
Убедитесь, что вы установили Chart.js с использованием npm или добавили его напрямую через CDN. Так как вы уже создали директорию node_modules, разместите файлы Chart.js либо в директории вашего проекта, либо используйте CDN.

Если вы хотите использовать CDN:
```
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
```
Если вы хотите использовать локально, скопируйте файл chart.min.js из node_modules/chart.js/dist в директорию вашей темы (например, wp-content/themes/ваша-тема/js).
Импорт Chart.js:
В вашем main.js файл, не используйте import для подключения Chart.js, так как браузер не сможет обработать ES6 импорты без дополнительного процесса сборки (например, Webpack). Вместо этого вы можете просто подключить файл через стандартный <script> в вашем header.php или в functions.php.

Подключение Chart.js через functions.php:
Чтобы правильно подключить Chart.js, можете добавить следующий код в файл functions.php вашей темы:

function my_theme_scripts() {
   // Подключаем Chart.js
   wp_enqueue_script('chart-js', get_template_directory_uri() . '/js/chart.min.js', array(), null, true);
   // Подключаем ваш основной скрипт
   wp_enqueue_script('main-js', get_template_directory_uri() . '/js/main.js', array('chart-js'), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

Настройка графиков в main.js:
В вашем main.js, просто обращайтесь к объекту Chart, который станет доступен после загрузки скрипта. Пример кода для построения графика:

document.addEventListener('DOMContentLoaded', function() {
   var ctx = document.getElementById('myChart').getContext('2d');
   var myChart = new Chart(ctx, {
       type: 'bar', // тип графика
       data: {
           labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
           datasets: [{
               label: '# of Votes',
               data: [12, 19, 3, 5, 2, 3],
               backgroundColor: [
                   'rgba(255, 99, 132, 0.2)',
                   'rgba(54, 162, 235, 0.2)',
                   'rgba(255, 206, 86, 0.2)',
                   'rgba(75, 192, 192, 0.2)',
                   'rgba(153, 102, 255, 0.2)',
                   'rgba(255, 159, 64, 0.2)'
               ],
               borderColor: [
                   'rgba(255, 99, 132, 1)',
                   'rgba(54, 162, 235, 1)',
                   'rgba(255, 206, 86, 1)',
                   'rgba(75, 192, 192, 1)',
                   'rgba(153, 102, 255, 1)',
                   'rgba(255, 159, 64, 1)'
               ],
               borderWidth: 1
           }]
       },
       options: {
           scales: {
               y: {
                   beginAtZero: true
               }
           }
       }
   });
});

Создание элемента canvas в шаблоне:
Не забудьте добавить элемент <canvas> в ваш HTML-код (например, в header.php или footer.php):
```
<canvas id="myChart" width="400" height="400"></canvas>
```

Избежание ошибки «Смешанный контент»

Ошибка «Смешанный контент» возникает, когда страница загружается по HTTPS, а скрипты по HTTP. Чтобы избежать этого:

Убедитесь, что все ссылки на скрипты используют https://, если вы используете CDN.
Если вы используете локальные файлы, убедитесь, что они загружаются с использованием функции get_template_directory_uri(), чтобы избежать проблем с отсутствием HTTPS.

Заключение

Следуя приведенным шагам, вы сможете корректно интегрировать Chart.js в вашу кастомную тему WordPress и устранить ошибку «Смешанный контент». Если у вас возникнут дополнительные вопросы, пожалуйста, не стесняйтесь обращаться!

С уважением,
[Ваше имя]