Concrete5, como ya dijimos en un post anterior sobre lo Nuevo de Concrete5 es un CMS que nos permite editar el contenido directamente en la página sin necesidad de codificar.
Hoy vamos a crear una plantilla para Concrete5 simple y así poder tener una idea básica de como crear la que vosotros queráis.
Descargar plantilla
Para no empezar de cero, vamos a descargar una plantilla desde ArcSin:
Una vez en nuestro PC, lo descomprimimos y renombramos la carpeta a «colorate«. Ahora abrimos en nuestro editor preferido una documento de texto y ponemos el título y la descripción y lo guardamos como «description.txt» en la raiz de nuestro sitio, de este modo:
COLORATE Mi primer theme en Concrete5
Como Concrete5 utiliza PHP para sus archivos lo primero que vamos a hacer es renombrar el index.html de la plantilla que nos hemos descargado, por default.php y lo abrimos.
Veremos un archivo en el que su código es puramente HTML, así que vamos a modificarlo un poco para que se nos convierta en algo más dinámico gracias a PHP.
1. Modificar ruta de los archivos utilizados
Vamos a modificar todos las rutas con las llamadas a archivos tipo Javascript, CSS, Imágenes, etc .. Para ello lo primero que haremos será buscar en el código textos que puedan hacer llamadas con rutas como por ejemplo, href y src. Y en cada uno de ellos habrá que poner delante de la ruta lo siguiente:
Código Antes:
<!-- para CSS --> <!-- para imáganes --> <img class="bordered" src="img/sample-event.jpg" alt="" width="240" height="80" />
Código Después:
<!-- para CSS --> <!-- para imáganes --></pre> <img class="bordered" src="<?=$this->getThemePath()?>/img/sample-event.jpg" alt="" width="240" height="80" />
Una vez lo tenemos todo modificado, vamos a trasladarlo a la carpeta themes de nuestra instalación de Concrete5, en nuestro caso lo copiamos en: http://localhost/colorate/themes Una vez copiados los archivos, nos vamos al panel de control de nuestra instalación de concrete5 y a la zona de Themes. Aquí veremos el theme disponible para instalar (Themes Available to Install). Lo único que tendremos que hacer es darle al botón INSTALL y se instalará. Con lo que veriamos nuestra theme instalado de la siguiente forma: 
Para probar si todo funciona bien, lo mejor es hacer clic en el botón PREVIEW tal y como vemos en la imagen, con lo que obtendremos una vista previa como esta: 
2. Modificar Title
El título de cada una de las páginas que compondrán nuestro sitio web también tiene que ser dinámica para poder configurarlo a gusto en el panel de control y que se vea reflejado dinámicamente en todas las páginas. Para ello tendremos que hacer la siguiente modificación:
Código anterior:
<title>Website Template: Simple Organization (demo)</title>
Código después:
<? Looder::element('header_required'); ?>
Ahora si actualizamos nuestro sitio web, podremos ver en el código fuente (Ver código fuente en tu navegador) que nos ha agregado dinámicamente unas líneas como estas:
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>COLORATE :: Home</title> <meta name="description" content="" /> <meta name="generator" content="concrete5 - 5.5.2" />
3. Crear texto editable
Ahora iremos cambiando las zonas visibles del sitio web de forma que podamos controlar el contenido a través del panel de control, que se consigue instanciando el objeto Area con diferentes atributos. Area principal: Para el area principal utilizaremos la función (‘Main’). Código anterior:
<h2 class="label label-green">Mission Statement</h2> <p class="quiet large">What we want to achieve</p> <p>Vestibulum eu pellentesque ante. Sed tincidunt quam eu nisl luctus id mattis tellus rhoncus.</p> <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Donec dapibus eros vitae nibh venenatis faucibus.</p>
Código después:
<? $a = New Area('Main'); $a->display($c); ?>
Area Menú de navegación principal: Para el area principal utilizaremos la función (‘Header Nav’). Código anterior:
<ul class="tabbed"> <li class="current-tab"><a href="<?=$this->getThemePath()?>/index.html">Blog</a></li> <li><a href="#">Events</a></li> <li><a href="#">About</a></li> <li><a href="#">Archives</a></li> <li><a href="#">Join Us!</a></li> </ul>
Código después:
<? $a = New Area('Header Nav'); $a->display($c); ?>
Otras areas editables:
- Header – Este area contiene la imagen de la cabecera.
- Sidebar – Este area se presenta si la plantilla tiene una barra lateral (sidebar).
- etc ..
Con la presente guía inicial para crear themes Concrete5 y accediendo a la web oficial para ver todas las areas disponibles en Concrete5 así como el completo manual Concrete5 que nos ofrecen, estoy seguro que podrás obtener los conocimientos suficientes como para crear tu propia plantilla.
Como véis es bastante fácil modificar crear un theme Concrete5 partiendo de una plantilla gratuita. Para más información al respecto, podéis acudir a la web oficial donde tenéis una guía con todos los detalles.
Por cierto, si eres cliente de k3bone no es necesario que aprendas a instalar Concrete5 ya que tienes a tu disposición el sistema 1-clic-instalación con el cual puedes instalar Concrete5 «con 1 clic» en tu cuenta de hosting.
También tenemos un plan Concrete5 específico con el que te instalamos Concrete5 con todo lo necesario para que puedas empezar a crear tu plantilla.
Fuentes:
Información Relacionada: Tu Concrete5 desde sólo 5,45€/mes!
