WordPress: Agregar JS a Thema Blocksy

Agregar archivo para incorporar JS a una sitio Wordpress
  • Para agregar archivo para incorporar JS a una sitios WordPress
  • Primero aquí estamos utilizando la plantilla libre Blocksy https://creativethemes.com/blocksy/
  • Primero ingresamos a menú prnicipal->Apariencia->Editor de temas
  • Buscamos: functions.php (Para el tema blocksy) Theme Functions
  • Y vamos agregar el siguiente código
/**********************************************************/
/**************  ugit_blocksy_insertar_js  ****************/
/**********************************************************/
add_action("wp_enqueue_scripts", "ugit_blocksy_insertar_js");

function ugit_blocksy_insertar_js(){
    console.log(get_stylesheet_directory_uri());
    wp_register_script('ugit_blocksy', get_stylesheet_directory_uri(). '/js/ugit_blocksy.js', array('jquery'), '1', true );
    wp_enqueue_script('ugit_blocksy');
    
}
  • En donde:
  • add_action
add_action("wp_enqueue_scripts", "ugit_blocksy_insertar_js");
  • add_actyion usa el Hook wp_enqueue_scripts el cual ejecutará la función “ugit_blocksy_insertar_js” posterior a codificar.
  • La función wp_register_script permite registrar el script
    • El primer parámetro es el manejador o ID, lo usamos para poner en cola el script, para desregistralo, o para marcar dependencia.
    • El segundo parámetro es la ruta en donde esta el archivo script.js, usaremos una función get_template_directory() de WordPress para encontrar la url completa.
    • El tercer parámetro es un array y se usa para definir las dependencias, en nuestro caso es dependiente del manejador o ID jquery, quiere decire que nuestro script se debe cargar luego de la librería jQuery por que posiblemente usaremos algunas funciones de jQuery dentro.
    • El cuarto parámetro es la versión, esto se concatenará a la url en el código HTML, es muy útil cuando actualizamos nuestro script para que el navegador no mantenga en cache la versión anterior.
    • El parámetro final es un booleano, indica si el script se insertará en la parte superior como parte del header o en la parte final del código luego del body, esto es muy útil para optimización, google recomienda insertar los scripts siempre al final (valor true).
  • La función wp_enqueue_script sirve para poner en cola el script, es en esta función en donde realmente el script será mostrado en el front-end del sitio, usa como parámetro el manejador o ID definido en el regis
  • Ahora en el servidor ingresamos al directorio del tema Blocksy
cd /var/www/html/Sitios/siua.ac.cr/wp-content/themes/blocksy
  • Creamos un directorio “js”
mkdir js
  • y creamos el archivo “ugit_blocksy.js”
touch js/ugit_blocksy.js
  • Le cambiamos de dueño
chown -R ugitftpsiua:ftp js/
  • Le damos permisos
chmod 777 -R js
  • Y con esto ya podemos crear funciones JS
  • Ya podemos crear una función dentro del archivo
function plan_estudios_remarcar(id_elemento){
	console.log("entro");
}
  • Y agregar un elemento
<a onclick="plan_estudios_remarcar('MAT001');">MAT001</a>
  • Y ver como funciona
investiga como crear JS dentro de un página WordPress
  • Para nuestro ejemplo vamos hacer una función dentro de la página https://siua.ac.cr dentro del plan de estudios para cuando un curso tenga requisitos se pueda hacer clic en el código del curso y lo lleve a la información del curso.
  • Ejemplo:
  • Marca el texto
  • Código JS
/***************************************************************************/
/***************** plan_estudios_remarcar **********************************/
/***************************************************************************/
/*
 * Ubicación: Se utiliza en los planes de estudios
 * Función: marcar el curso invocado y remarcarlo 
 * 
 */
function plan_estudios_remarcar(id_elemento){
	
	var cursos = document.getElementsByName("cursos[]");
	for (var i = 0; i < cursos.length; i++) {
          console.log(cursos[i]);
          cursos[i].parentNode.parentNode.style.backgroundColor = "#E8EDF2";
		  cursos[i].style.color = "#5F6E80";
		
    }
	
	document.getElementById(id_elemento).parentNode.parentNode.style.backgroundColor = "#2BA0AB";
	document.getElementById(id_elemento).style.color = "#FFF";
	
	window.location.href = "#"+id_elemento;
}