Правильно используйте Scrollify на моем шаблоне Wordpress

Question

Я плохо разбираюсь в программировании на PHP и JS. Но я пытаюсь установить и использовать Scrollify в моей собственной теме для Wordpress. jQuery также должен быть загружен правильно. К сожалению, я не могу понять, как заставить прокрутку работать, в основном из-за непонимания того, как вещи реагируют друг на друга или правильно загружены.

Как кажется, я могу загрузить scrollify с этим кодом в моем functions.php:

function scrollify() {
    wp_register_script( 'jquery-scrollify', get_template_directory_uri() . '/js/scrollify/jquery.scrollify.js', array('jquery'));
    wp_enqueue_script( 'jquery-scrollify' );

    wp_register_script( 'jquery-scrollifymin', get_template_directory_uri() . '/js/scrollify/jquery.scrollify.min.js', array('jquery'));
    wp_enqueue_script( 'jquery-scrollifymin' );

    wp_register_script( 'Gruntfile', get_template_directory_uri() . '/js/scrollify/Gruntfile.js', array('jquery'));
    wp_enqueue_script( 'Grundtfile' ); } 

add_action( 'wp_enqueue_scripts', 'scrollify' );

Моя структура HTML выглядит следующим образом:

<section id="portfolio" class="fullscreen" data-section-name="portfolio"></section>
<section id="about" class="fullscreen" data-section-name="about"></section>

Конфигурация в jquery.scrollify.js:

    //section should be an identifier that is the same for each section
    section: "fullscreen",
    sectionName: "section-name",
    interstitialSection: "",
    easing: "easeOutExpo",
    scrollSpeed: 1100,
    offset: 0,
    scrollbars: true,
    target:"html,body",
    standardScrollElements: false,
    setHeights: true,
    overflowScroll:true,
    updateHash: true,
    touchScroll:true,
    before:function() {},
    after:function() {},
    afterResize:function() {},
    afterRender:function() {}
};

И скрипт в Заголовке:

$(function() {
  $.scrollify({
    section : ".fullscreen",
    sectionName : "section-name"
  });
});

Если вы хотите взглянуть на страницу, ссылка: http://kraftsy2017.ch.176-10-116-204.artemis.hostingmanager.ch/

Буду очень признателен за вашу помощь, я чувствую себя безнадежно. Благодарю.

Answer 1

Выглядит как $ не ссылается на jQuery на вашей странице. Попробуйте это вместо этого: jQuery(function() { jQuery.scrollify({ section : ".fullscreen", sectionName : "section-name" }); });