Estilos personalizados por página
En muchas ocasiones nos encontramos con la necesidad de tener un estilo diferente para algunas partes de nuestro Template de WordPress.
Todos los que hemos trabajado con diferentes diseñadores nos hemos encontrado con sus ocurrencias y desdichas, es algo normal y siempre hay alguna solución.
Por ejemplo, en algunas páginas queremos que el titulo tenga un tamaño diferente o un color porque va sobre un fondo, o que llame más la atención algún elemento común de la web, como puede ser un widget.
Hay muchas maneras de hacer esto, una muy común es añadir un estilo global en el body de la página y así trabajar sobre el en la hoja de estilos, a mí me gusta hacerlo usando el slug de la página en la que nos encontramos. Vamos a jugar con la funcion body_class() del template de WordPress.
Si miráis el código fuente de la página el tag del body tendrá varios estilos:
<body class="post-template-default single single-post postid-1 single-format-standard logged-in admin-bar no-customize-support">
Os explico como lo haría en varios pasos sencillos. Por cuestiones de organización siempre me hago una librería de funciones comunes y la incluyo en mi functions.php, suelo ponerlo en la primera línea del archivo.
include_once ("inc/funciones.php");
Con esto ya tenemos incluida nuestra librería, que como podéis ver esta dentro de la una carpeta inc, en nuestra carpeta del tema, con el nombre funciones.php. (Esta parte si queréis os la podéis ahorrar y meter esta función directa sin tener que incluir ninguna página, cuestión de organización)
En ella añadiremos todas las funciones que queremos añadir o utilizar en nuestras páginas del template.
Este es el código:
//Recuperar slug de la página actual
function getSlugPost(){
global $post;
$slug = '';
if(is_object($post)){
$slug = $post->post_name;
}
return $slug;
}
Continuamos modificando el tema, para poder usar la clase que vamos a generar lo que vamos a hacer es añadirla dentro de las clases del body, hay varias formas, la más común sería buscar la etiqueta body de nuestro tema y actualizar su código.
En mi caso:
<body <?php body_class(); ?>>
Se podria llamar desde aquí a la función :
<body <?php body_class(getSlugPost()); ?>>
Pero si no queréis darle vueltas al asunto y no buscar ni tocar más cosas del Template, podéis añadir estas líneas en el archivo functions.php
// Añadir CSS por filtro al estilo del body.
add_filter( 'body_class', function( $classes ) {
return array_merge( $classes, array( getSlugPost() ) );
} );
Con esto podéis comprobar en el código HTML generado de vuestra página estará una clase con el nombre del slug de la página dentro de la etiqueta body.
<body class="post-template-default single single-post postid-435 single-format-standard logged-in admin-bar no-customize-support estilos-personalizados-por-pagina">
Hasta aquí, lo más omplicado. Ya solo falta usar la hoja de estilo para poder editar las etiquetas personalizadas para esa página.
.estilos-personalizados-por-pagina .blog-title {
color:#FF0000;
}
Como veréis el título de esta página es de diferente color al resto, y es que os estoy probando el resultado obtenido de este post.Un saludo a todos, nos vemos en el próximo post, cualquier duda ya sabéis podéis usar mis redes o el formulario de la propia web.
(3 votos, promedio: 5,00 de 5)
Cargando...
