Добавление JavaScript в WordPress functions.php

Question

JavaScript (s) не загружаются

Я нашел этот действительно потрясающий статический шаблон HTML / CSS в Интернете и хотел преобразовать его в тему WordPress, но после преобразования я заметил, что HTML / CSS загружается из Inspectпредставление элементов, хотя (визуально) на экране отображаются только меню, фоны разделов и нижний колонтитул, а остальное содержимое тела, по-видимому, скрывается.

Проверьте файл functions.php на наличие ошибок, связанных с javascript.Предупреждение работает, но другие скрипты, похоже, не загружаются.Я уверен, что я сделал ошибку новичка и закодировал это неправильно.

Я занимаюсь разработкой на xampp.

Загрузите файлы проекта: https://drive.google.com/open?id=1ty9-LsirC6cPA2y-TuirC2IDpEYPOOug

function theme_scripts() 
{

    wp_enqueue_script( 'aos', get_template_directory_uri() . '/js/aos.js', array ( 'jquery' ), 1.1, false);
    wp_enqueue_script( 'alert', get_template_directory_uri() . '/js/alert.js', array ( 'jquery' ), 1.1, false);
    wp_enqueue_script( 'bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', array ( 'jquery' ), 1.1, false);
    wp_enqueue_script( 'bootstrap-datepicker', get_template_directory_uri() . '/js/bootstrap-datepicker.js', array ( 'jquery' ), 1.1, false);
    wp_enqueue_script( 'google-map', get_template_directory_uri() . '/js/google-map.js', array ( 'jquery' ), 1.1, false);
    wp_enqueue_script( 'jquery.animateNumber.min', get_template_directory_uri() . '/js/jquery.animateNumber.min.js', array ( 'jquery' ), 1.1, false);
    wp_enqueue_script( 'jquery.easing.1.3', get_template_directory_uri() . '/js/jquery.easing.1.3.js', array ( 'jquery' ), 1.1, false);
    wp_enqueue_script( 'jquery.magnific-popup.min', get_template_directory_uri() . '/js/jquery.magnific-popup.min.js', array ( 'jquery' ), 1.1, false);
    wp_enqueue_script( 'jquery.min', get_template_directory_uri() . '/js/jquery.min.js', array ( 'jquery' ), 1.1, false);
    wp_enqueue_script( 'jquery.stellar.min', get_template_directory_uri() . '/js/jquery.stellar.min.js', array ( 'jquery' ), 1.1, false);
    wp_enqueue_script( 'jquery.waypoints.min', get_template_directory_uri() . '/js/jquery.waypoints.min.js', array ( 'jquery' ), 1.1, false);
    wp_enqueue_script( 'jquery-3.2.1.min', get_template_directory_uri() . '/js/jquery-3.2.1.min.js', array ( 'jquery' ), 1.1, false);
    wp_enqueue_script( 'jquery-migrate-3.0.1.min', get_template_directory_uri() . '/js/jquery-migrate-3.0.1.min.js', array ( 'jquery' ), 1.1, false);
    wp_enqueue_script( 'main', get_template_directory_uri() . '/js/main.js', array ( 'jquery' ), 1.1, false);
    wp_enqueue_script( 'owl.carousel.min', get_template_directory_uri() . '/js/owl.carousel.min.js', array ( 'jquery' ), 1.1, false);
    wp_enqueue_script( 'popper.min', get_template_directory_uri() . '/js/popper.min.js', array ( 'jquery' ), 1.1, false);
    wp_enqueue_script( 'scrollax.min', get_template_directory_uri() . '/js/scrollax.min.js', array ( 'jquery' ), 1.1, false);

}

add_action( 'wp_enqueue_scripts', 'theme_scripts', 50, 0 );

С уважением

Answer 1

вместо

wp_enqueue_script( 'aos', get_template_directory_uri() . '/js/aos.js', array ( 'jquery' ), 1.1, false);

используйте это

wp_register_script( 'aos', get_template_directory_uri() . '/js/aos.js', array () , 1, 1, 1);
    wp_enqueue_script ('aos');

Answer 2

Работа с темой в вашей обновленной теме WordPress 20 июня 2019 zip:

1. Изменение index.php и frontpage.php

изменить: "/images/ на "<?php echo get_template_directory_uri(); ?>/images/

изменить: url(/images/ на url(<?php echo get_template_directory_uri(); ?>/images/

изменить: url('/images/ на url('<?php echo get_template_directory_uri(); ?>/images/

предложение: используйте url('...') вместо url(...) (таким образом вы будете уверены, что он обрабатывается как строка), но по крайней мере используйте только один синтаксис в одной теме.Управлять проще, если вы создадите соглашение для своего шаблона и будете придерживаться его.

Изменить functions.php

не найдено: wp-content/themes/eLeadWorks/js/jquery.timepicker.min.js (файл отсутствует в этой библиотеке, поэтому я прокомментировал регистр и поставил в очередь)

не найдено: wp-content/themes/eLeadWorks/js/example.js (файл не находится в этой библиотеке, поэтому я прокомментировал регистр и поставил в очередь)

отменил регистрацию скрипта: wp_deregister_script('jquery-migrate'); (поместите его перед wp_register_('jquery-migrate-3.0.1.min', ...)

переименуйтедескрипторы скриптов (предложение): не используйте номера версий в дескрипторах регистрации скриптов. Таким образом, вы не сможете свободно обновлять версии, если это необходимо. (поэтому jquery-migrate-3.0.1.min не в порядке, jquery-migrate в порядке)

изменить: wp_register_style( 'fonts', get_template_directory_uri() . 'https://fonts.googleapis.com/css?family=Work+Sans:300,400,,500,600,700', array(), 1.1, 'all' ); на wp_register_style( 'fonts', 'https://fonts.googleapis.com/css?family=Work+Sans:300,400,,500,600,700', array(), 1.1, 'all' ); (нет get_template_directory_uri () необходимо)

изменить: wp_register_script( 'google-api', get_template_directory_uri() . 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false', array () , 1, 1, 1); на wp_register_script( 'google-api', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false', array () , 1, 1, 1); (нет get_template_directory_uri () необходимо)

После этих изменений

После этих изменений я вижу только одну (1) ошибку при загрузке страницы: Uncaught TypeError: Cannot read property 'firstChild' of null. Эта ошибкавыдается вашим кодом Google Maps.

Ошибка возникает из-за того, что у вас нет элемента DOM с id="map".

Итак, либо добавьте элемент с id="map" (где Google Карты могут разместить карту), либо измените свой код, чтобы проверить значение mapElement (в google-map.js):

// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');

// check if mapElement exists (not null)
if (mapElement) {
  // Create the Google Map using out element and options defined above
  var map = new google.maps.Map(mapElement, mapOptions);

  var addresses = ['New York'];

  for (var x = 0; x < addresses.length; x++) {
      $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
          var p = data.results[0].geometry.location
          var latlng = new google.maps.LatLng(p.lat, p.lng);
          new google.maps.Marker({
              position: latlng,
              map: map,
              icon: 'images/loc.png'
          });

      });
  }
}

После всех этих модификаций я не вижу ни одной ошибки в моей консоли.

Answer 3

Чтобы загрузить файлы JS, вам необходимо:

• Перейти к footer.php
• Удалить все жестко закодированные скрипты снизу (шаблон пытается их загрузить, а нете из вашего functions.php)

<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/jquery.timepicker.min.js"></script>
<script src="js/scrollax.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="js/google-map.js"></script>
<script src="js/main.js"></script>

Затем добавьте это:

<?php wp_footer(); ?>

Это нижний колонтитул Wordpress, который вызывает хук, который ваш wp_enqueue() использует длявставка тегов скрипта (это похоже на wp_head() только для нижнего колонтитула).Я предлагаю вам также включить скрипт Google Maps в ваш functions.php - храните все ваши внешние скрипты в одном месте.

Кажется, проблема в том, что вы скопировали HTML-шаблон как тему Wordpress.У них есть различия, хотя и не слишком большие - это одно.:)

Это будет то же самое с отсутствующими изображениями: структура каталогов HTML-шаблона отличается от структуры установки Wordpress.Вы просто должны это исправить, и все будет хорошо.