Cómo agregar el slug de la página a la clase body en WordPress

Hemos trabajado en muchos sitios de WordPress a lo largo de los años, y un truco de personalización al que siempre volvemos es agregar el slug de la página a la clase body. Es algo muy simple, pero marca una gran diferencia cuando se trata de flexibilidad de diseño.

Aquí es a lo que nos referimos: Probablemente te ha pasado antes: quieres estilizar solo una página de manera diferente al resto de tu sitio. Sin el slug de la página en tu clase body, terminas lidiando con selectores CSS complejos o creando hojas de estilo separadas.

Agregar un slug de página en el tema de WordPress te permite hacer todas las personalizaciones que desees sin complicaciones. Puedes cambiar fácilmente los colores, fuentes y otros elementos en páginas individuales sin afectar el resto de tu sitio.

En este artículo, te mostraremos cómo agregar un slug de página en la clase body de tus temas de WordPress. Hemos utilizado este método en todo, desde sitios empresariales simples hasta tiendas de comercio electrónico complejas.

¿Por qué agregar un slug de página en la clase body de tu tema?

Si buscas personalizar páginas específicas de tu sitio y quieres identificar correctamente la página, entonces agregar un slug de página en la clase body de tu tema es realmente útil.

Por defecto, tu sitio de WordPress solo mostrará las clases de ID de publicación, lo que puede ser complicado a la hora de reconocer la página correcta. Un slug de página muestra la URL de tu publicación de blog, lo que facilita la personalización de la página.

Además de eso, puedes realizar diferentes personalizaciones en tus páginas usando una clase de cuerpo de slug de página. Por ejemplo, puedes cambiar la fuente y los colores de una publicación en particular o resaltar un botón de llamada a la acción en una página de destino específica.

Dicho esto, veamos cómo puedes agregar el slug de la página a la clase de cuerpo de tu tema de WordPress.

Agregar un slug de página en tu tema de WordPress

Para ayudarte a agregar la URL de tu página a la clase de cuerpo de tu tema de WordPress, puedes ingresar el siguiente código en el archivo functions.php de tu tema.

function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

Puedes acceder a los archivos functions.php de tu tema yendo al Editor de Temas de WordPress (Editor de Código). Sin embargo, editar directamente los archivos del tema es muy arriesgado.

Esto se debe a que cualquier error al agregar el código puede romper tu sitio y bloquearte el acceso a tu panel de administración de WordPress.

Una forma mucho más sencilla de agregar el código a la clase de cuerpo de tu tema es usando un plugin de WordPress como WPCode. Lo usamos en varios sitios, consulta nuestra reseña completa de WPCode para obtener más información.

Con WPCode, puedes agregar fácilmente código a tu sitio en minutos y sin errores. Además, también asegura que tu código no se elimine si actualizas o cambias tu tema en el futuro.

También viene con una biblioteca de fragmentos de código creados por expertos que puedes instalar con un solo clic. Por lo tanto, no necesitas ninguna habilidad de codificación para realizar personalizaciones avanzadas de WordPress.

De hecho, agregar un slug de página a la clase del cuerpo está disponible como un fragmento prefabricado en la biblioteca de WPCode. Este es el método más fácil de seguir.

Primero, necesitarás instalar y activar el plugin gratuito WPCode en tu sitio. Para obtener instrucciones paso a paso, puedes consultar nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté activado, se agregará un nuevo elemento de menú llamado 'Fragmentos de código' a tu barra de administración de WordPress. Al hacer clic en él, accederás a la página donde administrarás todos tus fragmentos de código.

Para agregar tu primer fragmento de código, haz clic en el botón ‘Agregar nuevo’.

Esto te llevará a la página ‘Agregar fragmento’, donde puedes elegir un fragmento de código de la biblioteca predeterminada.

Simplemente busca el fragmento ‘Agregar la clase de página al cuerpo’ y, cuando lo encuentres, haz clic en el botón ‘Usar fragmento’.

Ahora, WPCode agregará automáticamente el código y establecerá el método de inserción correcto.

Todo lo que tienes que hacer es cambiar el interruptor de ‘Inactivo’ a ‘Activo’. Por último, haz clic en el botón ‘Actualizar’ en la parte superior de la página.

Ahora empezarás a ver una nueva clase de cuerpo generada de esta manera: page-{slug}. Usa esa clase para anular tus estilos predeterminados y personalizar elementos para páginas específicas.

Por ejemplo, digamos que querías estilizar tus widgets de barra lateral, pero solo en una página que tenga el slug “educación”. En ese caso, podrías agregar CSS de esta manera:

#sidebar .widgets{background: #fff; color: #000;}
.page-education #sidebar .widgets{background: #000; color: #fff;}

Para más detalles, puedes ver nuestra guía sobre cómo agregar CSS personalizado a WordPress.

Agregar el código personalizado manualmente

Si prefieres agregar el código personalizado de arriba manualmente, aquí te explicamos cómo hacerlo.

Primero, navega a la página Fragmentos de código » Agregar fragmento desde tu panel de WordPress.

Desde allí, ve a la opción ‘Agregar tu código personalizado (Nuevo fragmento)’ y haz clic en el botón ‘+ Agregar fragmento personalizado’.

Luego, necesitas seleccionar un tipo de código de la lista de opciones que aparecen en la pantalla. Para este tutorial, elige ‘Fragmento de PHP’.

Ahora, dale un título a tu fragmento de código, el cual es solo para tu referencia y puede ser cualquier cosa que te ayude a identificar el código.

Después de eso, simplemente copia y pega el código de arriba en el cuadro ‘Vista previa del código’.

A continuación, desplázate hacia abajo hasta la sección ‘Inserción’. Aquí, puedes elegir el método ‘Inserción automática’ para insertar y ejecutar automáticamente el código en una ubicación específica de WordPress, como el panel de administración, el frontend y más.

Si no estás seguro, mantén la opción predeterminada ‘Ejecutar en todas partes’.

O bien, puedes elegir el método ‘Shortcode’. Con este método, el fragmento no se inserta automáticamente. Obtendrás un shortcode que puedes insertar manualmente en cualquier lugar de tu sitio.

Cuando estés listo, cambia el interruptor de ‘Inactivo’ a ‘Activo’ y haz clic en el botón ‘Guardar fragmento’ en la esquina superior derecha.

Para más detalles, puedes consultar nuestra guía sobre cómo agregar código personalizado en WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo agregar un slug de página en la clase del cuerpo de tu tema de WordPress. También puedes consultar nuestra guía sobre la clase del cuerpo de WordPress y cómo elegir el mejor software de diseño.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.