Anonim

Como afirma la comunidad líder de CMS, el 25% de Internet usa WordPress. Al ver las tendencias, no tenemos más opción que creerlas, casi cada blog y cada sitio parece estar usando aparentemente el CMS más potente y fácil de usar. En espera de esto, las personas y los desarrolladores han comenzado a cambiar sus sitios a la Plataforma WordPress.

En este esfuerzo por transformar su sitio web dulce y simple en un sitio CMS complejo y de alto rendimiento, las personas se estancan en un paso muy básico y hacen la pregunta: Por amor, ¿cómo obtengo este archivo externo JavaScript (.js) trabajando en este tema de WordPress? ¿Eres tú también el que hace la misma pregunta? Bueno amigos, finalmente estás en el lugar correcto: ¡estoy aquí para guiarte paso a paso a través de la forma más simple posible para lograr esta tarea!

Ahora, suponiendo que tenga todo WordPress instalado y encendido con JS externo listo, ¡comencemos la tarea de incluir el archivo!

Nota: Estoy usando el siguiente archivo (testrun.js) para este tutorial y el tema en el que estoy trabajando es Twenty Sixteen de WordPress .

alerta ('Hola');

¡Vamos a empezar!

Todos los scripts y hojas de estilo se cargan desde functions.php . Esta es la forma correcta de cargarlos dentro de WordPress para evitar conflictos con otros scripts que se carguen ya sea por WordPress o por los complementos que se estén utilizando. Si deja que WordPress administre todos los archivos incluidos, debe informarle que desea que este archivo se incluya en la parte del encabezado (inicio) o pie de página (final). Cada plantilla / tema tiene sus propias funciones.php, por lo que sería difícil generalizar el nombre exacto de las funciones que incluye todos los archivos que se incluirán. Como tomo veintiséis como tema, a continuación se muestra una instantánea de cómo funciona mis functions.php (utilizado para incluir archivos). Hasta cierto punto, el tuyo debería parecerse a esto:

La función wp_enqueue_script vincula un archivo de script a la página generada en el momento adecuado de acuerdo con las dependencias del script, si el script no se ha incluido ya y si todas las dependencias se han registrado. Puede vincular un script con un identificador previamente registrado utilizando la función wp_register_script (), o proporcionar a esta función todos los parámetros necesarios para vincular un script.

El wp_enqueue_script ($ handle, $ src, $ deps, $ ver, $ in_footer) incluye los siguientes parámetros:

$ manejar

(cadena) (Obligatorio) Nombre del script.

$ src

(string | bool) (Opcional) Ruta al script desde el directorio raíz de WordPress. Ejemplo: '/js/myscript.js'.

Valor predeterminado: falso

$ deps

(matriz) (Opcional) Una matriz de controladores registrados de los que depende este script.

Valor predeterminado: array ()

$ ver

(string | bool) (Opcional) Cadena que especifica el número de versión del script, si tiene uno. Este parámetro se utiliza para garantizar que se envíe la versión correcta al cliente, independientemente del almacenamiento en caché, por lo que debe incluirse si hay un número de versión disponible y tiene sentido para el script.

Valor predeterminado: falso

$ in_footer

(bool) (Opcional) Si se debe poner en cola el script antes o antes . Predeterminado 'falso'. Acepta 'falso' o 'verdadero'.

Valor predeterminado: falso

Puede ignorar la función wp_register_script () para este tutorial. Nuestro propósito es incluir solo un JS externo. ¡Debería funcionar bien sin él!

Por lo tanto, si quiero nombrar mi script como "prueba", recuerde que este parámetro ($ handle) NO necesariamente es el nombre del archivo real, y mi archivo tiene una dependencia externa sobre jquery y la versión es 1.0 y se carga antes de que se cargue la página entonces mi función se vería así:

wp_enqueue_script ('tutorial', get_template_directory_uri (). '/js/testrun.js', array ('jquery'), '1.0', falso);

Si se da cuenta, he usado get_template_directory_uri (), entonces, la cadena concatenada después de la función, que es " /js/testrun.js " es en realidad la ruta del archivo wrt el archivo índice de la plantilla .

Entonces su atributo $ src, que es la fuente de su archivo js, ​​se convierte en: get_template_directory_uri (). 'Path_to_js_wrt_index_of_template'.

Por lo tanto, el final functions.php se ve así:

Aguanta ahí, ¡casi terminamos! Simplemente guarde esto ahora y presione actualizar en su sitio web … ¡debería ver el JS funcionando! Aquí esta el mio:

Como configuramos la opción $ in_footer en false, el script se carga antes de que se cargue la página, pero después de que se cargue JQuery, ya que se agregó como una dependencia.

¡Y voilá! Aquí tienes … ¡Has incluido con éxito un archivo JS personalizado externo en tu tema WP!

Feliz codificación !!

Referencia: Función Enqueue: WordPress Codex

¿Cuál es la mejor manera de agregar js externos personalizados en WordPress?