{"id":5792,"date":"2021-10-06T11:20:17","date_gmt":"2021-10-06T17:20:17","guid":{"rendered":"https:\/\/ugit.siua.ac.cr\/?p=5792"},"modified":"2021-10-06T13:56:32","modified_gmt":"2021-10-06T19:56:32","slug":"wordpress-agregar-js-a-thema-blocksy","status":"publish","type":"post","link":"https:\/\/sada.services\/?p=5792","title":{"rendered":"WordPress: Agregar JS a Thema Blocksy"},"content":{"rendered":"\n<ul class=\"wp-block-list\"><li>Para agregar archivo para incorporar JS a una sitios WordPress<\/li><li>Primero aqu\u00ed estamos utilizando la plantilla libre Blocksy <a rel=\"noreferrer noopener\" href=\"https:\/\/creativethemes.com\/blocksy\/\" target=\"_blank\">https:\/\/creativethemes.com\/blocksy\/<\/a><\/li><li>Primero ingresamos a men\u00fa prnicipal-&gt;Apariencia-&gt;Editor de temas<\/li><li>Buscamos: functions.php (Para el tema blocksy)  Theme Functions<\/li><li>Y vamos agregar el siguiente c\u00f3digo<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**********************************************************\/\n\/**************  ugit_blocksy_insertar_js  ****************\/\n\/**********************************************************\/\nadd_action(\"wp_enqueue_scripts\", \"ugit_blocksy_insertar_js\");\n\nfunction ugit_blocksy_insertar_js(){\n    console.log(get_stylesheet_directory_uri());\n    wp_register_script('ugit_blocksy', get_stylesheet_directory_uri(). '\/js\/ugit_blocksy.js', array('jquery'), '1', true );\n    wp_enqueue_script('ugit_blocksy');\n    \n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>En donde:<\/li><li>add_action<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>add_action(\"wp_enqueue_scripts\", \"ugit_blocksy_insertar_js\");<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>add_actyion usa el Hook&nbsp;<strong>wp_enqueue_scripts<\/strong> el cual ejecutar\u00e1 la funci\u00f3n <strong>\u00abugit_blocksy_insertar_js\u00bb<\/strong> posterior a codificar.<\/li><li>La funci\u00f3n <strong>wp_register_script<\/strong> permite registrar el script<ul><li>El primer par\u00e1metro es el manejador o ID, lo usamos para poner en cola el script, para desregistralo, o para marcar dependencia.<\/li><\/ul><ul><li>El segundo par\u00e1metro es la ruta en donde esta el archivo script.js, usaremos una funci\u00f3n&nbsp;<strong>get_template_directory()<\/strong>&nbsp;de WordPress para encontrar la url completa.<\/li><li>El tercer par\u00e1metro 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\u00eda&nbsp;<strong>jQuery<\/strong>&nbsp;por que posiblemente usaremos algunas funciones de jQuery dentro.<\/li><li>El cuarto par\u00e1metro es la versi\u00f3n, esto se concatenar\u00e1 a la url en el c\u00f3digo HTML, es muy \u00fatil cuando actualizamos nuestro script para que el navegador no mantenga en cache la versi\u00f3n anterior.<\/li><li>El par\u00e1metro final es un&nbsp;<strong>booleano<\/strong>, indica si el script se insertar\u00e1 en la parte superior como parte del header o en la parte final del c\u00f3digo luego del body, esto es muy \u00fatil para optimizaci\u00f3n, google recomienda insertar los scripts siempre al final (valor true).<\/li><\/ul><\/li><li>La funci\u00f3n&nbsp;<strong>wp_enqueue_script<\/strong>&nbsp;sirve para poner en cola el script, es en esta funci\u00f3n en donde realmente el script ser\u00e1 mostrado en el front-end del sitio, usa como par\u00e1metro el manejador o ID definido en el regis<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Ahora en el servidor ingresamos al directorio del tema<strong> Blocksy<\/strong> <\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>cd \/var\/www\/html\/Sitios\/siua.ac.cr\/wp-content\/themes\/blocksy<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Creamos un directorio \u00abjs\u00bb<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>mkdir js<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>y creamos el archivo <strong>\u00abugit_blocksy.js\u00bb<\/strong><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>touch js\/ugit_blocksy.js<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Le cambiamos de due\u00f1o <\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>chown -R ugitftpsiua:ftp js\/<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Le damos permisos<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>chmod 777 -R js<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Y con esto ya podemos crear funciones JS<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"423\" src=\"\/wp-content\/uploads\/2021\/10\/Seleccion_021-1024x423.png\" alt=\"\" class=\"wp-image-5794\" srcset=\"https:\/\/sada.services\/wp-content\/uploads\/2021\/10\/Seleccion_021-1024x423.png 1024w, https:\/\/sada.services\/wp-content\/uploads\/2021\/10\/Seleccion_021-300x124.png 300w, https:\/\/sada.services\/wp-content\/uploads\/2021\/10\/Seleccion_021-768x317.png 768w, https:\/\/sada.services\/wp-content\/uploads\/2021\/10\/Seleccion_021-1536x634.png 1536w, https:\/\/sada.services\/wp-content\/uploads\/2021\/10\/Seleccion_021.png 1894w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Ya podemos crear una funci\u00f3n dentro del archivo <\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>function plan_estudios_remarcar(id_elemento){\n\tconsole.log(\"entro\");\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Y agregar un elemento<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a onclick=\"plan_estudios_remarcar('MAT001');\">MAT001&lt;\/a><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Y ver como funciona<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1012\" height=\"497\" src=\"\/wp-content\/uploads\/2021\/10\/Seleccion_022.png\" alt=\"\" class=\"wp-image-5798\" srcset=\"https:\/\/sada.services\/wp-content\/uploads\/2021\/10\/Seleccion_022.png 1012w, https:\/\/sada.services\/wp-content\/uploads\/2021\/10\/Seleccion_022-300x147.png 300w, https:\/\/sada.services\/wp-content\/uploads\/2021\/10\/Seleccion_022-768x377.png 768w\" sizes=\"(max-width: 1012px) 100vw, 1012px\" \/><figcaption>investiga como crear JS dentro de un p\u00e1gina WordPress<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Para nuestro ejemplo vamos hacer una funci\u00f3n dentro de la p\u00e1gina https:\/\/siua.ac.cr dentro del plan de estudios para cuando un curso tenga requisitos se pueda hacer clic en el c\u00f3digo del curso y lo lleve a la informaci\u00f3n del curso.<\/li><li>Ejemplo:<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"424\" src=\"\/wp-content\/uploads\/2021\/10\/Seleccion_023-1024x424.png\" alt=\"\" class=\"wp-image-5800\" srcset=\"https:\/\/sada.services\/wp-content\/uploads\/2021\/10\/Seleccion_023-1024x424.png 1024w, https:\/\/sada.services\/wp-content\/uploads\/2021\/10\/Seleccion_023-300x124.png 300w, https:\/\/sada.services\/wp-content\/uploads\/2021\/10\/Seleccion_023-768x318.png 768w, https:\/\/sada.services\/wp-content\/uploads\/2021\/10\/Seleccion_023.png 1248w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Marca el texto<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"328\" src=\"\/wp-content\/uploads\/2021\/10\/Seleccion_024-1024x328.png\" alt=\"\" class=\"wp-image-5801\" srcset=\"https:\/\/sada.services\/wp-content\/uploads\/2021\/10\/Seleccion_024-1024x328.png 1024w, https:\/\/sada.services\/wp-content\/uploads\/2021\/10\/Seleccion_024-300x96.png 300w, https:\/\/sada.services\/wp-content\/uploads\/2021\/10\/Seleccion_024-768x246.png 768w, https:\/\/sada.services\/wp-content\/uploads\/2021\/10\/Seleccion_024.png 1295w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>C\u00f3digo JS<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/***************************************************************************\/\n\/***************** plan_estudios_remarcar **********************************\/\n\/***************************************************************************\/\n\/*\n * Ubicaci\u00f3n: Se utiliza en los planes de estudios\n * Funci\u00f3n: marcar el curso invocado y remarcarlo \n * \n *\/\nfunction plan_estudios_remarcar(id_elemento){\n\t\n\tvar cursos = document.getElementsByName(\"cursos&#91;]\");\n\tfor (var i = 0; i &lt; cursos.length; i++) {\n          console.log(cursos&#91;i]);\n          cursos&#91;i].parentNode.parentNode.style.backgroundColor = \"#E8EDF2\";\n\t\t  cursos&#91;i].style.color = \"#5F6E80\";\n\t\t\n    }\n\t\n\tdocument.getElementById(id_elemento).parentNode.parentNode.style.backgroundColor = \"#2BA0AB\";\n\tdocument.getElementById(id_elemento).style.color = \"#FFF\";\n\t\n\twindow.location.href = \"#\"+id_elemento;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Agregar archivo para incorporar JS a una sitio Wordpress<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[181],"tags":[344,345,182],"class_list":["post-5792","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-blocksy","tag-js","tag-wordpress"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/sada.services\/index.php?rest_route=\/wp\/v2\/posts\/5792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sada.services\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sada.services\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sada.services\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sada.services\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5792"}],"version-history":[{"count":6,"href":"https:\/\/sada.services\/index.php?rest_route=\/wp\/v2\/posts\/5792\/revisions"}],"predecessor-version":[{"id":5802,"href":"https:\/\/sada.services\/index.php?rest_route=\/wp\/v2\/posts\/5792\/revisions\/5802"}],"wp:attachment":[{"href":"https:\/\/sada.services\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sada.services\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sada.services\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}