Definición del tema
La definición de tema es un archivo JSON que define todos los aspectos de un tema: plantillas, tipos de bloques, esquemas de color, opciones de configuración, idiomas y muestras de contenido. El archivo debe estar ubicado en la carpeta raíz del tema y debe tener el siguiente formato como nombre de archivo:
theme_code.theme
Nota importante: un único error de sintaxis en el archivo JSON hará que el tema sea inservible en Navigate CMS. Afortunadamente, la aplicación te avisará de esta circunstancia si ejecutas la función Temas. Puedes obtener un poco más de información si utilizas Firefox y tienes la extensión FirePHP instalada en tu navegador.
Todos los textos sujetos de ser mostrados en Navigate CMS (descripciones, títulos de opción, valores...) se pueden traducir con el diccionario del tema. Por ejemplo, si un tema tiene un esquema de color con el nombre "ec_blue", Navigate CMS buscará una cadena que coincida con ese código para el idioma actual ("Electric Blue" en Inglés, "Azul eléctrico" en Español) y lo mostrará en lugar de "ec_blue", de lo contrario se mostrará en el idioma por defecto.
También puedes añadir un símbolo "@" antes del código de cadena para ayudarte a identificar lo que se traduce con el diccionario (el símbolo no se utiliza para nada, será eliminado antes de que la cadena se compruebe en el diccionario).
Estructura principal
Todas las definiciones del tema deben seguir el siguiente formato:
{
"title": "Título de tu tema",
"version": "1.0",
"author": "Autor del tema <autor@email.com>",
"website": "http://www.sitiowebdelautor.com",
"languages": {},
"styles": {},
"options": [],
"templates": [],
"blocks": [],
"content_samples": []
}
Salto rápido a una sección:
Idiomas Estilos Opciones Plantillas Bloques Muestras de contenido
Idiomas
Los códigos de idioma se definen en la configuración del sitio web. Te recomendamos que utilices el identificador de 2 letras para un idioma ( ISO 639-1 ).
"languages":
{
"language_code": "ruta al diccionario json desde la RAÍZ DEL TEMA",
"en": "i18n/en.json"
}
Los esquemas de color (estilos de tema)
Cada combinación de colores disponible para un tema debe tener un nombre en clave interno. En la configuración del sitio web, los títulos del esquema se leen de la propiedad "name", que se puede traducir con el diccionario de tema (en el ejemplo "@default" significa que Navigate CMS buscará una traducción para la palabra clave "default").
En el ejemplo siguiente, cada esquema está compuesto por tres hojas de estilo: global, color y content. "Global" define la estructura visual del sitio web. "Color" asigna tonos de color a los elementos. "Contenido" es una hoja de estilo especial que se carga en el editor TinyMCE dentro de Navigate CMS cuando se edita una página de un tema para hacer coincidir los estilos del contenido con los de tu sitio web. Puedes organizar tu esquema de estilos de la forma que quieras, incluso puedes eliminar por completo la sección "styles" de la definición del tema.
Recuerda: el único tipo de estilos que Navigate CMS leerá por sí mismo es "contenido".
"styles":
{
"codigo_del_esquema":
{
"name": "Nombre del esquema",
"global": "ruta al CSS que define el aspecto visual para todos tus temas",
"color": "ruta al CSS que define las particularidades de este esquema",
"content": "ruta al CSS que se usará en tinyMCE dentro de Navigate CMS"
},
"default":
{
"name": "@default",
"global": "css/default/global.css",
"color": "css/default/blue.css",
"content": "css/default/content.css"
}
}
Opciones de configuración (página web)
Si deseas permitir el cambio del logotipo utilizado en un tema o definir la dirección URL de Facebook para un botón en todas las páginas, etc... ésta es la forma en que puedes hacerlo:
"options": [
{
"id": "código de la opción, recibirás esta información en el widget de tu tema",
"name": "@titulo_opcion",
"type": "tipo de la opción",
"dvalue": "valor por defecto cuando la opción no tiene valor",
"custom_property": "valores_especiales"
},
{
"id": "logo",
"name": "@logo",
"type": "image",
"dvalue": "img/logo.png"
}
]
Algunos tipos de opción tienen propiedades propias como "ancho del editor", si se utiliza un "TinyMCE" , etc...
Comprueba la sección configuración y opciones para obtener una lista completa de los tipos de opciones y sus propiedades propias.
Plantillas
Aquí se define cada tipo de página usada en el tema: un blog, una lista de noticias, o cualquier otro tipo de página, incluyendo tus propios tipos definidos.
"templates": [
{
"type": "tipo_de_plantilla",
"file": "ruta al fichero de la plantilla desde la raíz del tema",
"uses": "structure,element",
"enabled": true|false,
"permission": 0|1|2,
"gallery": true|false,
"statistics": true|false,
"comments": false|true,
"tags": true|false,
"sections": [],
"properties": []
},
{
"type": "home",
"file": "home.nvt.html",
"uses": "structure",
"gallery": false,
"statistics": true,
"sections": [],
"properties": []
}
]
Vamos a explicar cada propiedad de la definición de una plantilla:
- enabled — cuando es "false" la plantilla está oculta y todas las páginas que la utilizan no se mostrarán
- uses - la plantilla puede asignarse a una rama de estructura, a un elemento o a los dos (por defecto)
- permission — nivel de acceso de las páginas que usan esta plantilla
- 0: todo el mundo (por defecto)
- 1: Sólo usuarios registrados e identificados en Navigate CMS
- 2: oculto para todos
- gallery — muestra la pestaña de galería (al editar el contenido en Navigate CMS)
- statistics — tener en cuenta las visitas a esta página en la función de estadísticas
- comments — esta plantilla permite publicar o no comentarios (mostrar pestaña Comentarios)
- tags — mostrar el campo "etiquetas" en el formulario de edición
- sections — conjunto de definiciones de secciones (ver más abajo)
- properties — conjunto de definiciones de propiedades (el mismo formato que opciones del tema, consulta Configuración y opciones)
Plantillas > Tipos de página (en Navigate CMS 1.7.4)
home
content
gallery
blog
blog_entry
item
list
contact
search
newsletter
portfolio
portfolio_item
not_found
También puedes usar tus propios tipos de plantilla; para evitar problemas de compatibilidad, se recomienda añadir el código del tema antes del nombre de la plantilla, por ejemplo: ocean_content_fullwidth (recuerda que si una cadena con ese código se encuentra en el diccionario, una traducción / texto legible aparecerá en Navigate CMS, por ejemplo "Ocean | Contenido (ancho completo)").
Plantillas > Definición de secciones
sections:[
{
"name": "título de la sección o código de cadena en el diccionario",
"code": "nombre interno de la sección, SIN ESPACIOS",
"editor": "qué editor debe usarse para esta sección: tinymce | raw | html"
},
{
"name": "intro_fullwidth",
"code": "intro",
"editor": "tinymce",
"width": "960"
},
{
"name": "#main#",
"code": "main",
"editor": "tinymce",
"width": "610"
}
]
El nombre de la sección de código especial "#main#" hace que Navigate CMS muestre la cadena "Contenido principal", la cual no es necesario añadir como traducción en el diccionario del tema.
Plantillas > Definición de propiedades
properties:[
{
"id": "id de la propiedad, úsala en etiquetas ",
"name": "título de la propiedad, @traducción",
"element": "item|structure",
"type": "valor",
"dvalue": "5",
"custom_property": "valor de la propiedad especial"
},
{
"id": "slideshow_pause",
"name": "@slideshow_pause",
"element": "item",
"type": "value",
"dvalue": "5"
}
]
El campo "element" indica a Navigate CMS dónde debe mostrarse el campo de la propiedad (editando un elemento o editando una entrada de la estructura). Haz clic aquí para obtener la lista de todos los tipos de propiedad disponibles.
Bloques
"blocks": [
{
"id": "id del tipo de bloque (para usar en etiquetas )",
"code": "código interno para este tipo de bloque",
"title": "Título",
"type": "tipo del bloque",
"width": 0,
"height": 0,
"order": "ordenación para este tipo de bloques"
},
{
"id": "ocean-home-slider-item",
"code": "ocean-home-slider",
"title": "@ocean_home_slider",
"type": "block",
"width": 960,
"height": 330,
"order": "priority"
}
]
La anchura y la altura se exigen únicamente si el tipo de bloque tiene un tamaño fijo (por ejemplo, para un bloque de la barra lateral con un máximo de 200 píxeles de ancho y una altura variable, indicaríamos anchura: 200 altura: 0).
Tipos de bloques:
- block — bloque genérico, editable en Navigate CMS
- theme — bloque específico del tema => el widget del tema debe preocuparse de generar este tipo de bloque.
- En el futuro, añadiremos más tipos de bloques, como "mapa", "encuesta", etc...
Tipos de ordenación
- single — sólo mostrar un bloque, el que se encuentre primero
- priority — seguir el orden asignado en Navigate CMS
- random — orden aleatorio, pero teniendo en cuenta las posiciones fijas de los bloques dadas en Navigate CMS
Ejemplos de contenido
El tema puede proporcionar contenido de ejemplo para demostrar cómo un tipo de página determinado puede ser creado.
content_samples: [
{
"title": "título para el contenido de ejemplo",
"file": "ruta al fichero html desde la raíz del tema"
},
{
"title": "Home",
"file": "samples/home.html"
}
]
Estos contendos de ejemplo pueden ser vistos e importados por un usuario al editar un contenido en Navigate CMS y así facilitarle la creación de una estructura de contenido compleja. Brevemente, sólo el contenido del div con id "navigate-theme-content-sample" será copiado en el editor.
Fichero de ejemplo de contenido
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../css/blue/global.css" />
<link rel="stylesheet" href="../css/blue/blue.css" />
<div id="navigate-theme-content-sample">
<div class="page-title">
<h2>Aquí el título</h2>
<div class="page-content-separator"></div>
</div>
</div>
0 Comentarios