CMS
Nos enfocaremos en los CMS más populares programados en PHP, como Joomla, Wordpress, Drupal y Prestashop, que utilizan HTML, CSS, JavaScript y PHP con alguna otras bibliotecas.
Si buscas un programador de cms te puedo ayudar esta entrada.
- Andres Cordeiro
- Joomla
Hace poco comenzamos a actualizar una plantilla antigua de Joomla 3 a Joomla 5. Desde Joomla 4.0 se recomienda que, en producción, las plantillas finales guarden sus recursos como CSS, JavaScript e imágenes dentro del directorio media. Esto ayuda a que Joomla sea más rápido y a que la instalación esté más organizada.
El resto de archivos —index.php (la estructura base), overrides de componentes, plugins y módulos— se mantienen en templates/nombrePlantilla.
El problema que nos surgió fue el siguiente:
¿Cómo trabajar en desarrollo con todos los recursos juntos y luego generar una plantilla lista para publicar siguiendo las buenas prácticas de Joomla?
En este artículo te voy a contar cómo Joomla gestiona la instalación de plantillas, cómo usar templateDetails.xml y joomla.asset.json para tener un flujo de trabajo limpio y versionable y cómo pasar fácilmente de desarrollo a producción sin romper rutas.
Un flujo de trabajo cómodo: todo junto en desarrollo, separado en producción
Durante el desarrollo de una plantilla Joomla es más cómodo tener todos los archivos en una sola carpeta. La clave está en que, al empaquetar la plantilla para producción:
- Los archivos PHP, overrides y estructura base deben ir a
templates/nombrePlantilla - Los recursos estáticos (CSS, JS, imágenes) deben ir a
media/templates/site/nombrePlantilla
Para esto Joomla nos da dos herramientas clave: templateDetails.xml y joomla.asset.json.
templateDetails.xml: organizando la instalación de la plantilla
El archivo templateDetails.xml es fundamental. Aquí le indicamos a Joomla qué archivos instalar, dónde colocarlos y cómo manejar la plantilla desde el administrador.
<files> – Archivos de la carpeta de la plantilla
En esta sección definimos los ficheros que van directamente a la carpeta principal de la plantilla. Ejemplo (de Cassiopeia):
<files>
<filename>component.php</filename>
<filename>error.php</filename>
<filename>index.php</filename>
<filename>joomla.asset.json</filename>
<filename>offline.php</filename>
<filename>templateDetails.xml</filename>
<folder>html</folder>
</files>
<media> – Recursos que irán al directorio media
Aquí definimos qué carpetas del paquete se instalarán en el directorio media de Joomla. Esto es lo que nos permite separar los assets de la lógica de la plantilla.
Ejemplo:
<media destination="templates/site/cassiopeia" folder="media">
<folder>js</folder>
<folder>css</folder>
<folder>scss</folder>
<folder>images</folder>
</media>
Con esto, al instalar la plantilla, Joomla colocará esos archivos en: media/templates/site/cassiopeia/
¿Cómo decide Joomla de dónde cargar los assets?
Aquí entra en juego joomla.asset.json, un archivo que Joomla usa desde la versión 4.0 para gestionar la carga de recursos. Este archivo nos permite declarar cada asset, asignarle un nombre único y establecer su ruta, evitando tener que tocar el index.php.
Ejemplo:
{
"name": "tpl_svbasic.bootstrap",
"type": "style",
"uri": "templates/solucionesvigobasicresponsiveJ5/css/bootstrap.min.css"
}
- name → nombre único del recurso.
- type → tipo de recurso (
stylepara CSS,scriptpara JS, etc.). - uri → ruta desde la raíz de Joomla.
Cargando un asset en Joomla
Si tenemos el recurso definido en joomla.asset.json, lo podemos cargar así:
use Joomla\CMS\Factory;
$app = Factory::getApplication();
$doc = $app->getDocument();
$wa = $doc->getWebAssetManager();
$wa->useStyle('tpl_svbasic.bootstrap');
O incluso registrarlo y usarlo directamente:
$wa->registerAndUseStyle(
'tpl_svbasic.bootstrap',
'templates/solucionesvigobasicresponsiveJ5/css/bootstrap.min.css'
);
Estrategia para desarrollo y producción
En desarrollo, trabajamos con las rutas dentro de la carpeta templates:
{
"name": "tpl_svbasic.bootstrap",
"type": "style",
"uri": "templates/solucionesvigobasicresponsiveJ5/css/bootstrap.min.css"
}
En producción, cambiamos la ruta para que apunte al directorio media:
{
"name": "tpl_svbasic.bootstrap",
"type": "style",
"uri": "media/templates/site/solucionesvigobasicresponsiveJ5/css/bootstrap.min.css"
}
Así conseguimos:
- Tener todos los recursos juntos y fácilmente versionables durante el desarrollo.
- Cambiar solo la ruta al empaquetar la plantilla.
- Hacer que Joomla coloque automáticamente cada archivo en su sitio durante la instalación.
Ventajas de este método
- Entorno de trabajo limpio y controlado.
- Cumple con las recomendaciones oficiales para plantillas Joomla 4 y Joomla 5.
- Evita rutas rotas y búsquedas interminables en el código.
Si desarrollas plantillas Joomla, este flujo de trabajo es una de las formas más cómodas y seguras de gestionar las rutas y cargar assets desde media, sin perder el control durante el desarrollo y sin complicaciones al publicar.
Un cliente nos indica que tiene unos problemas en varias instalaciones de Prestashop que tiene en su servidor. Lo primero que hacemos es una copia de seguridad y la movemos a nuestro servidor local.
Sabemos que hay módulos para hacer esto y seguro que luego tiene auto-instaladores para poder hacerlo más cómodo, aunque nosotros somos cabezones, optamos por la forma tradicional:
- Comprimir el código desde el administrador de archivos del servidor.
- Realizamos una copia de la base de datos con phpmyadmin del servidor.
No bajamos, esos ficheros hacemos los siguiente:
- Descomprimimos en la carpeta raíz de nuestro servidor local, en nuestro caso montamos un site en nuestro apache.
- Creamos la Base Datos e importamos los datos que nos bajamos.
- Cambiamos datos en tabla `ps_shop_url`
Luego, según los manuales y tutoriales, tenemos que ir al fichero que está app/config/parameters.php, donde cambiamos las variables de la base de datos por el nombre de la base de datos y usuario que hayamos generado en nuestro servidor de base de datos local.
Ahora debería funcionar, pero como soy precisamente una persona con fortuna, NO FUNCIONA.
Prestashop página en blanco en Front-end.
Pues no aparece una página en blanco en Front End, pero sin indicar error en log, pues revisa si existe el fichero index.php, este error me tuvo loco varias horas. :-)
Si lo eliminas, entonces cargar index.php (esto incluye como tengas configurado tu servidor local), ahora debería mostrar página o el error.
Error de conexion de nuestro prestashop en los log
Si vamos al back-end a la parte administrativa, que es el directorio que empieza adminxxxxx, pues ahí nos indica el siguiente error en log, que no es posible conectarse a una base datos, pero nos indica la nombre de base datos que tenía en el servidor.
Este error NO es que no pusieras bien los datos de conexión en el fichero de parameters.php, realmente es un error cache, ya que nosotros no eliminamos el caché, antes de hacer la copia de seguridad.
Borrar cache prestashop
Nosotros eliminamos directamente todo el contenido var/cache/prod
Es más fácil, eliminar el cache antes hacer la copia de seguridad del código, en la parte administrativa.
Nos redirecciona al dominio del prestashop.
Si en vez ejecutar nuestra instalación, lo que hace es redireccionarnos a dominio de donde sacamos la copia, eso que no hicimos correctamente, el punto 4, cambiar datos en la tabla ps_shop_url.
Weblinks es una extensión de Joomla que nos permite hacer un directorio de enlaces externos de una forma sencilla e intuitiva. Nosotros los utilizamos en esta web, aquí puede ver nuestro directorio de links que tenemos apuntados.
Este componente (extensión) de Joomla, hasta la versión 2.5 venía incluido, era una extensión Nativa de Joomla, pero en la versión 3.0 dejaron de incluirlo en el paquete de instalación. En la versión 4 de Joomla se rumoreaban que no se iba a continuar, aunque existe una versión para 4.0, sigue existiendo en JED de Joomla para poder descargarlo, aunque lleva un año sin actualizarse.
Nosotros aparte de utilizarla como un directorio, la utilizamos para insertar los enlaces a fuera de la web, el motivo de utilizarlo así es:
- Controlar los links rotos: Muchas veces cuando añadimos un link en un post, al cabo del tiempo lo cambia o lo quitan, esto es un problema y para detectarlo es muy sencillo si los tenemos registrados en una base de datos, que con una consulta podríamos comprobarlos todos.
- Estadísticas de pulsaciones: Saber qué links realmente hacen clic o no.
¿Cómo usamos Weblinks en nuestra web?
Una vez lo tengas instalado, pues vas a componentes y vas Enlaces Web, luego es muy sencillo añades enlaces y las categorías que quieres, es muy parecido al componente de contenido de artículos, con la diferencia que tienes un campo donde poner la URL.
Luego, si lo quieres mostrar en la web, simplemente añade el item de menu en donde quieres añadir. Al igual que un artículo o una categoría artículos.
Nosotros aparte utilizarlos como directorio de links, lo utilizamos para añadir los links en nuestros artículos por los motivos que ya indicamos antes.
Para añadir un link que tenemos en el componente Weblinks en un artículo, va a depender del editor que tengas, nosotros utilizamos JCE para la mayoría de los proyectos, por lo que simplemente pulsamos en icono de link, buscamos el componente enlace y ahí buscamos el link que deseamos añadir.
Donde lo puedo descargar Weblinks
En JED si buscas weblinks aparece, en la página oficial de Joomla puede descargar, te pongo aquí el link.
Existe un repositorio oficial, extensión weblink, donde puede ver si continúan o no el proyecto.
Si recibes un email de tu web que en el asunto "Error con su forma de pago paypal en su tienda online" y en el body del email pone:
"Hola,
Error con su forma de pago paypal en su tienda Online. Los detalles están logueados en el archivo paypal.2.log.php
El equipo de VirtueMart"
No te asustes, es un error que se produjo en Pay Pal, en el archivo que indica, podras ver que tipo error fue.
Ahora voy tratar el siguiente error os indico que le apareció a varios clientes que les llevamos el mantenimiento web.
"ERROR checkPaypalIps: Error with REMOTE IP ADDRESS "
The remote address of the script posting to this notify script does not match a valid PayPal IP address
Si a ti, te aparece otro error no dudes en ponerte en contacto con nosotros y te lo estudiamos.
Este plugin te permite hacer una copia de seguridad de tu sitio y además tiene un auto-instalador que te permite forma muy sencilla poder mover tu wordpress a otro servidor, cambiando las rutas que tanta lata dan en wordpress, por su forma de gestionarla.
Estoy muy familiarizado con Akeeba, ya que lo utilizo Joomla.
Realmente lo empleo para instalar en servidor local, para poder realizar cambio y modificaciones nuestro wordpress.
Akeeba en Wordpress por defecto no te permite descargar las copias de seguridad desde el navegador, si quieres activarlo tienes que ir Panel de Akeeba > System Management > System Configuracion. Ahí tiene buscar la opcion: " Allow backup archive downloads through the browser " y poner YES.
Aunque el creado, ya nos advierte que:
"¿Debo mostrar la opción de descargar los archivos de respaldo a través del navegador, aunque no es recomendable? Tenga en cuenta que esta opción NO estará disponible si ha habilitado WP_DEBUG, o si la visualización de errores de PHP está habilitada como precaución básica contra descargas corruptas (rotas o incompletas). ¡ADVERTENCIA! Al habilitar esta opción, acepta no recibir ningún soporte por problemas relacionados con la extracción de archivos de respaldo."
System Management
System Configuracion.
Y la opción:
Aunque a mi, de momento nunca me dio ningún problema.
Las plantillas , sobretodo en los CMS son una de las parte importantes a tener en cuenta a la hora crear tu pagina, ya que son las encargadas de mostrarnos el contenido de nuestra web.
En esta entrada pondre algunos sitios donde puede encontrar plantillas, para muchos CMS, plantilla Html, plantillas plataformas web de todo tipo. En resumen una repolizacion completa de plantillas de todos tipo, ideal para utilizarlas o para sacar ideas. :-)
Hoy me solicitarón añadir el plugin Google Tag Manager a un Joomla 4, como podemos ver es un plugin que solo es compatible para Joomla 3 y su ultima version es de 24 Junio 2020.
Pues nos ponemos manos a la obra , instalamos y va perfectamente la instalación.
Ahora activamos el plugin , tachan ERROR en JREQUEST!!!
La intención con este post es ir anotando las errores que vamos encontrando para ello vamos diferencias cuando lo tenemos instalado en joomla 3.10.11 o en joomla 4.2.3, ya que hay errores diferentes en ambos.
Virtuemart 4.0.6.10690
- No encuentra en productos con la Ñ, en las versiones anteriores si lo hacía.
Busque cual era el error y encontré que en la clase de producto /administrator/components/com_virtuemart/models/product.php en la linea 454 tenía un filtro de string con el siguiente código:
$keyword = vRequest::filter(html_entity_decode($keyword, ENT_QUOTES, "UTF-8"),FILTER_SANITIZE_FULL_SPECIAL_CHARS,FILTER_FLAG_ENCODE_LOW);
Si lo sustituimos por uno menos estricto, por este:
$keyword = vRequest::filter(html_entity_decode($keyword, ENT_QUOTES, "UTF-8"),FILTER_SANITIZE_SPECIAL_CHARS,FILTER_FLAG_ENCODE_LOW);
Pues funciona , perfectamente.
El caso es que cuando fui ver si le podía mandar un issue a los creadores, me doy cuenta que en las nuevas versiones ya lo resolvieron, y lo cambiaron muchos mas ficheros, no me diera cuenta que fallaban también.
Llegué tarde :-)
Cambiar el favicon de la plantilla cassiopeia debería ser un parametro, esto lo comento para el proyecto de Pablo Arias que quiere montar una plantilla básica con cassiopeia pero con mas opciones. :-)
Al tajo, busco informacion y como siempre voy a las webs conocidad:
"Como cambiar el favicon en la plantilla de cassiopeia de Joomla 4" de Sergio Iglesias
En esta entrada lo explica super bien , donde poner el favicon , para las versiones anteriores 4.1.1 y para las superiores.
Lo unico que yo añadiría a esa entrada es explicar como carga el favicon , me explico:
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']);
$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);
Como bien dice en la entrada Sergio, esas son la lineas que cargan el favicon y se pone las tres por los distintos navegadores.
La cuestion es que si tu en la ruta que indica que pongas tu favicon.
media/templates/site/cassiopeia/images/tufavicon.ico
Si haces como yo que solo pongo un favicon ( ico), como mi navegador admite los favicon svg, la primera linea carga el svg, pues entonces muestra ese favicon y no el que acabo de poner.
Mi solucion rápida es comentar la primera linea, aunque lo mejor sería conseguir el favico en ese formato. :-)
Me imagino que lo navegadores que solo admitan los mask-icon, cargaran la segunda linea no la primera.