WordPress Child Themes y WPO

Desde hace unas cuantas versiones de WordPress que está disponible la opción de los Child Themes. Este sistema una de las cosas que pide es que, la creación de este sistema tiene como base hacer un @import del CSS padre.

En este sentido, aunque los ficheros PHP sobre escriben los otros, por lo que no hay afectación directa sobre el WPO, sí que hay un detalle que no es del todo correcto, y es precisamente ese, el base para crear un hijo, el de hacer ese import.

Y es que los @import son una de las reglas “prohibidas” en cuanto a WPO. Así que… ¿qué solución tenemos para arreglar esto?. La primera de ellas es hacer un copy & paste de todo el contenido del fichero. ¿Problema? Que si hay una actualización de la plantilla padre la información de la plantilla hijo no se actualizará.

La otra opción, que es algo más elaborada, lo que viene a hacer es lo mismo pero de forma automatizada. Para empezar el fichero no será un CSS al uso, sino que será físicamente un fichero PHP. En esa carpeta tendremos que incluir un .htaccess que haga un “rewrite” del .CSS al .PHP. Con esto tenemos solventado que el sistema vea que eso es una hoja de estilos válida. El fichero .htaccess será algo tal que así:

RewriteEngine On
RewriteRule ^style.css style.php

Ahora lo siguiente es automatizar el fichero .CSS. Para ello debemos hacer un par de temas. Lo primero es pensar que es un fichero programado, de forma que hay que devolver el contenido en el formato correcto. Así, la primera línea del fichero será algo tal que:

header('Content-Type: text/css');

Lo siguiente será incluir el contenido del fichero CSS original. Por ejemplo:

$contenidocss = trim(file_get_contents('../twentyeleven/style.css'));
if($contenidocss) {
  echo $contenidocss;
}

Si lo juntamos todo, nos quedaría algo similar a esto en el fichero style.php:

<?php
header('Content-Type: text/css');
?>
/*
Theme Name:     Twenty Eleven Child
Theme URI:      http://example.com/
Description:    Child theme for the Twenty Eleven theme 
Author:         Your name here
Author URI:     http://example.com/about/
Template:       twentyeleven
Version:        0.1.0
*/
<?php
$contenidocss = trim(file_get_contents('../twentyeleven/style.css'));
if($contenidocss) {
  echo $contenidocss;
}
?>
// a partir de aquí van los cambios y nuestros retoques del CSS
body {
  font-family: Verdana;
}

Con esto conseguiremos que el waterfall del sitio web no se vea bloqueado por culpa de ese @import en el CSS, que además siempre está al principio de las peticiones y no tiene ningún sentido.

4 comentarios en “WordPress Child Themes y WPO”

  1. ¡Genial! Era exactamente lo que buscaba, porque los child theme permiten ahorrarte muuucho trabajo y hay temas de WordPress muy bien construidos (Twenty Twelve por ejemplo).

    Muchísimas gracias.

  2. Yo lo que hago con este tema es “encolar” la hoja de estilos del template padre:

    function my_enqueue_styles() {
    wp_enqueue_style( 'my-styles', '/wp-content/themes/tema_padre/style.css');
    }
    add_action('wp_enqueue_scripts','my_enqueue_styles');

    Poniendo este código en el functions.php de nuestro template (hijo) tendremos en el head la etiqueta con los estilos del tema padre.

  3. No sé, del tema no se realmente nada, pero sustituir un @import por un archivo PHP + htaccess + file_get_contents no veo la optimización por ningún lado ¿hay números que demuestren que esto es más optimo?

  4. Me ha gustado la idea, pero propongo otra solución intermedia.
    Para poder seguir escribiendo en el style.css, hacer la redirección y crear el style.php como tu sugieres pero desde el, no pegar el contenido del CSS, sino dejarlo donde está y hacer otro file_get_contents del style.css del Child Theme.

    ¿Qué opinas?

Deja un comentario