Cómo añadir el slug de la página a la clase de cuerpo 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 añadir el slug de la página a la clase del cuerpo. Es una cosa tan simple, pero hace un mundo de diferencia cuando se trata de la flexibilidad del diseño.

Añadir un slug de página en el tema de WordPress te permite hacer todas las personalizaciones que quieras sin complicaciones. Puede cambiar fácilmente los colores, fuentes y otros elementos en páginas individuales sin afectar al resto de su sitio.

En este artículo, le mostraremos cómo añadir un slug de página en la clase cuerpo de sus temas de WordPress.

¿Por qué añadir un slug de página en la clase cuerpo en su tema?

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

Por defecto, tu sitio WordPress solo mostrará las clases de ID de entrada, lo que puede ser complicado a la hora de reconocer la página correcta. Un slug de página muestra la URL de la entrada de tu blog, haciendo más fácil personalizar la página.

Además de eso, puede realizar diferentes personalizaciones a sus páginas utilizando una clase de cuerpo de slug de página. Por ejemplo, puedes cambiar la fuente y los colores de una entrada concreta 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 añadir el slug de página en la clase cuerpo de tu tema de WordPress.

Añadir un slug de página en su tema de WordPress

Para ayudarte a añadir la URL de tu página en la clase cuerpo de tu tema de WordPress, puedes introducir 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' );

Puede acceder a los archivos functions.php de su tema accediendo 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 añadir el código puede romper su sitio y bloquear el acceso a su escritorio de WordPress.

Una forma mucho más sencilla de añadir el código a la clase cuerpo de tu tema es usando un plugin de WordPress como WPCode.

Con WPCode, puedes añadir fácilmente código a tu sitio en cuestión de minutos y sin errores. Además, también asegura que tu código no sea eliminado 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 en 1 clic. Por lo tanto, usted no necesita ningún conocimiento de código para hacer personalizaciones avanzadas de WordPress.

En primer lugar, tendrás que 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 activado el plugin, se añadirá un nuevo elemento / artículo de menú llamado ‘Fragmentos de código’ a su barra de administrador de WordPress. Al hacer clic en él, accederá a la página donde podrá gestionar todos sus fragmentos de código.

Para añadir su primer fragmento de código personalizado, haga clic en el botón “Añadir nuevo”.

Aparecerá la página “Añadir fragmento de código”, donde podrá elegir un fragmento de código de la biblioteca ya creada o añadir su código personalizado.

Para añadir su código personalizado, vaya a la opción “Añadir su código personalizado (nuevo fragmento)” y haga clic en el botón “Usar fragmento”.

Ahora, dale un título a tu fragmento de código e introduce el código en la casilla ‘Vista previa del código’. También debe seleccionar “Fragmento de código PHP” como tipo de código en la lista desplegable de la derecha.

A continuación, desplázate hasta la sección “Inserción”. Aquí, puedes elegir el método ‘Auto Insertar’ para insertar y ejecutar automáticamente el código en una ubicación específica de WordPress como el administrador/ administración, portada / vista pública, y más. Si no está seguro, mantenga la opción por defecto “Ejecutar en todas partes”.

También puede elegir el método ‘Shortcode’. Con este método, el fragmento de código no se inserta automáticamente. Obtendrás un shortcode que podrás insertar manualmente en cualquier parte de tu sitio.

Cuando esté listo, cambie el conmutador de “Inactivo” a “Activo” y haga clic en el botón “Guardar fragmento de código” de la esquina superior derecha.

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

Ahora empezará a ver una nueva clase de cuerpo como esta: page-{slug}. Utilice esa clase para anular sus estilos por defecto y personalizar elementos para páginas específicas.

Por ejemplo, supongamos que quieres dar estilo a los widgets de tu barra lateral, pero solo en una página que tenga el slug “educación”. En ese caso, podrías añadir CSS como este:

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

Para más detalles, puede consultar nuestra guía sobre cómo añadir CSS personalizado a WordPress.

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

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.