AprenderWP

Sitio especializado en Wordpress para principiantes

  • Principiantes
  • Tutoriales
  • Plugins
  • Temas
  • Blog
    • Novedades
    • Showcase
    • Opiniones
AprenderWP » Temas » Cómo añadir un Slug de página en la clase de cuerpo de sus temas de WordPress

Cómo añadir un Slug de página en la clase de cuerpo de sus temas de WordPress

Si trabajas en temas de WordPress de forma regular, entonces probablemente es mejor que te familiarices con esta hoja de trucos de CSS generada por WordPress. Recientemente, mientras trabajábamos en un proyecto de tema personalizado, nos dimos cuenta de la necesidad de personalizar ciertos elementos en base a diferentes páginas. WordPress tiene estas cosas llamadas clases de cuerpo que producen la página de clase, page-template-{filename} y page-id-{number}. No podíamos usar page-id-{number} porque los identificadores de página cambian de desarrollo a implementación. Tampoco queríamos crear una plantilla de página personalizada con código repetitivo. Sabíamos que podíamos mantener una cosa igual en todas estas páginas que eran páginas de babosas, así que decidimos añadirlas en la clase de carrocería, lo que nos permitió hacer todas las personalizaciones que queríamos sin ninguna complicación. En este artículo, le mostraremos cómo añadir páginas de slug en la clase de cuerpo de sus temas de WordPress.

Dado que se trata de un código específico del tema, le recomendamos que lo incluya en el archivo functions.php del tema .

123456789//Page Slug Body Classfunctionadd_slug_body_class( $classes) {global$post;if( isset( $post) ) {$clases[] = $post->tipo_post. ‘-‘. post->nombre_del_post;}retorno$clases;}add_filter(‘body_class’, ‘add_slug_body_class’);

Ahora empezarás a ver una nueva clase de cuerpo que se está editando de la siguiente manera: page-{slug}. Utilice esta clase para anular los estilos predeterminados y personalizar los elementos para páginas específicas.

Por ejemplo, si intentaba modificar un div con la clase widgets. Puedes tener tu css así:

12#barra lateral .widgets{fondo: #fff; color: #000;}.page-education #sidebar .widgets{background: #000; color: #fff;}

Espero que encuentre este tutorial útil.

Deja una respuesta Cancelar la respuesta

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


Sobre mi

Mi nombre es Joaquin y llevo 12 años creando sitios web en wordpress. En este blog comparto todos mis conocimientos.

Necesito ayuda con ...


Empezar un
Blog

Optimizar
Wordpress

Seguridad
Wordpress

SEO
Wordpress

Errores
Worpdress

Crear una
Tienda Online
Política de Privacidad
Política de Cookies
Aviso Legal

Copyright © 2021 · AprenderWP