Construir un template para CMS Made Simple

Construir un template para CMS Made Simple

CMS Made Simple es un gestor de contenidos con el cual podemos crear y administrar una página Web. A continuación vamos a explicar como crear nuestro propio template. Lo primero que debemos hacer, es descargar e instalar el CMS. Podéis descargar la última versión aquí.

Una vez descargado, copiamos los archivos en nuestro servidor, ya sea remoto o local, y ejecutamos "index.php"; para ello, basta con escribir en un navegador su dirección; por ejemplo, si estamos trabajando en local y hemos guardado los archivos en una carpeta que se llama CMS, bastará con escribir: "http://localhost/CMS/" o si estamos haciendo la instalación directamente sobre un servidor remoto y has colocado los archivos en la carpeta raíz del sitio, deberás escribir la dirección o URL de tu dominio: "http://www.tudominio.com".

Puede ocurrir, en algún caso, que necesites crear el archivo "config.php". Para crearlo, abre el bloc de notas y guarda un archivo en blanco con el nombre "config.php", en Tipo selecciona "Todo los archivos" y en Codificación "UTF-8".

La primera pantalla que vemos es la correspondiente a la selección del idioma. Selecciona una opción y haz clic en "Submit".

Completa la instalación introduciendo los datos de conexión con la base de datos, un usuario y contraseña para acceder al panel de administración, etc.

neo 2.0 - Construir un template para CMS Made Simple - 1

Una vez finalizada la instalación, accede al panel de administración, el cual se divide en 7 secciones principales:

  • CMS
  • Contenido
  • Diseño
  • Usuarios y Grupos
  • Extensiones
  • Sitio
  • Mis Preferencias

En la pestaña "Diseño", encontrarás varios templates con sus correspondientes hojas de estilo CSS. Puedes asignar un único template a toda la página Web o elegir por cada página un template. Esto es útil, por ejemplo, si necesitas hacer una pantalla de bienvenida o home distinta a las páginas interiores de tu sitio Web.

neo 2.0 - Construir un template para CMS Made Simple - 2

Para construir nuestro propio template, lo primero será maquetar en HTML y CSS nuestro diseño, como lo haríamos con un Website sin CMS.

Una vez diseñado y maquetado nuestro template, obtendremos un documento HTML y su hoja de estilo CSS. Para poder seguir el ejemplo, nombra a tu documento HTML como "MiLayout".

Las diferentes partes que forman nuestro sitio Web con CMS Made Simple, como los títulos de las páginas, los artículos, el menú, etc. son etiquetas "Tags" a la cuales llamaremos desde nuestro template.

A continuación detallamos algunas "Tags" que nos servirán para construir nuestro sito Web:

  • {sitename}: el nombre del sitio.
  • {search}: el módulo de búsqueda.
  • {menu}: el menú de la página.
  • {breadcrumbs}: "migas de pan", indica en que parte de la página nos encontramos.
  • {title}: el título de cada artículo o página.
  • {content}: el contenido de cada artículo o página.
  • {news}: el módulo de noticias.

Este es sólo un pequeño listado de todas las etiquetas que podrás encontrar en "Extensiones" > "Tags" con las cuales podrás construir tu página Web. Muchas de ellas, admiten ajustar determinados parámetros, por ejemplo en {menu} añade start_level="1": {menu start_level="1"} para indicar que deben mostrarse las páginas del nivel 1.

neo 2.0 - Construir un template para CMS Made Simple - 3

Para construir nuestro propio template nos servirá de ayuda basarnos en un template ya construido, por ejemplo "NCleanBlue" y su hoja de estilo "Layout: NCleanBlue"; por lo que os recomiendo eliminar el resto de templates y hojas de estilo CSS con el fin de no editar un archivo por error.

Lo primero que debes hacer es asignar a todas las páginas dicho template, "NCleanBlue", haz clic en "Asignar a Todo"; ahora selecciona el resto de templates y haz clic en "Borrar" > "Enviar". Accede a las Hojas de estilo CSS y elimina todas, excepto "Layout: NCleanBlue".

neo 2.0 - Construir un template para CMS Made Simple - 4

Ahora, vuelve a la pestaña "Diseño" > "Plantillas" y haz clic en "Copiar". Asigna un nombre para tu nuevo template: "MiTemplate". Copia el código fuente y pégalo en tu editor HTML (por ejemplo Dremweaver).

Ahora copia el código fuente hasta la etiqueta </head> de "MiTemplate" y remplázalo en tu documento HTML "MiLayout".

Copia las diferentes etiquetas "Tags" que necesites para construir tu sitio Web en el lugar que hayas reservado en tu diseño "MiLayout"; por ejemplo, si en tu diseño has creado un <div> destinado a mostrar el contenido de los artículos o páginas, pega en su interior la etiqueta "{content}".

Una vez hayas incluido las diferentes etiquetas en "MiLayaout", copia el código fuente y pégalo en la pestaña "Diseño" > "Plantillas" > "MiTemplate". Ahora, ve a "Diseño" > "Hojas de estilo" y haz clic en "Añadir Hoja de Estilo". Asigna un nombre a tu nueva hoja de estilo: "MiEstilo" y pega tus estilos CSS; selecciona "Screen" en Tipo de Medio y haz clic en "Enviar".

Para asignar tus estilos CSS a "MiTemplate", en "Diseño" > "Platillas", haz clic en "Adjuntar Hoja de estilo", selecciona del menú desplegable "MiEstilo" y haz clic en "Añadir una Hoja de Estilo". Si aún no has eliminado la asociación de "MiTemplate" y "Layout: NCleanBlue", haz clic en el icono de la papelera para borrar.

Ahora sólo nos quedará aplicar nuestro template a todas las páginas. Para ello, haz clic en "Asignar a Todo". Ahora, ve a la pestaña "CMS" y haz clic en "Ver Sitio". Si todo ha ido bien, la página debería mostrar tu diseño.

Nota: Si necesitas ejecutar algún código JavaScript, deberás pegarlo entre las etiquetas {litaral} {/literal} de tu template.

Publicar un comentario

0 Comentarios