WordPress: Agregar JS a Thema Blocksy

• 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

• 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;
}