Вопрос или проблема
Я уже задавал очень похожий вопрос в прошлом, но все еще испытываю трудности, и у меня есть новые обновления.
Это мой веб-сайт (http://cryptoportugal.com/), и я пытаюсь вставить виджет Javascript в свой хедер, который в настоящее время не работает. Я использую тему ‘Metro Magazine’.
Я пробовал использовать плагин ‘Header and Footer’, но он добавлял его только в подвал, в хедере это просто не работало.
Поэтому я решил открыть файл functions.php для своей темы и вставил следующий код в конце:
function mytheme() {
wp_register_script ('crypto', get_stylesheet_directory_uri() . '/js/crypto.js', true);
wp_enqueue_script ('crypto');
}
add_action( 'wp_enqueue_scripts', 'mytheme' );
И вот мой скрипт:
<script type="text/javascript">
baseUrl = "https://widgets.cryptocompare.com/";
var scripts = document.getElementsByTagName("script");
var embedder = scripts[ scripts.length - 1 ];
(function (){
var appName = encodeURIComponent(window.location.hostname);
if(appName==""){appName="local";}
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
var theUrl = baseUrl+'serve/v1/coin/header?fsym=BTC&tsyms=USD,EUR,CNY,GBP';
s.src = theUrl + ( theUrl.indexOf("?") >= 0 ? "&" : "?") + "app=" + appName;
embedder.parentNode.appendChild(s);
})();
</script>
Пока ничего не происходит, кажется, что даже ничего не происходит! 🙁
Помощь будет крайне оценена,
спасибо!
Я только что открыл ваш веб-сайт и проверил, что ваш crypto.js успешно встроен в ваш хедер. Но у вас есть некоторые ошибки в вашем коде, вот почему это не работает.
Вот код, который я нашел в вашем файле.
jQuery(document).ready(function() {
<script type="text/javascript">
baseUrl = "https://widgets.cryptocompare.com/";
var scripts = document.getElementsByTagName("script");
var embedder = scripts[ scripts.length - 1 ];
(function (){
var appName = encodeURIComponent(window.location.hostname);
if(appName==""){appName="local";}
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
var theUrl = baseUrl+'serve/v1/coin/header?fsym=BTC&tsyms=USD,EUR,CNY,GBP';
s.src = theUrl + ( theUrl.indexOf("?") >= 0 ? "&" : "?") + "app=" + appName;
embedder.parentNode.appendChild(s);
})();
</script>}
А вот этот код без ошибок, замените его в вашем существующем файле.
jQuery(document).ready(function() {
baseUrl = "https://widgets.cryptocompare.com/";
var scripts = document.getElementsByTagName("script");
var embedder = scripts[ scripts.length - 1 ];
(function (){
var appName = encodeURIComponent(window.location.hostname);
if(appName==""){appName="local";}
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
var theUrl = baseUrl+'serve/v1/coin/header?fsym=BTC&tsyms=USD,EUR,CNY,GBP';
s.src = theUrl + ( theUrl.indexOf("?") >= 0 ? "&" : "?") + "app=" + appName;
embedder.parentNode.appendChild(s);
})();
})
Ответ или решение
Добавление JavaScript в заголовок через functions.php
Если вы хотите интегрировать JavaScript-скрипт в заголовок вашего сайта на WordPress, то использование функции functions.php — один из наиболее эффективных способов. Рассмотрим, как это сделать правильно, используя ваш сайт в качестве примера.
1. Подготовка JavaScript-файла
Сначала убедитесь, что ваш JavaScript-код корректен и без ошибок. Из вашего описания я заметил, что в вашем скрипте присутствует лишний тег <script>, который не нужен при подключении JavaScript-файлов через функции WordPress. Вам нужен чистый код, который будет корректно выполняться в контексте вашего сайта.
Вот ваш исправленный код:
baseUrl = "https://widgets.cryptocompare.com/";
var scripts = document.getElementsByTagName("script");
var embedder = scripts[scripts.length - 1];
(function (){
var appName = encodeURIComponent(window.location.hostname);
if(appName==""){appName="local";}
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
var theUrl = baseUrl + 'serve/v1/coin/header?fsym=BTC&tsyms=USD,EUR,CNY,GBP';
s.src = theUrl + (theUrl.indexOf("?") >= 0 ? "&" : "?") + "app=" + appName;
embedder.parentNode.appendChild(s);
})();Сохраните этот код в файл crypto.js, который должен находиться в папке /js/ вашей активной темы.
2. Подключение JavaScript в functions.php
Теперь, чтобы подключить скрипт через файл functions.php, добавьте следующий код:
function mytheme_enqueue_scripts() {
wp_register_script('crypto', get_stylesheet_directory_uri() . '/js/crypto.js', array(), null, false);
wp_enqueue_script('crypto');
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');Разбор кода:
wp_register_script: регистрирует ваш скрипт с использованием уникального идентификатора (crypto), указывает путь к файлу, зависимости (указаны как массив, на данный момент пустой), версию (null — означает, что версия не указана), и местоположение (false указывает, что скрипт будет подключён в заголовке).wp_enqueue_script: добавляет скрипт в очередь на загрузку.
Соблюдая этот подход, вы можете корректно подключить JavaScript-код в заголовок вашего сайта.
3. Проверка работоспособности
После внесения изменений убедитесь, что ваш код работает правильно. Откройте консоль разработчика в вашем браузере и проверьте наличие ошибок. Ключевые точки проверки:
- Скрипт загружается: Убедитесь, что файл
crypto.jsзагружается в заголовке страницы. - Консоль ошибок: Если есть ошибки, они будут отображены в консоли, что поможет вам понять, в чем проблема.
Заключение
Интеграция JavaScript-кода на ваш сайт через functions.php — это простой и эффективный процесс. Убедитесь, что ваш код написан без ошибок, и следуйте приведённым инструкциям для успешного завершения задачи. Если у вас возникнут дополнительные вопросы или вам потребуется помощь, не стесняйтесь обращаться за поддержкой.