Crear CSS's y JS's dinamicos con PHP

A más de alguno se le habra presentado la necesidad de usar variables dentro de hojas de estilo (CSS's) o Scripts (JS), si nuestro servidor tiene soporte para PHP (Casi todos) esto no es un problema, en este ejemplo lo haré usando Joomla y creando un CSS, pero igual puedes implementarlo sin el, usando BD o cualquier otra forma que te sea conveniente.

Lo primero que debemos tener en cuenta es, como decía antes, que el servidor tenga soporte para PHP.

Lo que haremos será crear una llamada a nuestro archivo tal y como lo haríamos con un css normal con la diferencia que el archivo llamado en el src será nuestro .php, quedando algo como lo que sigue:

<link href="/css/custom_css.php" rel="stylesheet" type="text/css"></link>

Como comente antes, el ejemplo completo que pondré será usando información de las variables de Joomla, esto es utilizando un template que realice, en dicha plantilla tengo algunas opciones de configuración como color de fondo, color de textos, etc.. si no utilizas joomla la primer parte puedes saltarla.

Utilización del core de Joomla en archivo externo PHP:

<?php

define('_JEXEC', 1);
define('DS', DIRECTORY_SEPARATOR);

define('JPATH_BASE', realpath(dirname(__FILE__).'/../../..' ) . '');

require_once (JPATH_BASE . DS . 'includes' . DS . 'defines.php');
require_once (JPATH_BASE . DS . 'includes' . DS . 'framework.php');
require_once (JPATH_BASE . DS . 'libraries' . DS . 'joomla' . DS . 'factory.php');

$mainframe  = &JFactory::getApplication('site');
$params = JFactory::getApplication()->getTemplate(true)->params;​

Aquí lo que hago es utilizar el core para llamar a la información del template y poder utilizar las variables quedando algo así:

$templateBackgroundColor = $params->get('templateBackgroundColor');

Esto podría aplicarse también a componentes y módulos.

Lo siguiente será darle una salida al archivo .php en formato CSS agregando un content-type al header así:

header("Content-type: text/css; charset: UTF-8");

El header para javascript es:  header ('Content-Type: text/javascript; charset=utf-8');

Ya por ultimo, solo habrá que cerrar nuestra etiqueta PHP ( ?> ) y después empezar a meter el css utilizando nuestras variables declaradas antes, un ejemplo sería:

body { background: <?php echo $templateBackgroundColor;?> !important;}

Con lo que el código final quedaría algo así:

<?php

define('_JEXEC', 1);
define('DS', DIRECTORY_SEPARATOR);

define('JPATH_BASE', realpath(dirname(__FILE__).'/../../..' ) . '');

require_once (JPATH_BASE . DS . 'includes' . DS . 'defines.php');
require_once (JPATH_BASE . DS . 'includes' . DS . 'framework.php');
require_once (JPATH_BASE . DS . 'libraries' . DS . 'joomla' . DS . 'factory.php');

$mainframe  = &JFactory::getApplication('site');
$params = JFactory::getApplication()->getTemplate(true)->params;

$footerColorFondo = $params->get('footerColorFondo'); 
$FooterColorTexto = $params->get('FooterColorTexto'); 

header("Content-type: text/css; charset: UTF-8");
?>
body { background: <?php echo $templateBackgroundColor;?> !important;}
footer  { background: <?php echo $footerColorFondo;?>; color: <?php echo $FooterColorTexto;?>; }
?>

Usando esta misma técnica podría aplicarse también a JS, en mi caso particular lo estoy adaptando a un módulo de formularios para la validación y algunas otras funcionalidades.

Espero sus comentarios al respecto y que les sirva ;-)

Síganme en Twitter: @Javi_Mata