Cómo diseñar una plantilla

Cómo diseñar una plantilla

Desde la versión de PHPost la A1.5.x está activo el administrador de temas, con esto los usuarios pueden administrar las plantillas que tengan en su servidor, en esta guía se mostrará cómo los diseñadores deben crear y publicar los temas para PHPost Risus

Antes que nada usted debe tener conocimientos básicos en Smarty el motor de plantillas usado por PHPost en sus versiones Alpha y Risus.

Para crear un tema nos basaremos en el diseño que trae por default el script, y como consejo puede instalar el plugin Firebug para Firefox que le ayudará a crear o modificar un tema con más facilidad y rapidez.

Crear un tema para PHPost Risus

Nota: Si únicamente va a diseñar sin tocar nada de programación siga los siguientes pasos.

Para comenzar un diseño nos basaremos en la plantilla que trae por defecto PHPost ubicada en /themes/default/.

Dentro de esta carpeta se encuentran las plantillas, imágenes, estilos CSS y códigos JavaScript, todos necesarios para el funcionamiento del sitio, lo que más nos interesa saber como diseñadores es sobre las plantillas, imágenes y estilos CSS.

Vamos a describir la función que tiene cada archivo ubicado en nuestra carpeta default.

• /estilo.css

Este archivo contiene todos los estilos que hacen que nuestro sitio se parezca a Taringa! Este será el archivo que más se va a modiricar para crear un tema.

• /phpost.css y /extras.css

Estos archivos contienen estilos extras y que no tienen que ver con el diseño original de Taringa!

• /css/

Dentro de esta carpeta encontraremos estilos específicos para cada sección del sitio, por ejemplo para la sección sitio.com/fotos/ existe un estilo llamado fotos.css para sitio.com/perfil/ existe un estilo perfil.css, entonces podemos crear un estilo para cada sección, colocarlo aquí y automáticamente será llamado cuando el usuario ingrese a esa sección.

• /images/

Dentro encontramos todas las imágenes e iconos utilizados por el sitio.

• /templates/

Aquí se encuentran las plantillas principales para cada sección, al igual que los estilos en la carpeta /css/, aquí existe una plantilla para cada sección, por ejemplo la sección sitio.com/posts/ tiene una plantilla llamada t.posts.tpl, sitio.com/tops/ tiene una plantilla t.tops.tpl, etc. Por lo general estos archivos contienen únicamente las llamadas a los módulos que lo componen.

• /templates/sections/

En esta carpeta tenemos las secciones principales de nuestra plantilla, aquí encontraremos por ejemplo el main_header.tpl y main_footer.tpl que serán usados por la mayoría de las plantillas ubicadas en /templates/.

• /templates/modules/

Las plantillas principales se componen de módulos, estos módulos están ubicados en esta carpeta, para saber a qué plantilla pertenece cada módulo nos fijaremos en su nombre que se compone de la siguiente manera m.posts_autor.tpl, donde posts indica que ese modulo pertenece a la plantilla principal llamada t.posts.tpl.

Es aquí en los módulos, donde se encuentra la mayor parte del código html y Smarty. Si quiere modificar alguna sección de la plantilla, primero debe identificar la plantilla principal, después identificar los módulos que lo componen y por último modificar el módulo deseado.

Nota: Los módulos para la sección de administración y moderación se encuentran en la carpeta /templates/admin_mods/.

• /templates/t.php_files/

Dentro encontraremos las plantillas para los archivos que responden mediante petición AJAX, por ejemplo el overcard, las notificaciones, vista previa de un post, registro, login etc.

• /templates/admin_mods/

Aquí están todos los módulos para la apariencia de la administración y moderación del sitio. Básicamente son todos los archivos y carpetas que necesitamos para crear un nuevo estilo, para crear el diseño es cosa de la imaginación y conocimientos en HTML y CSS.

Empaquetando un tema para PHPost A1.5.x

Cuando haya terminado de modificar su plantilla y crea que está lista para publicarla debe seguir los siguientes pasos.

Paso 1: Renombrar carpeta default

Si nos basamos en la plantilla que trae PHPost por defecto llamada default, debemos cambiarle el nombre por el de nuestro tema.

El nombre de la carpeta no debe ser demasiado extenso ni contener espacios, por ejemplo si nuestro tema se llama Taringa! V5 la carpeta de nuestro tema se puede llamar taringa_v5 o taringa-v5.

Paso 2: Crear archivo de instalación

A partir de la versión A1.5.x se debe incorporar un archivo de instalación, este archivo contienen el nombre de su tema y un par de variables que sirven para que el script pueda agregar el tema a la base de datos.

Dentro de la carpeta principal donde tiene su tema, debe agregar un archivo llamado install.php el cual debe contener el siguiente código:

<?php
/**
 * Información del tema
 * 
 * @name install.php
 * @filesource /nombre_del_tema/install.php
*/
/*
 * -------------------------------------------------------------------
 *  Nombre del Tema
 * -------------------------------------------------------------------
 */
$tema['nombre'] = 'Nombre del Tema';
/*
 * -------------------------------------------------------------------
 *  Dirección URL del tema | Esta linea no debe ser modificada.
 * -------------------------------------------------------------------
 */
$tema['url'] = $tsCore->settings['url'].'/themes/'.$tema_path;
/*
 * -------------------------------------------------------------------
 *  Copyright
 * -------------------------------------------------------------------
 */
$tema['copy'] = 'CubeBox';
/**
 * -------------------------------------------------------------------
 */
?>

Con este archivo los usuarios podrán administrar los temas que tengan en su servidor.

Paso 3: Screenshot

Para que el usuario pueda identificar mejor los temas que tiene instalados, necesitamos crear una captura de pantalla del tema, la captura debe tener una resolución de 150x100 pixeles y estar en formato PNG, la guardamos en el directorio principal de nuestro tema con el nombre screenshot.png

Paso 4: Empaquetar

Debemos comprimir la carpeta de nuestro tema en formato ZIP con Winrar o algún otro programa de este tipo, por favor no agregar ninguna contraseña o archivo externo al tema.

Subimos el archivo comprimido a un hosting en la nube como lo es Dropbox, MediaFire, Box, Google Drive o Mega para posteriormente abrir un tema en el foro y publicar nuestro tema, recuerden agregar capturas en el topic que hagan para que los usuarios descarguen su tema.

Tema para PHPost Risus con programación

Si vas a crear un tema donde se tenga que modificar el script, debes seguir los pasos descritos anteriormente y además agregar un manual para aplicar las modificaciones que necesite tu tema, no es recomendable subir todo el script ya que se pierden las modificaciones que le usuario ya haya hecho.

Fuente: https://www.phpost.net/docs/guide/topics/create-theme.html