Gestión de Plantillas

1.- Introducción a las Plantillas

ntro

Joomla! 
 
≥ 3.0
 
versiones

Este tutorial introductorio le dará una visión general sobre el sistema de plantillas de Joomla y lo que puede hacer con él.

¿Para qué sirven las plantillas?

J3x-template-example-screenshot.png

Una plantilla controla la apariencia general y el diseño de un sitio. Proporciona el marco de trabajo que reúne elementos comunes, módulos y componentes así como las hojas de estilo en cascada para el sitio.

Cuando Joomla! se instala por primera vez varias plantillas se incluyen automáticamente. Puede encontrar muchas más en otros sitios. Algunas están disponibles sin cargo bajo diversas licencias y otras están a la venta. Además, hay muchos desarrolladores disponibles que pueden crear plantillas personalizadas. También puede crear su propia plantilla.

Las plantillas se gestionan con el Gestor de Plantillas, que está situado en el menú Extensiones en la zona administrativa de su sitio (back-end).

¿Por qué Joomla! usa plantillas? [Una auténtica guía para principiantes]

La forma en la que Joomla! está diseñado separa las tareas clave que participan en producir un sitio web para un mantenimiento eficiente del software. Una de estas tareas es crear la estética (el aspecto y la disposición) del sitio. Esto incluye tomar decisiones como qué elementos de contenido (componentes, módulos y plugins) puede querer colocar en cualquier página.

Durante la creación de una página web, la ubicación de la mayoría de los elementos permanecerá igual (menús, posiciones de anuncios, barras laterales, etc). Además, querrá crear el mismo aspecto (fuentes, estilos de encabezados, esquema de color, etc) para cada página. Para alguna partes del sitio puede querer alterar el aspecto general para indicar un propósito distinto para esas páginas (como una sección de blog). Es necesaria cierta planificación para esto, pero una vez que haya asentado el diseño general de su sitio, tiene la tarea de producir cada página de contenido.

Y es aquí donde entra en juego la plantilla. Puede escribir todo el código para cada página separadamente, o usar una plantilla para cada sección principal de su sitio de modo que cuando quiera crear una página nueva simplemente “rellenará los espacios en blanco”. Está bien, quizá no sea tan simple, pero este tutorial está diseñado para darle una guía paso a paso para el uso efectivo de una plantilla, empezando con cómo usar una y terminando en cómo crear una nueva para sí mismo.

  1. Use una de las plantillas suministradas con Joomla!
  2. Descargue una de las muchas que se ofrecen gratuitamente en internet.
  3. Pague para que le modifiquen o le creen una desde cero si sus necesidades no pueden ser satisfechas de otra manera.

Resumen – una plantilla controla el aspecto de su sitio y al mismo tiempo permite al administrador del sitio centrarse más en el contenido real.

 

¿Qué se puede hacer?

Una plantilla sirve para manipular la forma en la que el contenido es entregado al navegador web en un lector de pantalla. Aquí tiene algunas formas en las que puede usar esto en su sitio web construido sobre Joomla.

Diseño

La plantilla es el lugar en el que se establece la estructura del diseño general para su sitio. Esto incluye dónde colocar los diferentes elementos (módulos). Por ejemplo: puede controlar la ubicación de menús, un formulario de acceso, anuncios publicitarios, encuestas, etc.

J3x-template-example-module-changes-screenshot.png

Observe los cambios en el diseño del contenido
 

El estilo del cuerpo principal (artículo) de la página puede ser alterado (puede seleccionar entre diferentes estilos como un típico diseño de blog, un artículo de noticias, etc) dependiendo del diseño de la plantilla. *Vea la imagen de ejemplo. Note las diferencias en el diseño, pero cómo la apariencia es consistente. La barra de módulos lateral se ha movido de la izquierda a la derecha y ha sido reordenada.

Si la plantilla se ha diseñado para proporcionar opciones, también puede alterar "dinámicamente" la disposición del contenido en su sitio, quizás colocando el menú principal en la parte derecha o izquierda de la pantalla.

Esquema de color

Usando CSS dentro del diseño de la plantilla, puede cambiar los colores de sus fondos, texto, enlaces o cualquier cosa que pueda dentro de su código HTML normal. Algunas plantillas ofrecen un método para cambiar el color en la pantalla de gestión de la plantilla, otras requieren que modifique directamente los archivos .css de la plantilla.

Imágenes y efectos

También puede controlar la forma en la que se muestran las imágenes en la página, e incluso crear efectos tipo flash o incluir aplicaciones AJAX tales como menús desplegables.

Fuentes tipográficas

Lo mismo es aplicable a las fuentes tipográficas. Los diseños para éstas son establecidos en el (los) archivo(s) CSS de la plantilla para crear una apariencia uniforme en todo el sitio, lo que hace tremendamente sencillo cambiar el aspecto global simplemente alterando uno o dos archivos en lugar de tener que modificar cada página.

Soluciones para navegadores específicos

Una plantilla puede ser diseñada para alterar la forma en la que se muestra en diferentes navegadores, permitiéndole aprovechar todas las ventajas de las últimas novedades sin hacer su sitio inaccesible para los que no puedan tener su sistema actualizado a la última (como en el caso de ciertas empresas que limitan el software que pueden utilizar sus empleados).

 

Plantillas Suministradas

Las siguientes plantillas son suministradas por Joomla! en una instalación por defecto de Joomla! 3.x

Plantillas del sitio

  • Protostar (plantilla predeterminada)
  • Beez 3

Plantillas de la zona administrativa

  • ISIS (plantilla predeterminada)
  • Hathor

 

Cambiar Plantillas

Para cambiar la plantilla predeterminada para el Sitio (Front-end) o el Administrador (Back-end), siga estos pasos:

Acceder al gestor de plantillas

  • Haga clic en: Extensiones  Plantillas

Extension-manager-template-manager-3x-en.png

Ahora verá la pantalla del Gestor de Plantillas.

Nota: Si no ve Plantillas como opción en la lista del menú Extensiones, lo más probable es que sea debido a que no inició sesión como Super Administrador. Sólo los Super Administradores podrán ver este elemento de menú.

 

Gestión de la plantilla predeterminada

Desde aquí puede gestionar sus plantillas para el Front-end y el Back-end. La vista predeterminada muestra los estilos de las plantillas del Front-end que hay instaladas. El estilo predeterminado para el Front-end está señalado con una estrella; en la imagen que hay abajo es protostar - Default.

Para cambiar el estilo predeterminado a beez3:

  • haga clic en la casilla de verificación a la izquierda del nombre del estilo para seleccionarlo
  • haga clic en "Predeterminada" en la barra de herramientas;

la estrella cambia de protostar a beez3 y ya está. Como alternativa, puede hacer clic directamente en la silueta de la estrella de la columna "Predeterminado" de uno de los estilos de plantilla para establecer ese estilo como predeterminado.

Puede usar los filtros desplegables superiores o en el filtro de búsqueda para limitar el número de plantillas a mostrar en la lista. Otras opciones son:

  • editar - edita las opciones y Asignación de menú, se muestra una plantilla en (ver abajo)
  • duplicar - duplica el estilo de la plantilla
  • eliminar - elimina un estilo de plantilla (no debe ser el estilo de plantilla predeterminado)

30-Switching-templates-1-en.png

 

Asignar de más de un estilo de plantilla para el Lado Cliente

Joomla! le da la opción de cambiar entre dos o más estilos en el Front-end. Esto se hace con "Asignación de menú", de modo que puede establecer diferentes estilos para cada menú o sólo un elemento de menú. Esto permite "páginas" específicas que son definidas por enlaces de menú para establecer un estilo "específico". Los estilos pueden ser de plantillas distintas.

Método del gestor de plantillas

Haga clic en: Extensiones  Gestor de plantillas

  • Verá los estilos de sus plantillas instaladas; ahora elija un estilo que no esté establecido como el predeterminado. La estrella amarilla indica que el estilo es el predeterminado.
30-Template-manager-select-edit-en.png
  • Haga clic en el nombre del estilo o marque la casilla de verificación a la izquierda del nombre del estilo y haga clic en "Editar" en la barra de herramientas.
  • Ahora verá la página "Plantilla: [ Editar estilo ] "; vaya al bloque "Asignación de menú" de la sección y elija los elementos de menú en los que el estilo debería ser mostrado.

30-Switching-templates-assign-menus-en.png

  • Haga clic en "Guardar" en la barra de herramientas y ya está listo. El elemento de menú mostrará ahora la plantilla seleccionada.
  • Vaya a la parte pública de su sitio y refresque la página para ver las modificaciones.

Método del gestor de menús

  • Acceda el elemento de menú Menús  Nombre del Menú
  • Elija un elemento de menú marcando la casilla a la izquierda de su nombre y después haga clic en el botón Editar de la barra de herramientas. Como alternativa, simplemente haga clic en el nombre del elemento de menú para editarlo.
  • En la pantalla Editar elemento de menú, en Estilo de plantilla, elija el estilo de plantilla deseado y haga clic en el botón Guardar

30-Menu-item-template-management-edit-en.png

  • Vaya a la parte pública de su sitio y refresque la página para ver las modificaciones.

 

Ver también

 

Instalar Plantillas

Instalación desde el Panel de Administración (paquete de plantilla)

Inicie sesión en la interfaz administrativa de su sitio (www.su-sitio.com/administrator/)

Haga clic en: Extensiones -> Gestor de Extensiones

30-Installing-template-navigate-en.png

Verá la página "Gestor de Extensiones: Instalar"

Desde aquí puede instalar sus plantillas, plugins, módulos, componentes y paquetes de idioma. Tiene tres opciones:

  1.  

Instalar desde Web - (seleccione una extensión listada en el Directorio de Extensiones de Joomla!)

  1.  

Subir paquete - (seleccione un paquete desde su PC, súbalo e instálelo)

  1.  

Instalar desde un directorio - (introduzca la ruta en la que se encuentra el paquete en su servidor)

  1.  

Instalar desde una URL - (introduzca la URL en la que se encuentra el paquete de instalación)

La opción 4 hace todo por usted, aunque su entorno debe estar correctamente configurado para permitir usarla. La opción 2 requiere que descargue la extensión a su PC. La opción 3 requiere que descomprima los archivos/carpetas del paquete y los mueva al servidor. Todas las opciones requieren que el servidor web tenga permisos de escritura en el espacio web.

Aquí, elegimos el segundo método: Subir paquete

Seleccione el paquete desde su PC y haga clic en el botón "Subir e Instalar"

30-Installing-template-upload-package-file-en.png

Si el paquete no contiene errores, ya está todo listo, y obtendrá un mensaje de éxito como el de abajo.

30-Installing-template-install-success-en.png

Comprobar la instalación

Vaya desde Instalar a Gestionar, y establezca el tipo de filtro en 'plantilla'. La plantilla instalada debería aparecer en la lista. Si aparece, la plantilla está correctamente instalada. Ahora puede asignar uno de los estilos a un elemento de menú o establecer el estilo como predeterminado. Para las plantillas de administrador asegúrese de que tiene dos ventanas del gestor de plantillas abiertas simultáneamente en su navegador. Active la nueva plantilla en una de ellas y restablezca la antigua en la otra si algo fuera mal.

Instalar desde FTP (paquete de plantilla descomprimido)

Las plantillas también pueden instalarse a través de FTP sin necesidad de comprimir los archivos en un paquete de instalación. Simplemente seleccione la carpeta de la plantilla en su PC y súbala a su servidor, usando su cliente FTP favorito. Asegúrese de subir la carpeta de la plantilla al directorio: /ruta_a_joomla/templates/ - donde /ruta_a_joomla/ es la localización de su Joomla! en el servidor. Este método se usa sobre todo cuando ha creado una plantilla usted mismo, y no quiere tener que empaquetarla para instalarla, o bien si quiere subir más de una plantilla a la vez. Después debe ir al gestor de extensiones y hacer clic enDescubrir en el submenú. haga clic en Descubrir en la barra de herramientas si su plantilla no aparece inmediatamente. Una lista de elementos no instalados en el sistema de archivos debería aparecer. Seleccione la casilla de verificación situada a la izquierda de su plantilla y haga clic en instalar.

Aviso: no intente usar FTP para instalar componentes, módulos o plugins si es un principiante o novato. Estos elementos necesitan entradas en la base de datos que deben ser insertadas manualmente si se omite el instalador de paquetes.

 
 

2.- Plantillas suministradas con Joomla!

¿Qué es una plantilla?

Una plantilla es un tipo de Joomla! extensión que cambia la apariencia de su sitio. Hay dos tipos de plantillas utilizadas por Joomla! CMS: plantillas de front-end y plantillas de back-end . La plantilla de front-end controla la forma en que se presenta su sitio web al usuario que ve el contenido del sitio web. La plantilla de back-end controla la forma en que Joomla presenta las tareas administrativas de su sitio web para controlar las funciones de administración. Administrador. Esto incluiría tareas comunes como: usuario, menú, artículo, categoría, módulo, componente, complemento y gestión de plantillas.

Ver también : Componente , Módulo , Complemento

 

Joomla! Versiones

 
 

3.- Instalar una plantilla

Instalar a través del Panel de administración (archivo de plantilla empaquetado)

Inicie sesión en el back-end de su sitio ( www.your-site.com / administrador /)

Haga clic en: Extensiones -> Administrador de extensiones

30-Instalación-plantilla-navegar-es.png

Verá la página "Administrador de extensiones"

Desde aquí puede instalar sus plantillas, complementos, módulos, componentes e idiomas. Tienes diferentes opciones:

  1. Instalar desde la Web: para seleccionar una extensión que aparece en Joomla! Directorio de extensiones
  2. Cargar archivo de paquete: para seleccionar un paquete de su PC, cárguelo e instálelo
  3. Instalar desde carpeta: para ingresar la ruta donde se encuentra el paquete en su servidor web
  4. Instalar desde URL: para ingresar la URL al paquete

La opción 4 hace todo por usted, su entorno debe estar configurado correctamente para permitir esto. La opción 2 requiere que descargue la extensión a su PC. La opción 3 requiere que descomprimas y muevas las carpetas / archivos a tu servidor web. Todas las opciones requieren que el servidor web tenga acceso de escritura al espacio web.

Aquí, elegimos el segundo método: Cargar archivo de paquete

Arrastre y suelte el archivo en el área de carga para cargar. Alternativamente, también puede hacer clic en el botón "O explorar el archivo" para seleccionar el paquete desde su PC.

30-Installation-template-upload-package-file-en.png

Si el paquete no contiene errores, habrá terminado y recibirá un mensaje de éxito como el siguiente.

30-Installation-template-install-success-en.png

Verificar instalación

Vaya de la pestaña 'Instalar' a la pestaña 'Administrar', configure el filtro 'Tipo' en 'Plantilla'. La plantilla instalada debería aparecer en la lista. Si lo hace, la plantilla está instalada correctamente. Ahora puede asignar uno de los estilos a un elemento del menú o establecer el estilo como predeterminado. Para las plantillas de administrador, asegúrese de tener dos ventanas del administrador de plantillas. Active la nueva plantilla en una de ellas y reiníciela en la otra si algo sale mal.

Instalar a través de FTP (archivo de plantilla desempaquetado)

Las plantillas también se pueden instalar a través de FTP sin empaquetarlas. Simplemente seleccione la carpeta de plantillas en su PC y cárguela en su servidor, utilizando su software FTP favorito. Asegúrese de cargar la carpeta de plantillas en el directorio: / path_to_joomla / templates / - donde / path_to_joomla / es la ubicación de su Joomla! instalación en el servidor. Este método se usa principalmente cuando ha creado una plantilla usted mismo y no desea tener que empaquetarla para instalar la plantilla, o si desea cargar más de una plantilla a la vez. Luego debe ir al administrador de extensiones y hacer clic en Descubriren el submenú. Haga clic en "Descubrir" en la barra de herramientas si su plantilla no aparece de inmediato. Entonces debería aparecer una lista de elementos desinstalados en el FTP. Haga clic en la casilla de verificación a la izquierda de su plantilla y haga clic en el botón 'Instalar'.

Nota: no intente utilizar FTP para instalar componentes, módulos y complementos si es un principiante / principiante. Estos elementos necesitan entradas de la base de datos que deben insertarse manualmente si omite el instalador del paquete.

 
 

4.- Para acceder al Administrador de plantillas

  • Haga clic en: Extensiones  →  Plantillas

Extension-manager-template-manager-3x-es.png

Ahora verá la pantalla Administrador de plantillas.

Nota: Si no ve las Plantillas listadas como una opción en el menú Extensiones , entonces es muy probable que no haya iniciado sesión como Super Administrador. Solo los superadministradores verán este elemento del menú.

 
 

5.- Cambio de plantillas

Para cambiar la plantilla predeterminada para el sitio (front-end) o el administrador (back-end), siga estos pasos:

Acceda al administrador de plantillas

  • Haga clic en: Extensiones  →  Plantillas

Extension-manager-template-manager-3x-en.png

Ahora verá la pantalla Administrador de plantillas.

Nota: Si no ve las Plantillas listadas como una opción en el menú Extensiones , entonces es muy probable que no haya iniciado sesión como Super Administrador. Solo los superadministradores verán este elemento del menú.

 

Administrar plantilla predeterminada

Desde aquí, administra sus plantillas para Front-end y Back-end. La vista predeterminada muestra los estilos de plantillas front-end instalados. El estilo predeterminado para el front-end está marcado con una estrella; en la imagen de abajo es protostar - Predeterminado.

Para cambiar el estilo predeterminado a beez3:

  • haga clic en la casilla de verificación a la izquierda del nombre del estilo para seleccionarlo;
  • haga clic en "Predeterminado" en la barra de herramientas;

la estrella cambia de protostar a beez3 y ya está. Alternativamente, puede hacer clic en la sombra de la estrella predeterminada de una plantilla para establecer rápidamente la plantilla como predeterminada.

Puede usar los menús desplegables de filtro en la parte superior o la búsqueda de filtro para limitar el número de plantillas que se muestran en la lista de plantillas. Otras opciones son:

  • editar: edita las opciones y la Asignación de menú en la que se muestra una plantilla (ver más abajo)
  • duplicar: duplica el estilo de la plantilla
  • eliminar: eliminar un estilo de plantilla (no debe ser el estilo de plantilla predeterminado)

30-Switching-templates-1-es.png

 

Asignación de más de un estilo de plantilla para el front-end

Joomla! le ofrece la opción de cambiar entre dos o más estilos en el front-end. Esto se hace con "Asignación de menú", por lo que puede establecer diferentes estilos para cada menú o solo un elemento del menú. Esto permite que las "páginas" específicas que se definen mediante enlaces de menú se configuren para un estilo "específico". Los estilos pueden ser de diferentes plantillas.

Método de administrador de plantillas

Haga clic en: Extensiones  →  Administrador de plantillas

  • Verá los estilos de plantilla instalados, ahora elija un estilo que no esté configurado como predeterminado. La estrella amarilla indica que el estilo es el predeterminado.
30-Template-manager-select-edit-en.png
  • Haga clic en el nombre del estilo o presione la casilla de verificación a la izquierda del nombre del estilo y haga clic en "Editar" en la barra de herramientas.
  • Ahora verá la página "Plantilla: [Editar estilo]", vaya a la sección "Asignación de menú" y seleccione los elementos de menú en los que se debe mostrar el estilo.

30-Conmutación-plantillas-asignar-menús-es.png

  • Haga clic en "Guardar" en la barra de herramientas y ya está. El elemento del menú ahora mostrará la plantilla seleccionada.
  • Vaya al front-end de su sitio web y actualice la página para ver las modificaciones.

Método de administrador de menú

  • Acceder al elemento del menú Menús  →  Nombre del menú
  • Elija un elemento de menú marcando la casilla a la izquierda de su nombre y luego haga clic en el botón Editar barra de herramientas. Alternativamente, simplemente haga clic en el nombre del elemento del menú para editarlo.
  • En la pantalla Editar elemento del menú , en Estilo de plantilla , elija el estilo de plantilla deseado y haga clic en el botón Guardar .

30-Menu-item-template-management-edit-es.png

  • Vaya a la interfaz de su sitio web y actualice la página para ver las modificaciones.

 

Ver también

Estilo de plantilla

 
 

6.- Estilo de plantilla

El estilo de plantilla es una característica introducida en Joomla 2.5que permite a los usuarios asignados diferentes estilos de plantilla a elementos de menú concretos. Por defecto, Joomla asigna un estilo de plantilla a todos los elementos de menú durante la instalación. Una estrella amarilla indica el estilo de plantilla predeterminado en uso. Un estilo de plantilla predeterminado puede ser total o parcialmente sustituido asignando diferentes estilos de plantilla a los elementos de menú deseados para obtener una apariencia distinta en sus páginas respectivas.

Un estilo de plantilla puede ser asignado a elementos de menú de dos formas distintas.

  • Desde el gestor de plantillas Extensiones  →  Gestor de plantillas
  • Editando el elemento de menú desde Menús  →  Nombre del  menú →  Elemento de menú

 

Ver también: Cómo asignar más de una plantilla al interfaz público

 
 

Buscar...

Información

Este es mi proyecto personal, donde he querido plasmar mis conocimientos y experiencia en escenarios de administración de servidores web y usuarios. En el menú ¿Como se hizo esta web?, se observa el tratamiento con el proveedor de hosting y dominio y la plataforma de panel de control del servidor Web. Todo ello, para finalizar con la instalación del famoso Gestor de Contenidos - CMS Joomla. El proceso de todo lo que hablo, ha sido grabado y capturado en pantalla con explicaciones con audio.