{"id":480,"date":"2018-03-10T17:48:29","date_gmt":"2018-03-10T16:48:29","guid":{"rendered":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/?p=480"},"modified":"2018-03-12T18:52:34","modified_gmt":"2018-03-12T17:52:34","slug":"personalizacion-de-los-sitios-mediante-javascript","status":"publish","type":"post","link":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-javascript\/","title":{"rendered":"Personalizaci\u00f3n del tema mediante JavaScript"},"content":{"rendered":"<h2>1. Procedimiento para a\u00f1adir scripts a los temas de la familia Genesis<\/h2>\n<p>En la <a href=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/los-temas-de-la-familia-genesis-3\/#2Incrustacion_de_scripts_en_la_cabecera_y_el_pie_de_pagina\">sesi\u00f3n anterior del curso<\/a> ya vimos que es posible insertar scripts en los temas de la familia Genesis. Tal como expusimos entonces, los scripts se pueden insertar de dos formas: a nivel global, desde <em>Genesis<\/em> &gt; <em>Configuraci\u00f3n del tema<\/em> &gt; Secci\u00f3n \u00abScripts para la cabecera o el pie de p\u00e1gina\u00bb, o a nivel de cada entrada o p\u00e1gina; en este segundo caso, hay que utilizar el editor de WordPress y a\u00f1adir el script a la caja de metadatos denominada \u00abScripts\u00bb.<!--more--><\/p>\n<h2>2. Un ejemplo de uso<\/h2>\n<p>A continuaci\u00f3n vamos a detallar un sencillo ejemplo de uso de un script programado en\u00a0<a href=\"https:\/\/es.wikipedia.org\/wiki\/JavaScript\" target=\"_blank\" rel=\"noopener\">JavaScript<\/a>, uno de los lenguajes de programaci\u00f3n m\u00e1s \u00fatiles que existen para el desarrollo de sitios web, ya que permite modificar a voluntad el comportamiento del sitio web, integrar recursos y servicios externos, etc. El script, que hemos adaptado ligeramente a partir del publicado en\u00a0<a title=\"Enlace permanente a Poner la fecha automaticamente con Javascript\" href=\"http:\/\/blogandweb.com\/javascript\/poner-la-fecha-automaticamente-con-javascript\/\">Poner la fecha autom\u00e1ticamente con Javascript<\/a>, sirve para insertar en una p\u00e1gina web la fecha actual. El proceso para conseguirlo requiere los siguientes pasos:<\/p>\n<h3>2.1. Inserci\u00f3n del script en el tema hijo de Genesis<\/h3>\n<p>Desde el editor de entradas de WordPress, hemos editado esta entrada, y hemos a\u00f1adido el c\u00f3digo que figura bajo estas l\u00edneas al cuadro de metadatos denominado \u00abScripts\u00bb:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;script language=\"Javascript\"&gt;;\r\n\r\nvar muestra;\r\nfunction makeArray(n){this.length = n;\r\nfor (i=1;i&lt;=n;i++){this[i]=0;}\r\nreturn this;}\r\n\r\nfunction Muestrafecha() {\r\n\r\n\/\/Se declaran los meses\r\nvar meses = new makeArray(12);\r\nmeses[0] = \"enero\";\r\nmeses[1] = \"febrero\";\r\nmeses[2] = \"marzo\";\r\nmeses[3] = \"abril\";\r\nmeses[4] = \"mayo\";\r\nmeses[5] = \"junio\";\r\nmeses[6] = \"julio\";\r\nmeses[7] = \"agosto\";\r\nmeses[8] = \"septiembre\";\r\nmeses[9] = \"octubre\";\r\nmeses[10] = \"noviembre\";\r\nmeses[11] = \"diciembre\";\r\n\r\n\/\/Se declaran los d\u00edas de la semana\r\nvar dias_de_la_semana = new makeArray(7);\r\ndias_de_la_semana[0] = \"domingo\";\r\ndias_de_la_semana[1] = \"lunes\";\r\ndias_de_la_semana[2] = \"martes\";\r\ndias_de_la_semana[3] = \"mi\u00e9rcoles\";\r\ndias_de_la_semana[4] = \"jueves\";\r\ndias_de_la_semana[5] = \"viernes\";\r\ndias_de_la_semana[6] = \"s\u00e1bado\";\r\n\r\nvar today = new Date();\r\nvar day = today.getDate();\r\nvar month = today.getMonth();\r\nvar year = today.getYear();\r\nvar dia = today.getDay();\r\nif (year &lt; 1000) {year += 1900; }\r\n\r\n\/\/ Se muestra la fecha, dentro de una caja de texto de color verde\r\nreturn( \"&lt;p class='caja-texto-verde'&gt;Hoy es \" + dias_de_la_semana[dia] + \", \" + day + \" de \" + meses[month] + \" de \" + year)+\"&lt;\/p&gt;\";\r\n}\r\n&lt;\/script&gt;<\/pre>\n<h3>2. Llamada al script desde la entrada o desde un widget<\/h3>\n<p>Posteriormente, hemos llamado a este c\u00f3digo JavaScript insertando en el editor de WordPress, mediante la pesta\u00f1a HTML (esto es muy importante, porque de otro modo no funciona), estas tres l\u00edneas, que invocan la funci\u00f3n definida en el fragmento de c\u00f3digo precedente:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;script type=\"text\/javascript\" language=\"JavaScript\"&gt;\r\ndocument.write (Muestrafecha());\r\n&lt;\/script&gt;<\/pre>\n<p>Si se considera conveniente, tambi\u00e9n se puede llamar al script desde un widget. La forma m\u00e1s sencilla de hacerlo es crear un widget de HTML personalizado, y copiar en \u00e9l las tres l\u00edneas de c\u00f3digo que acabamos de indicar. El resultado puede verse en el widget que aparece al final de la barra lateral derecha de esta misma entrada.<\/p>\n<h3>3. Declaraci\u00f3n de una clase de estilos para mejorar la apariencia<\/h3>\n<p>Con el objetivo de mejorar la apariencia final del texto de fecha, hemos definido un estilo CSS personalizado, basado en los que se explican en\u00a0<a href=\"https:\/\/www.studiopress.com\/colored-content-boxes-buttons\/\" target=\"_blank\" rel=\"noopener\">Spruce Up Your Genesis-Powered Website with Content Boxes and Color Buttons<\/a>., y lo hemos a\u00f1adido, tal como <a href=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-css\/\">acabamos de ver en el art\u00edculo anterior<\/a>, desde el personalizador de temas de WordPress. El resultado es el siguiente:<\/p>\n<h2><script type=\"text\/javascript\" language=\"JavaScript\">\ndocument.write (Muestrafecha());\n<\/script><br \/>\n3. Alternativa de uso global para el script<\/h2>\n<p>Si en lugar de declarar este script en la entrada actual lo hubi\u00e9ramos hecho desde el men\u00fa <em>Genesis<\/em> &gt; <em>Configuraci\u00f3n del tema<\/em> &gt; Secci\u00f3n \u00abScripts para la cabecera o el pie de p\u00e1gina\u00bb, habr\u00edamos podido llamarlo desde cualquier lugar del sitio web. Por ejemplo, mediante un widget situado en la parte superior de la barra lateral, de forma que la fecha del d\u00eda pudiera aparecer en todas y cada una de las p\u00e1ginas del sitio. Animamos a los alumnos y alumnas del curso para que experimenten con esta alternativa.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Uso de la funci\u00f3n del framework Genesis para insertar scripts personalizados en las entradas o p\u00e1ginas del sitio web.<\/p>\n","protected":false},"author":1,"featured_media":488,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"content-sidebar"},"categories":[7],"tags":[102,125,124,126],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Personalizaci\u00f3n del tema mediante JavaScript - Curso de WordPress 2018<\/title>\n<meta name=\"description\" content=\"Personalizaci\u00f3n del tema mediante JavaScript. Uso de la funci\u00f3n del framework Genesis para insertar scripts personalizados en las entradas o p\u00e1ginas del sitio web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Personalizaci\u00f3n del tema mediante JavaScript - Curso de WordPress 2018\" \/>\n<meta property=\"og:description\" content=\"Personalizaci\u00f3n del tema mediante JavaScript. Uso de la funci\u00f3n del framework Genesis para insertar scripts personalizados en las entradas o p\u00e1ginas del sitio web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Curso de WordPress 2018\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-10T16:48:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-03-12T17:52:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-content\/uploads\/2018\/03\/codigo-javascript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1067\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Administrador\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Administrador\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-javascript\/\",\"url\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-javascript\/\",\"name\":\"Personalizaci\u00f3n del tema mediante JavaScript - Curso de WordPress 2018\",\"isPartOf\":{\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#website\"},\"datePublished\":\"2018-03-10T16:48:29+00:00\",\"dateModified\":\"2018-03-12T17:52:34+00:00\",\"author\":{\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#\/schema\/person\/66915292b50e141a7c1d01acb5eb0f84\"},\"description\":\"Personalizaci\u00f3n del tema mediante JavaScript. Uso de la funci\u00f3n del framework Genesis para insertar scripts personalizados en las entradas o p\u00e1ginas del sitio web.\",\"breadcrumb\":{\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-javascript\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Personalizaci\u00f3n del tema mediante JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#website\",\"url\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/\",\"name\":\"Curso de WordPress 2018\",\"description\":\"Curso avanzado sobre WordPress en el CAP de Pamplona\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#\/schema\/person\/66915292b50e141a7c1d01acb5eb0f84\",\"name\":\"Administrador\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/636dfeeef5d663d0784baecccc697b02?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/636dfeeef5d663d0784baecccc697b02?s=96&d=identicon&r=g\",\"caption\":\"Administrador\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Personalizaci\u00f3n del tema mediante JavaScript - Curso de WordPress 2018","description":"Personalizaci\u00f3n del tema mediante JavaScript. Uso de la funci\u00f3n del framework Genesis para insertar scripts personalizados en las entradas o p\u00e1ginas del sitio web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-javascript\/","og_locale":"es_ES","og_type":"article","og_title":"Personalizaci\u00f3n del tema mediante JavaScript - Curso de WordPress 2018","og_description":"Personalizaci\u00f3n del tema mediante JavaScript. Uso de la funci\u00f3n del framework Genesis para insertar scripts personalizados en las entradas o p\u00e1ginas del sitio web.","og_url":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-javascript\/","og_site_name":"Curso de WordPress 2018","article_published_time":"2018-03-10T16:48:29+00:00","article_modified_time":"2018-03-12T17:52:34+00:00","og_image":[{"width":1600,"height":1067,"url":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-content\/uploads\/2018\/03\/codigo-javascript.jpg","type":"image\/jpeg"}],"author":"Administrador","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Administrador","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-javascript\/","url":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-javascript\/","name":"Personalizaci\u00f3n del tema mediante JavaScript - Curso de WordPress 2018","isPartOf":{"@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#website"},"datePublished":"2018-03-10T16:48:29+00:00","dateModified":"2018-03-12T17:52:34+00:00","author":{"@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#\/schema\/person\/66915292b50e141a7c1d01acb5eb0f84"},"description":"Personalizaci\u00f3n del tema mediante JavaScript. Uso de la funci\u00f3n del framework Genesis para insertar scripts personalizados en las entradas o p\u00e1ginas del sitio web.","breadcrumb":{"@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-javascript\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/"},{"@type":"ListItem","position":2,"name":"Personalizaci\u00f3n del tema mediante JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#website","url":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/","name":"Curso de WordPress 2018","description":"Curso avanzado sobre WordPress en el CAP de Pamplona","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#\/schema\/person\/66915292b50e141a7c1d01acb5eb0f84","name":"Administrador","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/636dfeeef5d663d0784baecccc697b02?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/636dfeeef5d663d0784baecccc697b02?s=96&d=identicon&r=g","caption":"Administrador"}}]}},"_links":{"self":[{"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/posts\/480"}],"collection":[{"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/comments?post=480"}],"version-history":[{"count":0,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/posts\/480\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/media\/488"}],"wp:attachment":[{"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/media?parent=480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/categories?post=480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/tags?post=480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}