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