{"id":4891,"date":"2012-04-27T09:11:17","date_gmt":"2012-04-27T09:11:17","guid":{"rendered":"http:\/\/www.apprentalonline.es\/blog\/?p=1869"},"modified":"2012-04-27T09:11:17","modified_gmt":"2012-04-27T09:11:17","slug":"la-parte-de-atras-de-joomla-plantillas-i","status":"publish","type":"post","link":"https:\/\/www.k3bone.com\/blog\/2012\/04\/la-parte-de-atras-de-joomla-plantillas-i\/","title":{"rendered":"La parte de atr\u00e1s de Joomla! &#8211; Plantillas I"},"content":{"rendered":"<p><a href=\"https:\/\/www.k3bone.com\/blog\/wp-content\/uploads\/2012\/04\/03_template_style.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1896\" title=\"Templates Joomla!\" src=\"https:\/\/www.k3bone.com\/blog\/wp-content\/uploads\/2012\/04\/03_template_style.jpg\" alt=\"\" width=\"940\" height=\"281\" \/><\/a><\/p>\n<p><strong>Joomla!<\/strong> da la opci\u00f3n de que en cualquier momento puedas darle a tu web un aspecto de Web Corporativa y en s\u00f3lo un clic darle aspecto de portafolio, de eso se trata el <strong>sistema de plantillas de Joomla!<\/strong><\/p>\n<p>Ya que Joomla! se trata de un sistema modular, si hablamos de plantillas tambi\u00e9n funciona de la misma manera y es que puedes usar una plantilla para una parte de la web y una plantilla distinta para otra parte de la misma.<\/p>\n<p>Como v\u00e9is son todo facilidades, pero vamos a entender un poco los <strong>aspectos b\u00e1sicos de una plantilla en Joomla!<\/strong>.<\/p>\n<h2>Estructura de las plantillas Joomla!<\/h2>\n<p>Una plantilla en joomla! tiene una serie de archivos b\u00e1sicos que tenemos que conocer:<\/p>\n<ul>\n<li><strong>Index.html<\/strong>: A\u00f1ade seguridad a las carpetas. Es un archivo vac\u00edo.<\/li>\n<li><strong>Index.php<\/strong>: Contiene el HTML que define la estructura de la plantilla y las llamadas PHP a la <strong>API de Joomla!<\/strong>.<\/li>\n<li><strong>params.ini<\/strong>: Guarda los par\u00e1metros personalizables desde el administrador.<\/li>\n<li><strong>template.css<\/strong>: Hoja de estilo para manipular la visualizaci\u00f3n de los datos.<\/li>\n<li><strong>templateDetails.xml<\/strong>: Es un archivo esencial, donde hay informaci\u00f3n de instalaci\u00f3n y datos de backend.<\/li>\n<li><strong>template_thumbnail.png<\/strong>: Imagen en minuatura de la plantilla que nos servir\u00e1 para previsualizarla en el \u00abGestor de plantillas\u00bb dentro de la parte de administraci\u00f3n.<\/li>\n<li><strong>images<\/strong>: Carpeta con las im\u00e1genes que utilizamos en la plantilla.<\/li>\n<li><strong>html<\/strong>: Vistas personalizadas para distintos m\u00f3dulos y componentes.<\/li>\n<\/ul>\n<p>Por lo tanto la estructura f\u00edsica de una plantilla Joomla! quedar\u00eda de la siguiente manera:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/img14.imageshack.us\/img14\/9406\/estructuraplantilla.png\" alt=\"Estructura f\u00edsica de Joomla!\" \/><\/p>\n<h2>El archivo templateDetails.xml en Joomla!<\/h2>\n<p>Es el archivo \u00abinstalador\u00bb de una plantilla en Joomla! adem\u00e1s de utilizarlo para mostrarla en el \u00abGestor de Plantillas\u00bb de la parte de administraci\u00f3n donde finalmente podremos activarla. Es importante que se respete el nombre del archivo para que funcione correctamente la plantilla, es decir, todo en min\u00fasculas y la \u00abD\u00bb de en medio en mayusculas.<\/p>\n<p>El archivo tiene varias partes en su c\u00f3digo que me gustar\u00eda comentar y est\u00e1n divididos en 4 partes:<\/p>\n<ul>\n<li><strong>Datos<\/strong><\/li>\n<li><strong>Archivos<\/strong><\/li>\n<li><strong>Posiciones<\/strong><\/li>\n<li><strong>Par\u00e1metros<\/strong><\/li>\n<\/ul>\n<p>Vamos a detallar cada uma de las partes.<\/p>\n<h4>DATOS: Cabecera del documento. Tipo de documento<\/h4>\n<p>Es importante especificar el tipo de docuemento al igual que lo hacemos para nuestros archivos HTML.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;\n&lt;!DOCTYPE install PUBLIC &quot;-\/\/Joomla! 2.5\/\/DTD template 1.0\/\/EN&quot; &quot;http:\/\/www.joomla.org\/xml\/dtd\/1.6\/template-install.dtd&quot;&gt;\n<\/pre>\n<p><strong>L\u00ednea 1<\/strong>: Versi\u00f3n de XML y tipo de codificaci\u00f3n que emplearemos<br \/>\n<strong>L\u00ednea 2<\/strong>: Tipo de documento y donde se localiza el DTD que es la definici\u00f3n de tipo de documento que define la estructura y las restricci\u00f3n de este XML y as\u00ed mantener una misma estructura con los documentos del mismo tipo.<\/p>\n<h4>DATOS 2: Informaci\u00f3n de la plantilla<\/h4>\n<p>Vamos a dotar a la plantilla de informaci\u00f3n tanto de contacto con el autor como de su versi\u00f3n o fecha de creaci\u00f3n:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;extension version=&quot;2.5&quot; type=&quot;template&quot; client=&quot;site&quot;&gt;\n\t&lt;name&gt;beez_20&lt;\/name&gt;\n\t&lt;creationDate&gt;25 November 2009&lt;\/creationDate&gt;\n\t&lt;author&gt;Angie Radtke&lt;\/author&gt;\n\t&lt;authorEmail&gt;a.radtke@derauftritt.de&lt;\/authorEmail&gt;\n\t&lt;authorUrl&gt;http:\/\/www.der-auftritt.de&lt;\/authorUrl&gt;\n\t&lt;copyright&gt;Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.&lt;\/copyright&gt;\n\t&lt;license&gt;GNU General Public License version 2 or later; see LICENSE.txt&lt;\/license&gt;\n\t&lt;version&gt;2.5.0&lt;\/version&gt;\n\t&lt;description&gt;TPL_BEEZ2_XML_DESCRIPTION&lt;\/description&gt;\n<\/pre>\n<p><strong>Name<\/strong>: El nombre de la plantilla<br \/>\n<strong>creationDate<\/strong>: La fecha de creaci\u00f3n<br \/>\n<strong>author<\/strong>: El autor de la plantilla<br \/>\n<strong>authorEmail<\/strong>: Correo electr\u00f3nico del autor<br \/>\n<strong>authorURL<\/strong>: P\u00e1gina web del autor<br \/>\n<strong>copyright<\/strong>: Esto es un poco libre, por ejemplo podriamos poner 2012 Colorate Blog\u00bb.<br \/>\n<strong>license<\/strong>: Que podria ser GNU\/GPL por ejemplo.<br \/>\n<strong>version<\/strong>: Versi\u00f3n de la plantilla.<br \/>\n<strong>description<\/strong>: Una breve descrpci\u00f3n.<\/p>\n<h4>ARCHIVOS: Detallamos los archivos que contiene la plantilla<\/h4>\n<p>Una parte, muy importante, del archivo es la etiqueta \u00ab<em>files<\/em>\u00bb que informar\u00e1 a Joomla! donde se encuentran nuestros archivos (Archivos PHP, Css, im\u00e1genes, etc..) y cada uno de ellos hay que englobarlo entre las etiquetas \u00ab<em>filename<\/em>\u00ab. En caso de estar en carpetas o subcarpetas, tendremos que indicarle la ruta relativa. Aqu\u00ed un ejemplo:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n\t&lt;files&gt;\n\t\t&lt;folder&gt;css&lt;\/folder&gt;\n\t\t&lt;folder&gt;html&lt;\/folder&gt;\n\t\t&lt;folder&gt;images&lt;\/folder&gt;\n\t\t&lt;folder&gt;javascript&lt;\/folder&gt;\n\t\t&lt;folder&gt;fonts&lt;\/folder&gt;\n\t\t&lt;folder&gt;language&lt;\/folder&gt;\n\t\t&lt;filename&gt;index.html&lt;\/filename&gt;\n\t\t&lt;filename&gt;index.php&lt;\/filename&gt;\n\t\t&lt;filename&gt;templateDetails.xml&lt;\/filename&gt;\n\t\t&lt;filename&gt;template_preview.png&lt;\/filename&gt;\n\t\t&lt;filename&gt;template_thumbnail.png&lt;\/filename&gt;\n\t\t&lt;filename&gt;favicon.ico&lt;\/filename&gt;\n\t\t&lt;filename&gt;component.php&lt;\/filename&gt;\n\t\t&lt;filename&gt;error.php&lt;\/filename&gt;\n\t&lt;\/files&gt;\n\n<\/pre>\n<blockquote><p><strong>Nota<\/strong>: Si nos olvidamos de incluir alg\u00fan archivo, aunque lo incluyamos en un ZIP para subirlo a nuestro sitio web, no los utilizar\u00eda.<\/p><\/blockquote>\n<p>Como v\u00e9is en el c\u00f3digo de ejemplo tenemos dos etiquetas que seguro reconoc\u00e9is perfectamente. Folder, para informar las carpetas y File, para informar archivos.<\/p>\n<h4>POSICIONES en Joomla!<\/h4>\n<p>Hay que decirle a Joomla! de alguna manera las posiciones que va a tener la plantilla para mostrar el contenido.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n\t&lt;positions&gt;\n\t\t&lt;position&gt;debug&lt;\/position&gt;\n\t\t&lt;position&gt;position-0&lt;\/position&gt;\n\t\t&lt;position&gt;position-1&lt;\/position&gt;\n\t\t&lt;position&gt;position-2&lt;\/position&gt;\n\t\t&lt;position&gt;position-3&lt;\/position&gt;\n\t\t&lt;position&gt;position-4&lt;\/position&gt;\n\t\t&lt;position&gt;position-5&lt;\/position&gt;\n\t\t&lt;position&gt;position-6&lt;\/position&gt;\n\t\t&lt;position&gt;position-7&lt;\/position&gt;\n\t\t&lt;position&gt;position-8&lt;\/position&gt;\n\t\t&lt;position&gt;position-9&lt;\/position&gt;\n\t\t&lt;position&gt;position-10&lt;\/position&gt;\n\t\t&lt;position&gt;position-11&lt;\/position&gt;\n\t\t&lt;position&gt;position-12&lt;\/position&gt;\n\t\t&lt;position&gt;position-13&lt;\/position&gt;\n\t\t&lt;position&gt;position-14&lt;\/position&gt;\n\t&lt;\/positions&gt;\n\n<\/pre>\n<p>Para ver donde aparece esa informaci\u00f3n de posiciones, vamos a: \u00ab<em>administraci\u00f3n de Joomla! \/ Gestor de M\u00f3dulos \/ Ruta <\/em>donde y veremos que hay un campo llamado \u00abposici\u00f3n\u00bb con un valor. En el caso del ejemplo el valor es \u00ab<em>position-1<\/em>\u00bb<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/img99.imageshack.us\/img99\/7193\/joomlaplantilla1.png\" alt=\"Posiciones en Joomla!\" \/><\/p>\n<h4>PARAMS en Joomla!<\/h4>\n<p>Para lograr que una plantilla sea lo m\u00e1s vers\u00e1til posible, es una buena idea configurar <strong>par\u00e1metros en Joomla!<\/strong> como por ejemplo el color. Esta parte est\u00e1 muy ligada al archivo <strong>params.ini en Joomla!<\/strong>.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;params&gt;\n\t&lt;param name=&quot;bg&quot; type=&quot;list&quot; default=&quot;gris&quot; label=&quot;Color del background&quot; description=&quot;Color del sitio&quot;&gt;\n\t\t&lt;option value=&quot;rojo&quot;&gt;Rojo&lt;\/option&gt;\n\t\t&lt;option value=&quot;gris&quot;&gt;Gris&lt;\/option&gt;\n\t\t&lt;option value=&quot;celeste&quot;&gt;Celeste&lt;\/option&gt;\n\t&lt;\/param&gt;\n&lt;\/params&gt;\n<\/pre>\n<p>Espero que o shaya servido de ayuda este manual de Joomla! para ver un poco por dentro el entramado de este estupendo CMS.<\/p>\n<p>M\u00e1s adelante hablaremos del archivo Index.php donde nos encontramos con la API de Joomla! y mostraremos las partes del c\u00f3digo para saber donde tenemos que tocar, lo que tenemos que a\u00f1adir o lo que tenemos que eliminar en una plantilla.<\/p>\n<p><a href=\"https:\/\/www.k3bone.com\/blog\/wp-content\/uploads\/2012\/04\/plantillas.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1894\" title=\"plantillas Joomla!\" src=\"https:\/\/www.k3bone.com\/blog\/wp-content\/uploads\/2012\/04\/plantillas.jpg\" alt=\"\" width=\"590\" height=\"300\" \/><\/a><\/p>\n<p>En <strong>k3bone<\/strong> tenemos un <a title=\"plan Joomla!\" href=\"http:\/\/www.apprentalonline.es\/joomla.php\" target=\"_blank\" rel=\"noopener\">plan Joomla!<\/a> espec\u00edfico con el que te instalamos <strong>Joomla!<\/strong> con todo lo necesario para empezar. As\u00ed mismo, te ayudamos a elegir e instalar cualquier<a title=\"plantillas Joomla!\" href=\"http:\/\/www.apprentalonline.es\/plantillas.php\" target=\"_blank\" rel=\"noopener\"> plantilla de dise\u00f1o<\/a> para vestir tu sitio web. Desde s\u00f3lo <strong>5,45<\/strong>\u20ac\/mes<\/p>\n<p>\u00cdndice de nuestro monogr\u00e1fico sobre <strong>Joomla!<\/strong>:<\/p>\n<ol>\n<li><strong><a title=\"Joomla! \u2013 Introducci\u00f3n e historia\" href=\"http:\/\/www.apprentalonline.es\/blog\/2012\/03\/joomla-introduccion-e-historia\/\" target=\"_blank\" rel=\"noopener\">Joomla! \u2013 Introducci\u00f3n e historia<\/a><\/strong><\/li>\n<li><strong><a title=\"\u00bfC\u00f3mo instalar Joomla!?\" href=\"http:\/\/www.apprentalonline.es\/blog\/2012\/03\/como-instalar-joomla\/\" target=\"_blank\" rel=\"noopener\">\u00bfC\u00f3mo instalar Joomla!?<\/a><\/strong><\/li>\n<li><strong><a title=\"Joomla!: Componentes y M\u00f3dulos\" href=\"http:\/\/www.apprentalonline.es\/blog\/2012\/04\/la-parte-de-atras-de-joomla-componentes-y-modulos\/\" target=\"_blank\" rel=\"noopener\">La parte de atr\u00e1s de Joomla! \u2013 Componentes y m\u00f3dulos<\/a><\/strong><\/li>\n<li><strong><a title=\"Joomla!: Plugins\" href=\"http:\/\/www.apprentalonline.es\/blog\/2012\/04\/la-parte-de-at\u2026joomla-plugins\/\" target=\"_blank\" rel=\"noopener\">La parte de atr\u00e1s de Joomla! \u2013 Plugins<\/a><\/strong><\/li>\n<li><strong><a title=\"Joomla!: Plantillas I\" href=\"http:\/\/www.apprentalonline.es\/blog\/2012\/04\/la-parte-de-atras-de-joomla-plantillas-i\" target=\"_blank\" rel=\"noopener\">La parte de atr\u00e1s de Joomla! \u2013Plantillas I<\/a><\/strong><\/li>\n<li><strong><a title=\"Joomla!: Plantillas II\" href=\"http:\/\/www.apprentalonline.es\/blog\/2012\/05\/la-parte-de-atras-de-joomla-plantillas-ii\" target=\"_blank\" rel=\"noopener\">La parte de atr\u00e1s de Joomla! \u2013Plantillas II<br \/>\n<\/a><\/strong><\/li>\n<\/ol>\n<p><strong>Informaci\u00f3n Relacionada:\u00a0<\/strong><a title=\"Tu web basada en Joomla! desde 5,45\u20ac\/mes!\" href=\"http:\/\/www.apprentalonline.es\/joomla.php\" target=\"_blank\" rel=\"noopener\"><strong><\/strong>Tu web basada en Joomla! desde 5,45\u20ac\/mes!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Joomla! da la opci\u00f3n de que en cualquier momento puedas darle a tu web un aspecto de Web Corporativa y en s\u00f3lo un clic darle aspecto de portafolio, de eso se trata el sistema de plantillas de Joomla! Ya que Joomla! se trata de un sistema modular, si hablamos de plantillas tambi\u00e9n funciona de la [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":1896,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[40,34],"tags":[76,60,75,27,58,67],"class_list":["post-4891","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-joomla-webs-apps","category-programacion-de-sitios-web","tag-cms","tag-customizacion","tag-instalar-tema","tag-joomla","tag-plantilla","tag-plantillas"],"featured_image_src":{"landsacpe":false,"list":false,"medium":false,"full":false},"_links":{"self":[{"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/posts\/4891","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/comments?post=4891"}],"version-history":[{"count":0,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/posts\/4891\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/media?parent=4891"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/categories?post=4891"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/tags?post=4891"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}