Guys, I need help integrating swup to my wordpress site. I try everything, put <main id="swup" class="transition-fade">
around content in my index.php, page.php, single.php, archive.php, search.php..
Create function in my function.php
function pro_adding_scripts() {
wp_register_script('swup-pro-script', get_template_directory_uri() . '/swup.min.js', array('jquery'), '1.2', false);
wp_enqueue_script( 'swup-pro-script');
wp_register_script('swup-pro-script2', get_template_directory_uri() . '/script.js', array('jquery'), '1.2', false);
wp_enqueue_script( 'swup-pro-script2');
}
add_action( 'wp_enqueue_scripts', 'pro_adding_scripts' );
import script in header.php
<script src="/swup.min.js"></script>
<script src="/script.js"></script>
Use this in my script.js file:
import Swup from 'swup';
const swup = new Swup({
LINK_SELECTOR: `a[href*="${domain}"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]`,
});
and add this css:
.transition-fade {
transition: 0.4s;
opacity: 1;
}
html.is-animating .transition-fade {
opacity: 0;
}
Nothing happened... when press any link page just reloads normal. I'm not sure what I doing wrong.