A la hora de desarrollar una plantilla para Joomla! es importante tener en cuenta los pequeños detalles que faciliten la vida al usuario final (o cliente).
Para esto puedes definir una serie de campos personalizados que el usuario final pueda utilizar para realizar ciertas funcionalidades o poner algunos datos personales: código de Google Analytics, enlaces a redes sociales...
Qué es un campo personalizado de una plantilla Joomla!
Se trata de un campo configurable desde la parte de administración de la plantilla que puede ser de diferentes tipos: texto, seleccinoable, checkbox, textarea...
Si quieres, puedes ver todos los tipos de campos en la documentación oficial de Joomla!
Usos de campos personalizados
Te presento a continuación algunos usos que puedes darle a estos campos personalizados:
- Google Analytics: puedes usar un campo de tipo texto para poner el ID de Google Analytics o un textarea para poner el código completo.
- Redes sociales: puedes usar un campo de tipo texto para poner la URL de cada una de las redes sociales que necesites (Twitter, Facebook, LinkedIn...).
- Color de diferentes elementos: puedes usar un campo de tipo color para que el usuario seleccione el color de los enlaces, por ejemplo.
- Logo: puedes usar un campo de tipo media para que el usuario suba su logotipo.
Cómo crear un campo personalizado de una plantilla Joomla!
Para crear un campo personalizado tienes que hacer uso del fichero templateDetails.xml en la sección de <config></config>, dentro del apartado de <fields name="params"></fields>
Dentro de esta sección puedes crear una o varias pestañas donde poner esta información.
Estas pestañas van definidas por un <fieldset name="nombre_seccion"><fieldset>
Y dentro de cada una van los campos que necesites o requieras para la plantilla.
A continuación te muestro la sección de config de la plantilla Protostar:
Como puedes ver, esto nos genera una serie de campos configurables desde la parte de administración:
Ejemplo:
Para este ejemplo voy añadir una pestaña para poner redes sociales y código de Google Analytics.
Primero pongo el código (que se pone en el fichero templateDetails.xml de protostar):
Ahora lo que se genera en la parte de administración
Y ahora paso a comentarte lo que hace este código:
- Lo primero que puedes ver es que hay que introducir un literal. El correspondiente a la cadena "COM_TEMPLATES_PERSONALIZADO_FIELDSET_LABEL". Este literal se genera de forma automática y, si te das cuenta, se corresponde al nombre que le he dado al fieldset (personalizado). De esta forma, la pestaña tendrá el nombre que quieras darle.
- El primer campo (field) es de tipo textarea y se utilizará para poner el código completo de Google Analytics.
- El segundo es de tipo "spacer". Se trata de un campo especial que se usa como separador y que nos permite poner un tedto en el label para saber, por ejemplo, a qué se corresponden los campos siguientes.
- Los siguientes campos son de tipo texto y se usarán para poner las URL de las redes sociales.
Con estos sencillos pasos ya tienes creados los campos personalizados a utilizar.
Aquí dependerá del proyecto y de las necesidades del mismo el crear los campos que se precisen.
Cómo usar un campo personalizado en una plantilla Joomla!
Una vez que ya has creado los campos como has podido ver en el punto anterior, te voy a contar cómo utilizarlos dentro de tu plantilla Joomla!.
Primero tendrás que rellenarlos con la información que creas oportuna (en la imagen siguiente te pongo unos datos de ejemplo).
imagen datos ejemplo
Para usarlos tendrás que editar el index.php de la plantilla protostar (ya que estamos usando esta plantilla como ejemplo).
Al abrirla, te darás cuenta de que existe una variable para recoger los valores de estos campos:
// Getting params from template $params = $app->getTemplate(true)->params;
Es decir, a través de esta variable $params podrás extraer el dato del campo que quieras.
En caso de que la plantilla sea a medida, tendrás que declarar esta variable de la misma forma que aperece en el código.
Para extraer, por ejemplo, el valor del campo de la URL de Twitter, tendrás que hacer lo siguiente:
echo $params->get('twitter')
Muy sencillo, utilizando el método get y el nombre del campo tenemos la URL.
Visto esto, te pongo el código que voy a utilizar para poner estos enlaces en la parte de front.
Dentro del index.php, en la línea 141 (justo debajo del div con la clase "container") ponemos estas líneas:
El resultado es el siguiente:
Como puedes ver en la imagen, se han creado 3 enlaces de tipo botón (arriba a la izquierda), cada uno con el enlace a la red social correspondiente.
A partir de aquí dependerá del tipo de los campos y de lo que quieras poner en tu sitio web.
Hasta aquí este pequeño tutorial sobre cómo crear una campo personalizado en una plantilla Joomla!
Espero que te haya resultado de interés.
Y recuerda que puedes aprender más sobre desarrollo de plantillas Joomla! en el curso gratuito que te ofrezco.
