Especificar un CSS Diferente por Post en Wordpress

En este artículo vemos como especificar diferentes CSS por post en WordPress gracias al archivo functions.php de nuestro tema.

Las hojas de estilo (CSS) son una herramienta excelente e imprescindible para lograr esa presentación profesional que buscas para tu sitio web o tu blog Wordpress.

Una idea que dará un atractivo adicional a tus páginas es la de especificar un CSS diferente por cada post en Wordpress. Es decir, según ciertas reglas que tú determinarás, el aspecto de cada entrada o página variará de acuerdo con su contenido, ubicación, importancia u otras variables. Esta idea la he sacado del post custom CSS per post de Digging into WordPress.

Hay diferentes criterios que puedes utilizar, desde diferenciar cada post según el tema que aborde, hasta agrupar diferentes páginas pertenecientes a una misma categoría y presentar el grupo con similares colores, tipos de letras y otras características. Existen diversos medios para conseguir el resultado buscado. Lo ideal es que el método que elijas, que probablemente incluirá alguna modificación a los archivos del tema que utilices, sea lo más claro posible, para evitar así complicaciones en la actualización del código y/o futuras confusiones.

Agregar Código CSS en el Editor

Un sistema simple y efectivo para especificar un CSS diferente por post en Wordpress, consiste en automatizar la adición de características CSS en la pantalla del editor de posts o páginas. Esto es, cuando ingreses para agregar o modificar un artículo, el editor te presentará un espacio que tú podrás llenar con el código CSS que desees aplicar y que se superpondrá al código preexistente. Éste es un sistema sencillo, salvo que debes adicionar algunas líneas de código en el archivo “functions.php” del tema que utilices.

Modificar el Archivo functions.php

Para lograr que el editor te presente un rectángulo donde puedas ingresar un código CSS propio, debes modificar el archivo de funciones, “functions.php”, del tema que estés utilizando. El texto que debes agregar al final del archivo es el que especifican en el artículo bajo el título Custom Panel (no sé porqué razon no me deja copiarlo el editor de WordPress).

Funcionamiento de este código

El código que has agregado a tu archivo “functions.php” producirá el siguiente efecto:

• Cada vez que ingreses un nuevo post o una nueva página (o cuando accedas para modificarlos), aparecerá un casillero con la leyenda “Ingresa CSS para esta entrada”, o “Ingresa CSS para esta página”.
• En el espacio asignado debes escribir el código CSS que modificará los atributos del post o de la página de acuerdo con el estilo que desees imprimirle.
• Una vez ingresado el código de estilo, utiliza el botón de “actualizar” (o el de “publicar” si se trata de un nuevo artículo). La próxima vez que muestres la página o el post modificado, verás los cambios que has efectuado sobre sus atributos.
• No olvides que si trabajas con más de un tema, debes ingresar el código en los archivos “functions.php” de cada tema.

Nota que los nombres variables utilizados en el código están precedidos por el prefijo “micss_”; con ello evitamos que nuestros nombres se dupliquen con algunos de los usados por la plantilla Wordpress.

Cómo Probar el Funcionamiento

En el casillero que esta nueva función presenta en la pantalla de edición, puedes añadir un código como el que sigue, por ejemplo:

<br>.entry-content h4 {<br>	color: #000;<br>	font-size: 17px;<br>	font-style:  italic;<br>}<br>

Prueba ahora cómo se ve tu página. Debería mostrar el estilo habitual. Acto seguido, cambia algo. Por ejemplo, el color. O indica un font-size: 32. Verás cómo la vista preliminar de tu página o de tu artículo cambiará de acuerdo con las nuevas características que elegiste.