Pregunta sobre Developing with WordPress de Wordpress:

Archivo JS sin ejecutar el script

Un usuario pregunt贸 馃憞

Quiero crear un tema de WordPress personalizado. Estoy tratando de crear un encabezado receptivo pero de alguna manera no puedo ejecutar el script que escrib铆 en mi scripts.js. Supongo que estoy haciendo algo al vincular el tema porque el script se ejecuta perfectamente fuera de WordPress. Este es mi c贸digo: header.php鈥

<body>
<nav>  
  <div class="logo">
        <h4>The Nav</h4>
    </div>
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">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');

Este tema fue modificado por 煤ltima vez hace 6 meses por. Raz贸n: c贸digo mal escrito

(@thimalw)

hace 6 meses

隆Oye!

Si leo su c贸digo correctamente, creo que est谩 registrando un script llamado 芦scripts禄 con el archivo fuente 芦blog-scripts.js禄. wp_register_script y luego cargue inmediatamente ese script en la siguiente l铆nea con wp_enqueue_script. Por lo tanto, no est谩 cargando el archivo 芦scripts.js禄 en ning煤n lugar de su c贸digo.

No tienes que usarlo wp_register_script si no desea registrar el script y luego cargarlo en otro lugar de su tema con una declaraci贸n condicional, por ejemplo. As铆 que solo usando wp_enqueue_script esto debe configurarse para cargar ambos archivos como se muestra a continuaci贸n.

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);

En una nota no relacionada, recomendar铆a no usarlo microtime() para la versi贸n del script y en su lugar defina una constante en alg煤n lugar de su archivo 芦functions.php禄 y 煤sela.

(@ purvesh123)

hace 6 meses

Hola, B谩sicamente, blog-scripts.js era mi archivo de scripts principal que quer铆a cargar. Cambi茅 el c贸digo fuente a lo que sugiri贸, pero a煤n no ha ejecutado el c贸digo en los archivos js … este es el c贸digo actualizado.

<?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)

hace 6 meses

Se recomienda que utilice su versi贸n de instalaci贸n local de jQuery en lugar de la de su CDN. Ya est谩 registrado como 芦jquery禄, simplemente especif铆quelo como una dependencia mientras carga su propio script para cargarlo. Si necesita usar la versi贸n CDN por alg煤n motivo, aseg煤rese de que nada m谩s est茅 intentando cargar la versi贸n local. En este caso, debe registrar jQuery para que pueda especificarlo como una dependencia en su script. Tampoco es necesario poner en cola si se usa como dependencia. (s铆, cuando no se pueden poner en cola y cuando sin registro se confunden) Las dependencias son la 煤nica forma de asegurarse de que los scripts se carguen en el orden correcto. Poner en cola en alg煤n orden en PHP no es una garant铆a.

El jQuery local se ejecuta en modo noConflict, por lo que es normal $ un atajo no funcionar谩 a menos que se cree una carpeta noConflict para su c贸digo. Sin ella, todo uso de ella $ es necesario cambiar eso jQuery.

Si a煤n tiene problemas, verifique su consola de errores.

(@ purvesh123)

hace 6 meses

Gracias

驴Solucion贸 tu problema??

0 / 0

Deja una respuesta 0

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *