functions - jquery php wordpress
¿Cómo agrego un script jQuery simple a WordPress? (14)
Leí el Codex y algunas publicaciones en el blog sobre el uso de jQuery en WordPress, y es muy frustrante. Llegué a cargar jQuery en el archivo functions.php , pero todas las guías que hay son malas porque dan por supuesto que ya tienes un montón de experiencia en WordPress. Por ejemplo, dicen que ahora que estoy cargando jQuery a través del archivo functions.php , ahora todo lo que tengo que hacer es cargar mi jQuery.
¿Cómo exactamente hago esto? ¿En qué archivos, específicamente, agrego el código? ¿Cómo exactamente lo agrego para una sola página de WordPress?
Además de poner el script a través de funciones, puede "simplemente" incluir un vínculo (una etiqueta rel de enlace) en el encabezado, el pie de página, en cualquier plantilla, donde sea.
No. Nunca debería simplemente agregar un enlace a un script externo como este en WordPress. Encarándolos a través del archivo functions.php asegura que los scripts se carguen en el orden correcto.
Si no se ponen en cola, puede que su script no funcione, aunque está escrito correctamente.
"Tenemos Google" cit. Para usar correctamente la secuencia de comandos dentro de WordPress, solo agregue las bibliotecas alojadas. Como Google
Después de la biblioteca seleccionada que necesita vincular antes de su script personalizado: exmpl
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
y después de tu propio script
<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 secuencia de comandos en su archivo functions.php de la siguiente manera:
// 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 llamar a wp_footer () en su footer.php y wp_head () en su header.php (aquí es donde se generará la etiqueta del script), y jQuery se cargará en cada página. Cuando encola jQuery con WordPress, estará en modo "sin conflicto", por lo que debe usar jQuery en lugar de $. Puede anular el registro de jQuery si lo desea y volver a registrar el suyo haciendo wp_deregister_script (''jquery'').
** # Método 1: ** Trate de poner su código jquery en un archivo js separado.
Ahora registre esa secuencia de comandos 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 terminaste.
Registrar una secuencia de comandos en funciones tiene ventajas, ya que viene en la sección <head> cuando carga la página, por lo tanto, es una parte de header.php siempre. Por lo tanto, no tiene que repetir el 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 etiqueta <script> . Entonces no tienes que registrarlo en funciones.
Además de poner el script a través de funciones, puede "simplemente" incluir un vínculo (una etiqueta rel de enlace) 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és en el directorio de tu tema).
<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>
Una buena práctica es incluir este derecho antes de la etiqueta de cierre del cuerpo o al menos justo antes de su pie de página. También puede usar php includes u otros métodos para insertar este archivo.
<script type="javascript"><?php include(''your-file.js'');?></script>
Después de mucha búsqueda, finalmente encontré algo que funciona con la última versión de WordPress. Estos son los pasos a seguir:
- Encuentre el directorio de su tema, cree una carpeta en el directorio para su js personalizado ( custom_js en este ejemplo ).
- Coloque su jQuery personalizado en un archivo .js en este directorio ( jquery_test.js en este ejemplo ).
Asegúrate de que tu jQuery personalizado .js se vea así:
(function($) { $(document).ready(function() { $(''.your-class'').addClass(''do-my-bidding''); }) })(jQuery);Vaya al directorio del tema, abra functions.php
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'');- ¡Mira tu sitio para asegurarte de que funciona!
Hay muchos tutoriales y respuestas aquí sobre cómo agregar su script para incluirlo 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);
});
});
Puede agregar JavaScript personalizado o jquery usando este complemento.
https://wordpress.org/plugins/custom-javascript-editor/
Cuando use jQuery, no olvide utilizar el modo jQuery noconflict
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/
Puede usar la función predefinida de WordPress para agregar un archivo de script al plugin de WordPress.
wp_enqueue_script( ''script'', plugins_url(''js/demo_script.js'', __FILE__), array(''jquery''));
Mire la post que le ayuda a comprender con qué facilidad puede implementar jQuery y CSS en el complemento de WordPress.
Respuesta desde aquí: https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/
A pesar del hecho de que WordPress ha existido por un tiempo, y el método para agregar scripts a temas y complementos ha sido el mismo durante años, todavía existe cierta confusión sobre cómo exactamente se supone que debes agregar scripts. Así que vamos a aclararlo.
Dado que jQuery sigue siendo el marco de Javascript más comúnmente utilizado, veamos cómo puedes agregar un script simple a tu 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 el jQuery de WordPress, usa el modo de compatibilidad, que es un mecanismo para evitar conflictos con otras bibliotecas de idiomas.
Lo que esto se reduce a esto es que no se 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 código a continuación para ver lo que quiero decir:
Sé lo que quieres decir sobre los tutoriales. Así es como lo hago:
Primero necesitas escribir tu script. En su carpeta de temas, cree una carpeta llamada algo así como ''js''. Crea un archivo en esa carpeta para tu javascript. Por ejemplo, your-script.js. Agregue su script jQuery a ese archivo (no necesita etiquetas <script> 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. wp_enqueue_script() utilizar la función wp_enqueue_script() para que pueda agregar su secuencia de comandos y también decirle a WordPress que depende de jQuery. He aquí 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 tu tema tiene wp_head y wp_footer en los lugares correctos, esto debería funcionar. Avíseme si necesita más ayuda.
Se pueden hacer preguntas de WordPress en WordPress Answers .
Si usa el tema hijo de wordpress para agregar scripts a su tema, debe cambiar la función get_template_directory_uri por 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 escribir su secuencia de comandos en otro archivo. Y encola su archivo de esta manera suponga que el nombre de su script 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.js , debe colocar su ruta de archivo js.