Por lo general, hay muchas razones por las que desea agregar Javascript a WordPress, ya sea un pequeño ajuste a una característica o tal vez esté buscando agregar un script de terceros. Respectoless de la razón por la que quiere hacerlo, quiere asegurarse de no hacerlo mal, porque podría romper su sitio web o crear un cuello de botella en el rendimiento.
No es posible agregar Javascript a las páginas y publicaciones de WordPress directamente, por lo que sugeriremos varias formas diferentes de agregar código Javascript a los sitios web y cuáles deben usarse en las diferentes circunstancias que pueda encontrar.
Si tiene prisa, use la tabla de contenido a continuación para desplazarse a la parte relevante del artículo.
Este artículo incluye cambios en el código de WordPress. Si no está seguro de modificar el código usted mismo, es posible que desee aprenda cómo reclutar al mejor desarrollador de WordPress para su negocio o echa un vistazo a las siguientes opciones de desarrollo económico.
Si no está seguro de si esto es adecuado para usted y qué hacer rápidamente, consulte algunos conciertos de Fiverr que pueden hacerlo por usted rápidamente.
Haga clic aquí para encontrar expertos baratos en correcciones de WordPress
¿Qué es JavaScript?
Si estás leyendo esta publicación, probablemente ya estés familiarizado con lo que es JavaScript.
Sin embargo, para mantenerlo accesible para todos, describiremos rápidamente qué es JavaScript y qué hace. Siéntete libre de saltarte esta parte si ya lo sabes.
JavaScript es un lenguaje de programación que se ejecuta en un navegador. Se puede llamar desde el servidor web, pero se ejecuta dentro del navegador del visitante.
Esto proporciona un amplio margen para que haga cosas geniales como incrustar video y agregar funciones.
Por ejemplo, puede usar JavaScript para incrustar un reproductor de video para que su servidor web no tenga que hacerlo.
Esto mejora la experiencia del usuario al incluir video, sin agregar carga a su servidor web para reproducir el video.
JavaScript también se usa en aplicaciones móviles, juegos, aplicaciones de servidor, desarrollo front-end y, más recientemente, desarrollo relacionado con IA.
¿Puedes usar JavaScript en WordPress?
Sí, puedes usar JavaScript en WordPress. Dada la flexibilidad inherente del CMS, puede usar JavaScript para agregar elementos interactivos o colocar API de terceros en una página.
Los usos son muchos y variados, pero como el navegador del usuario ejecuta JavaScript, puede hacer mucho sin ralentizar su servidor web.
Puede agregar secuencias de comandos de varias maneras, como veremos más adelante.
Antes de realizar cambios en los archivos, le recomendamos que primero cree un tema secundario y/o haga una copia de seguridad de su sitio web.
¡No puedes ser demasiado cuidadoso!
Cómo agregar JavaScript a WordPress
Hay varias formas de agregar código Javascript personalizado a su sitio de WordPress, cada una con sus propios usos:
- Agregue un script en páginas seleccionadas usando un complemento como WPCode
- Agregue el script a una página específica o única de su elección, o a varias páginas usando functions.php
- Agregar JavaScript a todas las páginas
- Agregue un archivo Javascript al encabezado de su tema
- Usando el gancho wp_head para agregar JavaScript personalizado
- Agregue JavaScript a su pie de página de WordPress
- Agregar JavaScript al video de WordPress
- Agregar JavaScript a un widget de WordPress
Veamos cada uno de estos métodos en detalle.
Luego, compartiremos rápidamente cómo depurar JavaScript una vez que lo haya agregado a una página.
Note: Algunas de estas técnicas implican realizar cambios en los archivos principales. Si bien no suele ser una buena idea cambiar functions.php y otros archivos principales de WordPress, queremos mostrarle todas las formas de agregar código.
No recomendamos necesariamente hacer cambios de esta manera, pero creemos en brindarle toda la información y luego tomar su propia decisión.
1. Use un complemento como WPCode
Si simplemente desea usar un complemento para incrustar una referencia de javascript en el archivo de encabezado o pie de página del tema de WordPress, el complemento WPCode es una opción fácil y gratuita.
Recomendamos usar un complemento para todos los cambios de código, ya que mantiene todo limpio y puede evitar cualquier problema en el futuro.
En lugar de modificar los archivos del tema directamente con el código Javascript personalizado, un complemento le permite insertar el código, que luego se agregará al encabezado o al pie de página de su sitio, según las opciones que haya elegido.
Este complemento admite varias opciones diferentes, por lo que solo describiremos las más comunes que necesitará usar.
solicite descargar código WP aquí o instálelo usando la función Instalar complementos de WordPress.
Instale el complemento WPCode:
- Inicie sesión en el backend o administrador de su sitio.
- Ve a Plugins > Añadir nuevo
- Busque el complemento "WPCode" y haga clic en Instalar ahora .
- Una vez que se haya instalado, haga clic en Activar
Ahora puede cargar una secuencia de comandos personalizada sin un archivo (por ejemplo, para agregar una secuencia de comandos que se le haya proporcionado, como Google Analytics) o cargar un archivo de Javascript personalizado.
La opción más común que puede usar con este complemento es la opción de agregar el código directamente en WordPress.
Esto se puede usar cuando está utilizando un servicio de terceros, como Google Analytics, Drip u otra herramienta que necesita que se agregue algún script a su sitio. Simplemente tome el guión y colóquelo en el Encabezado y pie de página globales ventana.
Puede optar por agregar la secuencia de comandos a Encabezado, Cuerpo o Pie de página. Debe recibir orientación del proveedor del script en cuál de estas secciones necesita agregar el script.
Digamos que desea agregarlo al encabezado:
Haga Clic en Guardar Cambios para terminar.
El complemento WPCode ahora agregará el código a cada página de su sitio web.
Vuelva a cargar el front-end y verifique la fuente de su sitio web para asegurarse de que se muestre el código. También es una buena idea navegar por algunas páginas para confirmar que todo sigue funcionando bien.
WPCode también le permite crear sus propios fragmentos de código.
También puede insertar fragmentos de código en cualquier lugar de su sitio web, como publicaciones o páginas internas, antes o después de una publicación, antes o después del contenido, o una serie de otras opciones que pueda necesitar.
Simplemente navega a Fragmentos de código > Agregar fragmento Y luego seleccione Crea tu propio.
Ahora lo llevarán a un Crear fragmento personalizado página donde puede darle un título a su código y pegarlo en el Vista previa del código encajonar.
Entonces, desde el Tipo de código menú desplegable, seleccione Fragmento de JavaScript.
Luego, simplemente desplácese hacia abajo hasta llegar a la Inserción zona.
Todo lo que queda es elegir una ubicación para el código en el menú desplegable. Localizar Página, Publicación, Tipo de publicación personalizada y especifique dónde desea que se muestre el código en la página o publicación.
Si desea que WPCode coloque el fragmento antes o después de un párrafo, puede especificar qué párrafo en la publicación debe aparecer antes o después.
Si ingresa 1 en el campo 'Insertar número', por ejemplo, el fragmento de código aparecerá antes o después del primer párrafo. Para el segundo párrafo, use 2, y así sucesivamente.
Después de eso, simplemente mueva el interruptor cerca de la parte superior de la pantalla para Active, y luego haga clic en Guardar fragmento opción al lado.
¡Eso es todo lo que se necesita para agregar JavaScript a WordPress!
La principal ventaja de usar un complemento es que es una opción amigable para principiantes. No necesita preocuparse por editar los archivos de su tema. El complemento WPCode también puede ser útil si está buscando una costuraless manera de agregar otros tipos de código y CSS personalizado.
Sin embargo, la desventaja de este método es que implica la instalación de un complemento de terceros, que algunos propietarios de sitios intentan evitar.
Si desea mantener sus extensiones al mínimo, es mejor que utilice uno de los otros métodos.
Aunque esto parece bastante simple, podría estar fuera de su zona de confort, así que si desea hacerlo rápidamente, consulte algunos desarrolladores en Fiverr que puede hacer esto por usted.
Haga clic aquí para encontrar expertos baratos en correcciones de WordPress
2. Agregue JavaScript a una página o publicación específica de WordPress
Este ajuste de código utilizará el funciones archivo que se encuentra en la carpeta de su plantilla para agregar un archivo .JS de su propia elección a una sola página de su propia elección solamente.
Esto usa el ES_PÁGINA función que puedes encontrar esta página:
En realidad, puede usar varias otras opciones si desea agregar el script solo en condiciones específicas, como:
is_single(),is_front_page(),is_home,is_adminetc.
Si necesita agregar el archivo a todas las páginas, continúe desplazándose para encontrar otras alternativas a este método a continuación.
- Primero, deberá identificar la ID de la página a la que desea agregar el script.
- Para ello, vaya a la página a la que desea agregar el archivo, haga clic en Editar y luego obtenga el ID de la página de la URL como puede ver a continuación. El ID es el número que se encuentra en la URL de la barra del navegador.
- Ahora que tiene el ID de la página, deberá cargar el archivo .js en una ubicación. Le recomendamos que cargue el archivo .js en la carpeta de su plantilla, tal vez en el directorio secundario.
- Una vez que haya subido eso, debe tomar nota exactamente del directorio y el nombre del archivo .JS, que usamos en lugar de PATH_TO_JS_FILE a continuación. Como ejemplo, su archivo podría estar en:
https://www.yourwebsite.com/wp-content/themes/twentynineteen/js/myjsfile.js - Tome nota completa de esa URL completa y reemplace el PATH_T_JS_FILE a continuación. También deberá reemplazar la identificación que ha encontrado arriba.
- Agregue el código completo a continuación al final de la funciones archivo de su plantilla.
función collectiveray_load_js_script () {
if (is_page (ID)) {
wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', array ('jquery'), '', falso);
// o use la versión siguiente si sabe exactamente dónde está el archivo
// wp_enqueue_script ('archivo-js', get_template_directory_uri (). '/js/myscript.js');
}
}
add_action ('wp_enqueue_scripts', 'collectiveray_load_js_script ');
Si sabe exactamente dónde ha colocado el archivo JS, puede usar una ligera variación de wp_enqueue_script:
wp_enqueue_script ('archivo-js', get_template_directory_uri (). '/js/myscript.js');
En este caso, el archivo /js/mysript.js es la ubicación del archivo que desea agregar.
Una vez que vuelva a cargar la página, encontrará que se ha agregado el archivo. Puede confirmar esto haciendo clic en Ver código fuente de la página.
Si en lugar de agregar el archivo Javascript a una página, desea agregarlo a una sola página, podemos usar un pequeño ajuste de esta función para que se aplique a una sola publicación. Puede utilizar cualquier variación de lo siguiente:
- is_single ('17') - usa el ID de la publicación
- is_single ('Título de mi publicación') - usa el título de la publicación para verificar si esta es la publicación a la que agregar el archivo
- is_single ('mi-título-post') - cheques contra la babosa del poste
- is_single (array (17, 'my-post-title', 'Mi título de la publicación')) - esto verifica si alguna de las condiciones ID de publicación es "17", slug es "my-post-title" o si el título es "Mi título de publicación"
- es soltera() - otras variaciones de la función is_single usando una matriz de valores para comparar
El código, en este caso, sería el siguiente o una ligera variación en función de los parámetros de la función is_single.
función collectiveray_load_js_script () {
if (is_single ('17 ')) {
wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', array ('jquery'), '', falso);
// o use la versión siguiente si sabe exactamente dónde está el archivo
// wp_enqueue_script ('archivo-js', get_template_directory_uri (). '/js/myscript.js');
}
}
add_action ('wp_enqueue_scripts', 'collectiveray_load_js_script ');
Si tiene el título de la publicación, puede usarlo en lugar del parámetro "17". Una vez más, wp_enqueue_script también se puede modificar para:
wp_enqueue_script ('archivo-js', get_template_directory_uri (). '/js/myscript.js');
3. Agregue JavaScript a todas las páginas
Como hemos visto, el método más fácil y limpio para agregar un archivo javascript a su tema de WordPress es usar functions.php archivo con wp_enqueue_script.
En este caso, en lugar de crear una condición para agregar contenido a páginas específicas, vamos a agregar una función genérica.
He aquí cómo hacerlo:
Abra su functions.php archivo y copie el siguiente fragmento de código. Asegúrese de reemplazar la URL de la plantilla con la suya antes de guardar.
función collectiveray_theme_scripts_function () {
wp_enqueue_script ('archivo-js', get_template_directory_uri (). '/js/myscript.js');
}
add_action ('wp_enqueue_scripts', 'collectiveray_theme_scripts_function ');
Si usted usando un tema hijo, deberá usar get_stylesheet_directory_uri () en lugar de get_template_directory_uri ()
Con este método, no necesita instalar otro complemento si edita su archivo functions.php. Este método también se puede usar para agregar funciones y funciones tanto a su tema como a WordPress. Este enfoque, por ejemplo, puede instalar JavaScript en una sola publicación o página o en todas las páginas.
La principal desventaja de esta estrategia es que requiere que usted se ocupe del código y actualice los archivos de su sitio web. Por ello, si careces de experiencia en este campo, puede que no sea la alternativa ideal.
Haga clic aquí para encontrar expertos baratos en correcciones de WordPress
4. Agregue JavaScript al encabezado de su tema
En ciertos casos, es posible que desee que el archivo JavaScript se use en todo su sitio, pero no desea usar un complemento para hacer esto.
Por ejemplo, si desea agregar una secuencia de comandos de terceros a todas sus páginas (por ejemplo, la secuencia de comandos instantpage.js para hacer que su sitio web sea más rápido), puede insertar la secuencia de comandos o agregar el archivo de secuencia de comandos al que se hace referencia, en el head de tu header.php archivo de plantilla.
ESTO NO ES IDEAL. Si actualiza su tema, es posible que pierda estos cambios. Si aún desea hacer esto directamente, se recomienda encarecidamente que cree un tema secundario.
Para este escenario, donde desea que este script se agregue en todas partes, puede agregar el archivo directamente a la plantilla según las instrucciones a continuación:
Esta llamada al archivo (o script) debe agregarse entre las metaetiquetas y el enlace de la hoja de estilo. Esto es exactamente lo mismo que si estuviera agregando código Javascript en cualquier página HTML.
Para "agregar" el archivo Javascript a su sitio, en el head, usa el siguiente código:
Asegúrese de haber definido el type correctamente, de lo contrario su sitio no será válido. También asegúrese de que el directorio / scripts exista en el tema y que le haya agregado myscript.js.
Luego, puede agregar cualquier referencia a las funciones utilizadas dentro del archivo que acaba de agregar al HTML donde necesita usarlo.
Por ejemplo, este es un ejemplo del uso de la función que acaba de agregar.
" >El título va aquí
4. Usar el gancho wp_head para agregar JavaScript personalizado
También puede agregar JavaScript personalizado a su encabezado usando el wp_head gancho de acción Una vez más, esta solución no es la preferida porque genera una cantidad excesiva de secuencias de comandos. lo es, nuncaless, preferible a insertar manualmente los scripts en su archivo header.php.
Este método, que también se puede usar para el pie de página, utiliza los ganchos de acción para insertar secuencias de comandos en línea en su sitio. A diferencia de la función wp enqueue script, que pone en cola scripts personalizados, el método wp head imprime los scripts en su plantilla de encabezado (y pie de página, si usa el wp_footer gancho).
Para comenzar, navegue a su archivo functions.php y copie y pegue el siguiente código:
función colectivo_personalizado_javascript() { ?>
<?php } add_action('wp_head', 'collective_custom_javascript');
Vale la pena señalar que el gancho de cabeza wp solo funciona en la parte frontal de su sitio web. Esto implica que cualquier JavaScript personalizado agregado a través de este enfoque no aparecerá en las áreas de administración o inicio de sesión. Sin embargo, si desea agregar JavaScript a esas ubicaciones, puede hacerlo utilizando los ganchos de acción del encabezado de administrador y del encabezado de inicio de sesión.
A los desarrolladores les gusta la función wp enqueue script porque evita los conflictos que pueden ocurrir con otras soluciones, como agregar scripts directamente a su archivo header.php. Además, esta solución no genera scripts dependientes.
El principal problema de agregar JavaScript de WordPress personalizado al encabezado de su sitio es que puede interferir con otros complementos que cargan sus propios scripts. Esta configuración también puede hacer que varias secuencias de comandos se carguen varias veces, lo que podría ralentizar la velocidad y el rendimiento general de su sitio web.
5. Agregue JavaScript a su pie de página de WordPress
Agregar JavaScript a su pie de página de WordPress es relativamente simple. Puede agregar código al archivo de encabezado o pie de página, usar un elemento de código personalizado dentro de su creador de páginas o tema o usar un complemento específico de encabezado y pie de página.
Como debe evitar agregar JavaScript a sus archivos header.php o footer.php, usaremos un complemento.
Recomiendo el WPCode: insertar encabezados y pies de página + fragmentos de código personalizados .
Seleccione Ajustes y Insertar encabezados y pies .
Luego pegue su código JavaScript en la sección de pie de página de la página.
Guarde sus cambios cuando haya terminado.
IMH
¿Quieres un sitio web rápido?
¿A quién estoy engañando? ¿No todos?
Entonces, ¿por qué tantos de nosotros luchamos?
El mayor desafío suele ser encontrar una empresa de hosting rápida y confiable.
Todos hemos pasado por pesadillas: la toma de soporte tarda una eternidad o no resuelve nuestro problema, siempre culpando a alguien de su lado...
Pero el mayor fastidio es que el sitio web siempre se siente lento.
At CollectiveRay alojamos con alojamiento InMotion y nuestro sitio web es estúpidamente rápido. Ejecutamos una pila personalizada de la configuración del servidor LightSpeed en MariaDB con un motor PHP7.4 y afrontamos a través de Cloudflare.
En combinación con nuestras optimizaciones de front-end, atendemos de manera confiable a 6000 usuarios todos los días, con picos de más de 50 usuarios simultáneos.
¿Quiere obtener una configuración rápida como la nuestra? Transfiera su sitio de forma gratuita al alojamiento de InMotion y obtenga nuestro 50 % de descuento sobre el precio actual.
6. Agregar JavaScript al video de WordPress
WordPress es tan extensible que le permite agregar fácilmente nuevas características y funcionalidades a su sitio web sin tener que rediseñar o reemplazar todo su tema. En lugar de recrear el tema de WordPress desde cero, puede agregar la funcionalidad simplemente agregando complementos.
Y si la funcionalidad que desea agregar es bastante pequeña y no es necesario crear o instalar un complemento, puede usar el archivo functions.php o varias otras formas de agregar Javascript a WordPress sin tener que crear un complemento por separado.
Lo mejor de la archivo de funciones es que actúa como un complemento, que se puede usar para agregar características y extender la funcionalidad tanto del tema como del propio WordPress.
Aunque puedes agregar fácilmente Código javascript directamente a tu archivo header.php, pero hay un problema con este método.
De hecho, puede causar conflictos con otros complementos cuando cargan sus propios scripts JS.
En este artículo de CollectiveRay, echamos un vistazo a la forma correcta de agregar javascript a los temas de WordPress. Como desarrolladores de WordPress, esta es una de las cosas que tendremos que hacer muy a menudo.
(Nota especial: ¿Está buscando una lista de ajustes / trucos que pueda realizar fácilmente en su sitio de WordPress sin utilizar un complemento? Puede consultar nuestra guía aquí: 101 trucos de WordPress que todo bloguero serio debe saber.)
7. Agregue JavaScript a un widget de WordPress
Si desea agregar algo de JavaScript en un widget de WordPress, no podría ser más fácil.
Agregue un widget, seleccione el menú y seleccione Editar como HTML.
Agregue su JavaScript dentro tags and select Actualizar.
El código que agregó debe ser visible instantáneamente cuando vea el widget en la parte frontal de su sitio.
Cómo depurar un error de JavaScript en una página de WordPress
La depuración de JavaScript es un proceso que requiere mucho tiempo, pero es inevitable para los principiantes.
Afortunadamente, tiene las herramientas a mano para comprobar si hay errores.
Abra una página en su navegador y presione F12 o seleccione Herramientas de desarrollador en el menú (Chrome). También puede usar Ctrl + Shift + J (Windows/Linux) o Cmd + Option + J (Mac).
Seleccione Consola pestaña de la nueva parte de la pantalla que se abre y verá los errores de JavaScript resaltados en rojo.
Identifique de dónde proviene el error y corrija la parte relevante del JavaScript que agregó.
Trabaje hasta que se hayan solucionado todos los errores.
WordPress tiene su propio modo de depuración pero puede ser un poco complicado de usar. Recomendaría revisar el página oficial de depuración para más información.
Preguntas frecuentes sobre agregar Javascript a WordPress
¿Qué es Javascript?
JavaScript es un lenguaje informático que se ejecuta en el navegador del usuario en lugar de en su servidor. La programación del lado del cliente permite a los desarrolladores lograr una variedad de cosas interesantes sin ralentizar su sitio web. Es posible que se le solicite con frecuencia que copie y pegue un fragmento de código JavaScript en su sitio web de WordPress si desea incrustar un reproductor de video, agregar calculadoras o algún otro servicio de terceros.
¿Cómo agrego un archivo Javascript a WordPress?
La forma más fácil de agregar un archivo Javascript a WordPress es usando el complemento Insertar WPCode.
- Inicie sesión en su sitio e instale el complemento WPCode.
- Una vez que se haya instalado, haga clic en Activar
- Guarde su archivo o código JavaScript en un archivo nuevo con la . Js extensión.
- Súbelo a su sitio en la siguiente carpeta: wp-content / themes / / js /
- Vaya a Configuración > Insertar código WP
- Agregue lo siguiente a las secuencias de comandos en el encabezado:
<script src="https://www.website.com/wp-content/themes/<theme-you-are-using>/js/file.js"></script>
¿Puedo usar Javascript en WordPress?
Sí, hay muchas formas de usar Javascript en WordPress. Si desea agregar un script simple, puede usar el complemento Insertar WPCode para agregar el script al encabezado, luego llamar al script desde cualquier parte del tema, publicación o complemento desde el que necesite usarlo.
¿Cómo agrego mi propio código a WordPress?
La mejor manera de agregar su propio código a WordPress es a través del archivo functions.php. Se recomienda que cree un tema hijo y luego agregue sus propias modificaciones al tema hijo para que no interrumpa la capacidad de actualización de su tema.
¿Cómo edito Javascript en WordPress?
La mejor manera de editar Javascript en WordPress es creando un tema hijo, luego agregue sus ediciones de Javascript o personalización de otras funciones en el tema hijo. Esto le permite editar Javascript según sea necesario sin romper el resto de su tema o la capacidad de actualización del tema.
Conclusión
Los tres métodos anteriores son la forma más limpia de agregar Javascript a WordPress. En general, el ajuste directo del código debe ser realizado por usuarios avanzados que tengan una experiencia significativa en el código y puedan estar seguros de que saben cómo revertir cualquier cambio que hayan realizado. De lo contrario, es mejor ceñirse a los complementos. Si no se siente cómodo modificando el código usted mismo, sería genial ponerse en contacto con nuestros socios en Fiverr, quienes pueden hacerlo hoy mismo.
Haga clic aquí para encontrar expertos baratos en correcciones de WordPress
Por favor, deja un eficiente Comente con sus pensamientos, luego comparta esto en su (s) grupo (s) de Facebook que lo encontrarán útil y cosechemos los beneficios juntos. ¡Gracias por compartir y ser amable!
Divulgación: Esta página puede contener enlaces a sitios externos para productos que amamos y recomendamos de todo corazón. Si compra productos que le sugerimos, es posible que ganemos una tarifa de referencia. Tales tarifas no influyen en nuestras recomendaciones y no aceptamos pagos por reseñas positivas.
y muchos más ...