Añadir css a una página individual en wordpress

En anteriores post hemos hablado de las diferentes formas de añadir código css en wordpress. El problema es que a veces necesitamos que el código css que añadimos sólo sea leído por una de nuestras páginas individuales o post, ya sea por no alterar ciertas páginas o para no sobrecargar la página con código innecesario. Aquí van 3 métodos para añadir css a una página individual de wordpress:

Utilizar clase del body

Esta es la manera más rápida y sencilla de añadir css a una página individual en WordPress. Aunque no es la mas limpia y solo funciona en algunas plantillas.

Lo primero que tenemos que hacer es visitar como usuario la página a la que queremos añadir el código css e inspeccionarla pulsando la tecla F12.

A continuación veremos este panel, donde debemos buscar en el elemento <body> una clase con un id único. En este caso la clase sería page-id-2.

Ahora solo tenemos que colocarlo delante del selector del elemento que queramos alterar de la siguiente manera:

Si no sabes como insertar css visita este post.

Enlazar con archivo css

Para tener un fácil acceso, recomiendo crear una carpeta llamada css dentro de carpeta del tema, como se ve en la siguiente imagen e introducir nuestro archivo en la misma.

A continuación necesitaremos el id de la página. Para ello solo tenemos que colocar el cursor encima del nombre de la página en el listado de páginas de wordpress.

En la parte de abajo vemos el enlace y en el mismo, podemos ver post=2. Ese número 2 es el id de la página a la que queremos que afecte.

Ahora vamos a enlazar nuestro archivo css desde functions.php incluyendo el siguiente código al final del archivo.

add_action( 'wp_enqueue_scripts', 'css_custom_page');
function css_custom_page() {
  if (is_page ('2')) {
	wp_enqueue_style( 'custom', get_stylesheet_directory_uri() . '/css/estilos.css',false,'1','all');
  }
}

Insertar con el editor de wordpress

Lo único que tenemos que hacer es localizar la página y editarla con el editor de wordpress.

A continuación, crearemos un bloque de tipo html e introduciremos nuestro código css entre etiquetas <style>, como se ve en el ejemplo:

¿Conoces más formas? ¡ponlo en los comentarios!

¡No olvides dejar tu comentario!

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *