¿Cómo agrego un script jQuery simple a WordPress?

Leí el Codex y algunas publicaciones de blog sobre el uso de jQuery en WordPress, y es muy frustrante. Llegué a cargar jQuery en un functions.phparchivo, pero todas las guías son malas porque suponen que ya tienes mucha experiencia en WordPress. Por ejemplo, dicen que ahora que estoy cargando jQuery a través del functions.phparchivo, ahora todo lo que tengo que hacer es cargar mi jQuery.

¿Cómo hago exactamente esto? ¿A qué archivos, específicamente, agrego código? ¿Cómo lo agrego exactamente para una sola página de WordPress?

Sé lo que quieres decir con los tutoriales. Así es como lo hago:

Primero necesitas escribir tu guión. En su carpeta de temas, cree una carpeta llamada algo así como 'js'. Cree un archivo en esa carpeta para su javascript. Por ejemplo, your-script.js. Agregue su script jQuery a ese archivo (no necesita <script>etiquetas en un archivo .js).

Aquí hay un ejemplo de cómo podría verse su script jQuery (en wp-content / themes / your-theme / js / your-scrript.js):

jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

Tenga en cuenta que uso jQuery y no $ al comienzo de la función.

Ok, ahora abre el archivo functions.php de tu tema. Querrá usar la wp_enqueue_script()función para poder agregar su script mientras le dice a WordPress que depende de jQuery. Aquí se explica cómo hacerlo:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'your-script', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

Suponiendo que su tema tiene wp_head y wp_footer en los lugares correctos, esto debería funcionar. Avísame si necesitas más ayuda.

Las preguntas de WordPress se pueden hacer en Respuestas de WordPress .

Después de mucho buscar, finalmente encontré algo que funciona con la última versión de WordPress. Estos son los pasos a seguir:

1. Encuentre el directorio de su tema, cree una carpeta en el directorio para sus js personalizados ( custom_js en este ejemplo ).
2. Coloque su jQuery personalizada en un archivo .js en este directorio ( jquery_test.js en este ejemplo ).

3. Asegúrese de que su jQuery .js personalizado se vea así:

   (function($) {
   $(document).ready(function() {
   $('.your-class').addClass('do-my-bidding');
   })
   })(jQuery);

4. Vaya al directorio del tema, abra functions.php

5. Agregue un código cerca de la parte superior que se vea así:

   //this goes in functions.php near the top
   function my_scripts_method() {
   // register your script location, dependencies and version
      wp_register_script('custom_script',
      get_template_directory_uri() . '/custom_js/jquery_test.js',
      array('jquery'),
      '1.0' );
    // enqueue the script
     wp_enqueue_script('custom_script');
     }
   add_action('wp_enqueue_scripts', 'my_scripts_method');

6. ¡Mira tu sitio para asegurarte de que funciona!

Si utiliza el tema secundario de WordPress para agregar scripts a su tema, debe cambiar la función get_template_directory_uri a get_stylesheet_directory_uri, por ejemplo:

Tema principal:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
        'parent-theme-script', 
        get_template_directory_uri() . '/js/your-script.js', 
        array('jquery') 
    );

    wp_enqueue_script('parent-theme-script');
}

Tema infantil:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/js/your-script.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

get_template_directory_uri: / your-site / wp-content / themes / parent-theme

get_stylesheet_directory_uri: / your-site / wp-content / themes / child-theme

Puede agregar jQuery o javascript en el archivo function.php del tema. El código es el siguiente:

add_action( 'wp_enqueue_scripts', 'add_my_script' );

function add_my_script() {
wp_enqueue_script(
    'your_script_name', // your script unique name 
    get_template_directory_uri().'/js/your-script.js', //script file location
    array('jquery') //lists the scripts upon which your script depends
);
}

Para obtener más detalles, visite este tutorial: http://www.codecanal.com/add-simple-jquery-script-wordpress/

Además de poner el script a través de funciones, puede "simplemente" incluir un enlace (una etiqueta de enlace que está) en el encabezado, el pie de página, en cualquier plantilla, donde sea. Solo necesita asegurarse de que la ruta sea correcta. Sugiero usar algo como esto (suponiendo que esté en el directorio de su tema).

<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>

Una buena práctica es incluir esto justo antes de la etiqueta de cierre del cuerpo o al menos justo antes de su pie de página. También puede usar PHP incluye u otros métodos para extraer este archivo.

<script type="javascript"><?php include('your-file.js');?></script>

** # Método 1: ** Intenta poner tu código jquery en un archivo js separado.

Ahora registre ese script en el archivo functions.php.

function add_my_script() {
    wp_enqueue_script(
      'custom-script', get_template_directory_uri() . '/js/your-script-name.js', 
        array('jquery') 
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

Ahora ya terminaste.

Registrar el script en funciones tiene sus beneficios, ya que viene en la <head>sección cuando se carga la página, por lo que siempre forma parte de header.php. Por lo tanto, no tiene que repetir su código cada vez que escribe un nuevo contenido html.

# Método 2: coloque el código del script dentro del cuerpo de la página bajo la <script>etiqueta. Entonces no tienes que registrarlo en funciones.

Puede agregar javascript personalizado o jquery usando este complemento.
https://wordpress.org/plugins/custom-javascript-editor/

Cuando use jQuery, no olvide usar el modo sin conflicto jquery

Aquí hay muchos tutoriales y respuestas sobre cómo agregar su script para que se incluya en la página. Pero lo que no pude encontrar es cómo estructurar ese código para que funcione correctamente. Esto se debe a que $ no se usa en esta forma de JQuery.

Así que aquí está mi código y puedes usarlo como plantilla.

jQuery(document).ready(function( $ ){
  $("#btnCalculate").click(function () {
        var val1 = $(".visits").val();
        var val2 = $(".collection").val();
        var val3 = $(".percent").val();
        var val4 = $(".expired").val();
        var val5 = $(".payer").val();
        var val6 = $(".deductible").val(); 
        var result = val1 * (val3 / 100) * 10 * 0.25;
        var result2 = val1 * val2 * (val4 / 100) * 0.2;
        var result3 = val1 * val2 * (val5 / 100) * 0.2;
        var result4 = val1 * val2 * (val6 / 100) * 0.1;
        var val7 = $(".pverify").val();
        var result5 = result + result2 + result3 + result4 - val7;
        var result6 = result5 * 12;
        $("#result").val("$" + result);
        $("#result2").val("$" + result2);
        $("#result3").val("$" + result3);
        $("#result4").val("$" + result4);
        $("#result5").val("$" + result5);
        $("#result6").val("$" + result6);
  });
});

Responda desde aquí: https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

A pesar del hecho de que WordPress ha existido durante un tiempo, y el método de agregar scripts a temas y complementos ha sido el mismo durante años, todavía existe cierta confusión sobre cómo se supone que debe agregar scripts. Así que vamos a aclararlo.

Dado que jQuery sigue siendo el marco de JavaScript más utilizado, echemos un vistazo a cómo puede agregar un script simple a su tema o complemento.

Modo de compatibilidad de jQuery

Antes de comenzar a adjuntar scripts a WordPress, veamos el modo de compatibilidad de jQuery. WordPress viene preempaquetado con una copia de jQuery, que debe usar con su código. Cuando se carga jQuery de WordPress, utiliza el modo de compatibilidad, que es un mecanismo para evitar conflictos con otras bibliotecas de idiomas.

Esto se reduce a que no puede usar el signo de dólar directamente como lo haría en otros proyectos. Al escribir jQuery para WordPress, debe usar jQuery en su lugar. Eche un vistazo al siguiente código para ver a qué me refiero:

Las soluciones que he visto son desde la perspectiva de agregar funciones de JavaScript a un tema. Sin embargo, el OP preguntó, específicamente, "¿Cómo lo agrego exactamente para una sola página de WordPress?" Parece que es así como uso JavaScript en mi blog de Wordpress, donde las publicaciones individuales pueden tener diferentes "widgets" basados ​​en JavaScript. Por ejemplo, una publicación podría permitir al usuario cambiar variables (controles deslizantes, casillas de verificación, campos de entrada de texto) y trazar o enumerar los resultados.

A partir de la perspectiva de JavaScript:

1. Escriba sus funciones de JavaScript en un archivo ".js" separado

Ni siquiera piense en incluir JavaScript significativo en el html de su publicación: cree un archivo o archivos JavaScript con su código.

2. Interfase su JavaScript con el html de su publicación

Si su widget de JavaScript interactúa con los controles y campos html, deberá comprender cómo consultar y establecer esos elementos desde JavaScript, y también cómo permitir que los elementos de la interfaz de usuario llamen a sus funciones de JavaScript. Aquí hay un par de ejemplos; primero, desde JavaScript:

var val = document.getElementById(“AM_Freq_A_3”).value;

Y desde html:

<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>

3. Use jQuery para llamar a la función de inicialización de su widget de JavaScript

Agregue esto a su archivo .js, usando el nombre de su función que configura y dibuja su widget de JavaScript cuando la página está lista para ello:

jQuery(document).ready(function( $ ) {
    your_init_function();
});

4. En el código html de su publicación, cargue los scripts necesarios para su publicación

En el editor de código de Wordpress, normalmente especifico los scripts al final de la publicación. Por ejemplo, tengo una carpeta de scripts en mi directorio principal. Dentro tengo un directorio de utilidades con JavaScript común que algunas de mis publicaciones pueden compartir, en este caso algunas de mis propias funciones de utilidad matemática y la biblioteca de trazado flotr2. Me parece más conveniente agrupar el JavaScript específico de la publicación en otro directorio, con subdirectorios basados ​​en la fecha en lugar de usar el administrador de medios, por ejemplo.

<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>

5. Enqueue jQuery

Wordpress registra jQuery, pero no está disponible a menos que le diga a Wordpress que lo necesita, al ponerlo en cola. Si no lo hace, el comando jQuery fallará. Muchas fuentes le dicen cómo agregar este comando a su functions.php, pero suponga que conoce otros detalles importantes.

Primero, es una mala idea editar un tema: cualquier actualización futura del tema eliminará sus cambios. Haz un tema infantil. Así es cómo:

https://developer.wordpress.org/themes/advanced-topics/child-themes/

El archivo functions.php del niño no anula el archivo del tema principal del mismo nombre, sino que lo agrega. El tutorial de temas secundarios sugiere cómo poner en cola el archivo style.css primario y secundario. Simplemente podemos agregar otra línea a esa función para poner en cola también jQuery. Aquí está todo mi archivo functions.php para el tema hijo:

<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
    // styles
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    // posts with js widgets need jquery
    wp_enqueue_script('jquery');
}

Puede usar la función predefinida de WordPress para agregar un archivo de script al complemento de WordPress.

wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));

Mire la publicación que lo ayuda a comprender qué tan fácilmente puede implementar jQuery y CSS en el complemento de WordPress.

Además de poner el script a través de funciones, puede "simplemente" incluir un enlace (una etiqueta de enlace que está) en el encabezado, el pie de página, en cualquier plantilla, donde sea.

No. Nunca debes agregar un enlace a un script externo como este en WordPress. Ponerlos en cola a través del archivo functions.php asegura que los scripts se carguen en el orden correcto.

Si no los pone en cola, el script no funcionará, aunque esté escrito correctamente.

puede escribir su secuencia de comandos en otro archivo y poner en cola su archivo de esta manera, supongamos que su nombre de secuencia de comandos es image-ticker.js.

wp_enqueue_script( 'image-ticker-1', plugins_url('/js/image-ticker.js', __FILE__), array('jquery', 'image-ticker'), '1.0.0', true ); 

en lugar de /js/image-ticker.jsusted debe poner su ruta de archivo js.

En WordPress, la forma correcta de incluir los scripts en su sitio web es mediante el uso de las siguientes funciones.

wp_register_script( $handle, $src )
wp_enqueue_script( $handle, $src )

Estas funciones se llaman dentro del gancho wp_enqueue_script.

Para obtener más detalles y ejemplos, puede verificar Agregar archivos JS en Wordpress usando wp_register_script & wp_enqueue_script

Ejemplo:

function webolute_theme_scripts() {
    wp_register_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'script-name' );
}
add_action( 'wp_enqueue_scripts', 'webolute_theme_scripts' );

"Tenemos Google" cit. Para usar correctamente el script dentro de WordPress, simplemente agregue bibliotecas alojadas. Me gusta Google

Después de seleccionar la biblioteca que necesita vincularla antes de su script personalizado: ej.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

y después de tu propio guión

<script type="text/javascript">
    $(document).ready(function () {
        $('.text_container').addClass("hidden");
    });
</script>

¿Solo necesitas cargar jquery?

1) Como dicen las otras guías, registre su script en su archivo functions.php así:

// register scripts
if (!is_admin()) {
    // here is an example of loading a custom script in a /scripts/ folder in your theme:
    wp_register_script('sandbox.common', get_bloginfo('template_url').'/scripts/common.js', array('jquery'), '1.0', true);
    // enqueue these scripts everywhere
    wp_enqueue_script('jquery');
    wp_enqueue_script('sandbox.common');
}

2) Tenga en cuenta que no necesitamos registrar jQuery porque ya está en el núcleo. Asegúrese de que se llame a wp_footer () en su footer.php y que se llame a wp_head () en su header.php (aquí es donde generará la etiqueta del script), y jQuery se cargará en cada página. Cuando ponga en cola jQuery con WordPress, estará en modo "sin conflicto", por lo que debe usar jQuery en lugar de $. Puede cancelar el registro de jQuery si lo desea y volver a registrar el suyo haciendo wp_deregister_script ('jquery').

function xyz_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');