Anulaciones visuales CSS

Casi todos los temas tienen opciones que no se pueden implementar con una simple adición de clase CSS, como opciones de color que permiten al usuario seleccionar el color desde el selector de color.

Como usar el atributo de estilo no es una solución elegante, hemos creado una alternativa que le permite crear código CSS personalizado sobre la marcha durante el proceso de representación del sitio web.

Para ello, cree un archivo visual-override.js en el directorio de su tema y cree una función que se utilizará para generar código CSS adicional según los parámetros de opciones:

/*
 * Custom function used to generate the output of the override.css file
 */

var generateOverride = function(themeConfig, postConfig, commonConfig, pageConfig) {
    return `
        body {
            background: ${themeConfig.primaryColor};
            font-size: ${themeConfig.fontSize}px;
        }
    `;
};

module.exports = generateOverride;
Copiar

Su función debe poder utilizar cuatro argumentos:

  • themeConfig : contiene un objeto con todos los valores de las opciones de su tema personalizado
  • postConfig : contiene opciones que son específicas de la publicación.
  • commonConfig : contiene otras opciones como la longitud del extracto, publicaciones por página, etc.
  • pageConfig : contiene opciones que son específicas de la página.

La función debe devolver el código CSS que se vinculará con el archivo CSS principal del tema.

Recomendamos utilizar cadenas multilínea de JavaScript para una mejor legibilidad del código.

arriba