Fichier JS sans exécuter le script

0
0
0

Un utilisateur a demandé 👇

Je souhaite créer un thème WordPress personnalisé. J’essaie de créer un en-tête réactif mais je ne peux pas exécuter le script que j’ai écrit dans mon scripts.js. Je suppose que je fais quelque chose en liant le thème car le script fonctionne très bien en dehors de WordPress. Voici mon code : header.php–

<body>
<nav>  
  <div class="logo">
        <h4>The Nav</h4>
    </div>
    <ul class="nav-links">
        <li><a href="https://codeworpress.com/archivo-js-sin-ejecutar-el-script/#">Home</a></li>
        <li><a href="https://codeworpress.com/archivo-js-sin-ejecutar-el-script/#">About</a></li>
        <li><a href="https://codeworpress.com/archivo-js-sin-ejecutar-el-script/#">Work</a></li>
        <li><a href="https://codeworpress.com/archivo-js-sin-ejecutar-el-script/#">Projects</a></li>
    </ul>
    <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
</nav>

css--
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav {
    padding-top: 30px;
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #5D4954;
    font-family: "Poppins", sans-serif;
}

.logo {
    color: rgb(226, 226, 226);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    width: 30%;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    color: rgb(226, 226, 226);
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
}

.burger {
    display: none;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: rgb(226, 226, 226);
    margin: 5px;
    transition: all 0.3s ease;
}

@media screen and (max-width: 1024px) {
    .nav-links {
        width: 60%;
    }
}

@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    
    .nav-links {
        position: fixed;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: #5D4954;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    
    .nav-links li {
        opacity: 0;
    }
    
    .burger {
        display: block;
        cursor: pointer;
    }
    nav {
        padding-top: 50px;
        position: fixed;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        min-height: 8vh;
        background-color: #5D4954;
        font-family: "Poppins", sans-serif;
    }
}

.nav-active {
        transform: translateX(0%);
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

scripts.js--
function navSlide() {
    const burger = document.querySelector(".burger");
    const nav = document.querySelector(".nav-links");
    const navLinks = document.querySelectorAll(".nav-links li");
    
    burger.addEventListener("click", () => {
        //Toggle Nav
        nav.classList.toggle("nav-active");
        
        //Animate Links
        navLinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = ""
            } else {
                link.style.animation = <code>navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s</code>;
            }
        });
        //Burger Animation
        burger.classList.toggle("toggle");
    });
    
}

functions.php
function get_files()
{
    wp_enqueue_script('jQuery-js', 'http://code.jquery.com/jquery.js', array(), '1.0', true);
    wp_register_script('scripts',get_template_directory_uri().'blog-scripts.js',array(),false,'all');
    wp_enqueue_script('scripts'/*, get_theme_file_uri('scripts.js'),NULL,microtime(), true*/);
    wp_enqueue_style('main_styles',get_stylesheet_uri(),NULL,microtime());
    
}
add_action('wp_enqueue_scripts','get_files');

Ce sujet a été modifié pour la dernière fois il y a 6 mois par. Raison : code mal écrit

(@thimalw)

il y a 6 mois

Entend !

Si j’ai bien lu votre code, je pense que vous enregistrez un script appelé “scripts” avec le fichier source “blog-scripts.js”. wp_register_script puis chargez immédiatement ce script sur la ligne suivante avec wp_enqueue_script. Ainsi, vous ne chargez le fichier “scripts.js” nulle part dans votre code.

vous n’êtes pas obligé de l’utiliser wp_register_script si vous ne voulez pas enregistrer le script, chargez-le ailleurs dans votre thème avec une instruction conditionnelle, par exemple. Donc, juste en utilisant wp_enqueue_script cela devrait être réglé pour télécharger les deux fichiers comme indiqué ci-dessous.

wp_enqueue_script('blog-scripts', get_template_directory_uri().'/blog-scripts.js',array(),false, true);
wp_enqueue_script('main-scripts', get_template_directory_uri().'/scripts.js', array(), microtime(), true);

Sur une note sans rapport, je déconseille de l’utiliser microtime() pour la version du script et définissez à la place une constante quelque part dans votre fichier “functions.php” et utilisez-la.

(@ purvesh123)

il y a 6 mois

Salut, Fondamentalement, blog-scripts.js était mon principal fichier de scripts que je voulais télécharger. J’ai changé le code source en ce que vous avez suggéré, mais je n’ai pas encore exécuté le code dans les fichiers js… voici le code mis à jour.

<?php 
function get_files()
{
    wp_enqueue_script('jQuery-js', 'http://code.jquery.com/jquery.js', array(), '1.0', true);
    wp_enqueue_script('main-scripts', get_template_directory_uri().'/scripts.js', array(), , true);
    wp_enqueue_style('main_styles',get_stylesheet_uri(),NULL,microtime());    
}
add_action('wp_enqueue_scripts','get_files');

(@bcworkz)

il y a 6 mois

Il est recommandé d’utiliser votre version d’installation locale de jQuery au lieu de celle de votre CDN. Il est déjà enregistré en tant que “jquery”, spécifiez-le simplement en tant que dépendance lors du téléchargement de votre propre script pour le charger. Si vous devez utiliser la version CDN pour une raison quelconque, assurez-vous que rien d’autre n’essaie de charger la version locale. Dans ce cas, vous devez enregistrer jQuery afin de pouvoir le spécifier en tant que dépendance dans votre script. Il n’est pas non plus nécessaire de mettre en file d’attente s’il est utilisé comme dépendance. (oui, quand ils ne peuvent pas être mis en file d’attente et quand sans se connecter ils deviennent confus) Les dépendances sont le seul moyen de s’assurer que les scripts sont chargés dans le bon ordre. La mise en file d’attente dans un certain ordre en PHP n’est pas une garantie.

Le jQuery local s’exécute en mode noConflict, donc c’est normal $ un raccourci ne fonctionnera que si un dossier noConflict est créé pour votre code. Sans elle, toute utilisation d’elle $ il faut changer ça jQuery.

Si vous rencontrez toujours des problèmes, consultez votre console d’erreurs.

(@ purvesh123)

il y a 6 mois

Merci

Cela a-t-il résolu votre problème ?

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *