10.2 C
Madrid
sábado, marzo 30, 2024
spot_img

Curso acelerado: Crear un Joomla! Modelo desde cero

Si quieres crear tu propio Joomla! plantilla desde cero, debe descargar e instalar la última versión de Joomla!, preferiblemente en su servidor native. Hay varias razones para hacer esto.

Primero, debes tener Joomla! instalado para que pueda ver lo que está creando. Cuando diseñe sus archivos de plantilla, no podrá probarlos simplemente abriendo una página de prueba HTML. Deberá ejecutar los archivos de plantilla a través de Joomla! mismo para ver su código en acción. También significa que no creará sus archivos de plantilla a través de una herramienta WYSIWYG como Dreamweaver. Si está acostumbrado a usar software program de desarrollo internet para crear sus sitios y ahora desea comenzar a desarrollar para Joomla!, deberá volver a lo básico y aprender a codificar a mano.

Siempre he sido un purista cuando se trata de desarrollar a mano, especialmente después de mis primeras experiencias trabajando con FrontPage y no haciendo exactamente lo que quería. Debido a esta frustración, tomé un libro de HTML 4 y aprendí a codificar a mano. Gracias a esta experiencia, nunca me molesté en aprender Dreamweaver ni ningún otro software program. En su lugar, recurrí al HTML Package de Chami, que es una descarga gratuita y un excelente editor de HTML. A partir de esta herramienta, perfeccioné mi arte de codificar HTML a mano, lo que conduce muy bien a codificar CSS a mano; Si tu experiencia de codificación se parece a la mía, estás en una posición supreme para comenzar a codificar para Joomla!. Es hora de volver a las trincheras y diseñar tu código a mano.

Ahora que ha aceptado la codificación handbook de su Joomla! plantilla, es hora de averiguar dónde residirán sus archivos. Si aún no has leído mi artículo, «¡Trabajar con CSS en Joomla!» este es el momento adecuado para hacerlo. Este artículo explica dónde encontrar las carpetas y archivos de plantillas y CSS y proporciona información básica sobre Joomla! información CSS. La carpeta de plantillas es la misma carpeta donde guardará su nueva plantilla.

¡Solo hay dos archivos que necesitas para crear tu propio Joomla! modelo. El primero es el archivo index.php. El archivo index.php incluye marcas para Joomla! comprender. Por ejemplo, el archivo php se usa con módulos, and many others. El segundo archivo es templateDetails.XML. Una vez que estos dos archivos están configurados y funcionando, crea el CSS. Los tres archivos trabajarán juntos para producir el contenido que aparece en tu Joomla! Si usted.

En la carpeta Plantillas, cree una nueva carpeta y asígnele un nombre. En esta carpeta, cree un archivo de texto sin formato como index.php y un segundo archivo como templateDetails.XML. Abra el archivo XML y copie y pegue:

su_plantilla_nombre

15-3-2011

su nombre

[email protected]

http://www.urldelsitio.com

tu 2011

GNU/GPL

1.0.0

Mi primera plantilla Joomla

índice.php

templateDetails.XML

css/plantilla.css

Alto la izquierda correcto abajo bandera Unión pie de página usuario1 usuario2 usuario3 usuario4

El código anterior agrega su información private a la plantilla y asigna algunas posiciones del módulo base.

Abra el archivo index.php y pegue el comienzo de su código allí:

Este código proporciona su tipo de documento y algo de código PHP básico. Este es el alcance más lejano de PHP que necesitará saber. Este código también incluye el módulo izquierdo que definió en su archivo templateDetails.XML. Continúe, guarde y cierre estos dos archivos si los tiene abiertos.

Ahora ve al backend de Joomla! y crea un nuevo artículo que se publica en la página de inicio. Haga clic en Vista previa y debería ver su nuevo elemento. Lo que aún no ve es la nueva plantilla que acaba de crear. Para agregar su nueva plantilla, vaya al administrador de plantillas. Debería ver su plantilla con nombre private en la lista de plantillas disponibles. Haga clic en el botón de radio junto a su plantilla, luego haga clic en la estrella amarilla para convertirla en la predeterminada.

Ahora haga clic en Vista previa nuevamente y debería ver su publicación agregada recientemente, la información del encabezado y el título. También debería ver un elemento del menú Inicio en la parte inferior de su publicación. Este aparecía en la posición del módulo izquierdo porque durante la versión básica de Joomla! set up, el módulo del menú principal se crea de forma predeterminada. Si no hubiera incluido el incluir izquierdo en su archivo php, el menú principal no habría aparecido, porque no habría habido ninguna llamada. Felicitaciones por crear su primer Joomla! El modelo, por supuesto, es menos toda la decoración… pero eso viene después.

Regrese a su carpeta de plantillas y cree una carpeta llamada CSS, y en esa carpeta cree un archivo llamado template.css. Ahora necesita vincular su archivo CSS a su archivo index.php. También debe agregar etiquetas div para cada uno de sus módulos. Aquí está el código para vincular su archivo CSS:

Tenga en cuenta que cada etiqueta div contiene una inclusión que es una posición de módulo definida. La versión básica de Joomla! Los archivos de instalación definen estas posiciones por usted, que puede anular. El siguiente mapa para las posiciones predeterminadas de los módulos se tomó de Joomla! Documentación.

Mapas de módulos

Básicamente, para CSS, desea establecer estilos para cada una de sus etiquetas div desde su archivo PHP. Aquí hay un código de inicio para el archivo CSS:

* { relleno: 0; margen: 0; } ul { estilo de lista: ninguno; } .float { float: izquierda; } .claro {claro: ambos; } #contenedor { ancho:960px; margen: automático; } #encabezado {color-de-fondo:#999999; altura: 150px; } #contenido { ancho: 660px; alinear texto: centro; } #sidebar_left { texto-alinear: centro; coloration de fondo:#CCCCCC; ancho: 150 píxeles; } #sidebar_right { coloration de fondo:#CCCCCC; ancho: 90 píxeles; }

Estos son los conceptos básicos para empezar a crear tu propio Joomla! modelo. En resumen, el archivo XML se utiliza para definir la información private de su plantilla y para enumerar las posiciones de los módulos. El archivo PHP se utiliza para definir aún más los módulos y conectarlos al archivo CSS. Finalmente, el archivo CSS completa la definición de los módulos agregando decoración y alineación.

Artículos relacionados

Dejar respuesta

Please enter your comment!
Please enter your name here

- Anuncio -spot_img

Últimos artículos

3,913SeguidoresSeguir
0suscriptoresSuscribirte