(Tiempo estimado: 2 - 4 minutos)

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:

templatedetails protostar

Como puedes ver, esto nos genera una serie de campos configurables desde la parte de administración:

campos personalizados protostar

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):

<fieldset name="personalizado">
<field name="ganalytics" class="" type="textarea" label="Google Analytics" description="Introduzca el código de Google Analytics"></field>
<field type="spacer" name="redessociales" label="<hr/><b>Redes sociales</b>">
<field name="twitter" type="text" default="" label="Twitter" description="URL al perfil de Twitter"></field>
<field name="facebook" type="text" default="" label="Facebook" description="URL al perfil de Facebook"></field>
<field name="linkedin" type="text" default="" label="LikedIn" description="URL al perfil de LikedIn"></field>
</field></fieldset>

Ahora lo que se genera en la parte de administración

campos personalizados nuevos protostar

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:

<!-- Personalizado -->
<div id="personalizado">
<a href="<?php echo $params->get('facebook'); ?>" class="btn btn-primary">Facebook</a>
<a href="<?php echo $params->get('twitter'); ?>" class="btn btn-info">Twitter</a>
<a href="<?php echo $params->get('linkedin'); ?>" class="btn btn-primary">LinkedIn</a>
<hr>
</div>

El resultado es el siguiente:

campos personalizados front protostar

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.

Sobre el autor, Sergio Iglesias

Sergio Iglesias

Sergio Iglesias es formador, desarrollador y front-end del CMS Joomla!. A través de su blog y sus cursos puedes aprender a desarrollar tu propio portal web autogestionable.

 

¿Te ha gustado el artículo? ¡Suscríbete YA!

¿Necesitas un sitio web que funcione?

¿No quieres depender de nadie para gestionar tu página web?

Recibe contenido exclusivo y GRATIS mi curso sobre desarrollo de plantillas Joomla!


Me apunto ya!

Comentarios

#2 sergiois 18-04-2016 13:19
Hola Carlos,

Gracias por comentar y perdona por tardar en contestar (he estado un tanto liado con varios temas).

A priori veo bien el desarrollo del módulo y no debería darte ningún problema protegiendo el fichero.
Además es una recomendación (obligación) ponerlo por temas de seguridad.

Tienes más información en la documentación oficial: https://docs.joomla.org/J3.x:Creating_a_simple_module/Developing_a_Basic_Module/es

Un saludo,
Citar
#1 Carlos 14-04-2016 11:34
¿Cómo puedo poner (recuperar) un campo de Community Builder en joomla? Me refiero a un dato que se ha introducido anteriormente en el perfil del usuario y que figura en la BBDD de joomla.

He conseguido crear un módulo php para mostrar el dato, mostrando las variables del usuario o atacando directamente por SQL para acceder al resto de datos personalizados de la tabla del CM. Pero no sé si es la manera correcta.

Las variables de sesión las consigo con:
echo 'User: ' . $user->username . '';

Y las del community builder con:
$query = "SELECT cb_micampodelCB FROM j3x_mitablaCB WHERE id = ". $user -> id;
// ...
echo 'Campo personalizado de CB: ' . $datos_usuario- >cb_micampodelC B . '';

¿Tendría que proteger este módulo php para que no se acceda directamente o lo estoy utilizando mal? Si protejo la página no me carga.
defined('_JEXEC ') or die('Restricted access');

Saludos.
Citar

Escribir un comentario

Puedes publicar el comentario que quieras, pero si lo considero SPAM será eliminado automáticamente.

 

SergioIglesias.NET te informa que los datos de carácter personal que nos proporciones rellenando este formulario serán tratados por Sergio Iglesias Sánchez como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es, únicamente, para gestionar los comentarios de este blog. La legitimación se realiza a través del consentimiento del interesado. Te informamos que los datos que nos facilitas estarán ubicados en los servidores de SiteGround (proveedor de hosting). Ver política de privacidad de Siteground. El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no pueda atender tu solicitud. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@sergioiglesias.net así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad.

¿Quieres tener un sitio web que funcione?

Contacta conmigo