Cómo establecer una clase de cuerpo de WordPress usando un slug de página










  • Agregar un slug de página de WordPress como elemento a las clases en CSS ofrece bastante en términos de personalización. Por ejemplo, puede usarlo para cambiar los colores y las fuentes del widget si el sitio detecta una página específica.

    ¿Qué sucede si desea que un widget de llamada a la acción se destaque cuando alguien visita una página de destino? Ahí es cuando entra en juego el uso de una clase de cuerpo de WordPress con un slug de página.

    Sin embargo, una personalización como esta requiere un poco de conocimiento de desarrollo de sitios web… específicamente PHP y CSS. Afortunadamente, estos cambios son bastante simples y realmente pueden agregar algo de estilo a sus páginas.

    Hoy, repasaré cómo agregar un slug de página a una clase de cuerpo en WordPress.

    ¿Qué es una Clase de Cuerpo?

    La función «body_class» le brinda la posibilidad de cambiar el estilo de su tema a través de CSS. Por lo general, esta etiqueta está disponible en el archivo header.php de tu tema. Esto se debe a que es una de las primeras cosas que se carga en cada publicación y página.

    Usando la etiqueta body_class en CSS, puede decirle al sitio que altere los colores, cambie los tipos de fuente y otros ajustes visuales.

    ¿Qué es un Page Slug?

    Un slug suele ser un identificador fácil de leer y, a menudo, controla cómo aparece la URL de una página web. Por ejemplo, supongamos que tiene una página titulada «Acerca de nosotros». La URL puede verse así:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]https://www.ggexample.com/about-us/[/ ht_mensaje]

    Preste atención a la parte » sobre nosotros «. Esa es a menudo la babosa real de una publicación o página.

    Sin embargo, el slug solo se usa cuando usa enlaces permanentes personalizados en WordPress. Y esto es algo que quizás desee configurar de todos modos, ya que ayuda con el SEO y la participación de los visitantes.

    Acceso al archivo Functions.php

    Para que la clase de cuerpo de WordPress y el código de slug de página funcionen, deberá editar el archivo functions.php de su tema. En realidad, esto es bastante fácil de encontrar incluso para los usuarios más novatos.

    Antes de comenzar, tenga en cuenta que, a menudo, es más fácil realizar cambios en un tema secundario . De esta manera, puede realizar las modificaciones que desee sin afectar el tema principal de su sitio.

    Y también tenga en cuenta la importancia de las copias de seguridad . El uso de complementos como UpdraftPlus puede ayudarlo a recuperarse rápidamente en caso de que algo salga mal.

    Primero, ve a Apariencia y toma nota del Tema que estás usando.

    Tema de WordPress

    Ahora, tienes varias opciones para acceder a functions.php. Pero por el bien de este tutorial, simplemente usaré la herramienta Administrador de archivos de cPanel . Es una manera rápida y fácil de acceder al directorio raíz de su sitio.

    También puede usar programas como FileZilla para acceder a sus archivos de forma remota.

    Desde el directorio del sitio web, abra la carpeta «wp-content».

    Contenido de WP

    Abra la carpeta «temas».

    Carpeta de temas

    Encuentra y abre la carpeta de tu tema. En este caso, estoy accediendo al directorio «hitmag» ya que es el que estoy usando.

    Carpeta de temas

    Seleccione el archivo functions.php y haga clic en «Editar».

    Editar funciones

    Agregar el fragmento de código

    Pegue este fragmento de código en el archivo functions.php:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]//Body Class para la

    función Page Slug add_slug_body_class( $clases) {


    if (is_single()) {


    global $post;


    if ( isset( $post ) ) {


    $classes[] = $post->post_type .
    ‘-babosa-‘ . $post->post_name;


    }


    devuelve $clases;


    }


    }


    add_filter( ‘clase_cuerpo’, ‘add_slug_clase_cuerpo’ );[/ht_message]

    Pegar código

    Haga clic en «Guardar cambios» en la parte superior derecha.

    Guardar funciones

    Su sitio ahora está listo para una codificación CSS personalizada.

    Uso de la clase de cuerpo personalizada

    Supongamos que desea cambiar el color de fondo de la página Acerca de nosotros en CSS. Agregaría algo como esto a su hoja de estilo:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]body.page-slug-about-us{

    color : #053f23;


    }[/ht_message]


    En este ejemplo, el color del cuerpo de la página Acerca de nosotros cambiaría a un verde bosque intenso.
    Por supuesto, puede cambiar esto a cualquier color que desee.

    Flexibilidad en la personalización

    Una de las principales razones por las que WordPress controla gran parte de la cuota de mercado de los sitios web en Internet es su flexibilidad. Ya sea usando el nombre de la página de clase de cuerpo de WordPress para cambios personalizados o simplemente cambiando el tema en sí, las posibilidades de lo que puede hacer son casi infinitas.

    Explora qué cambios personalizados puedes hacer y permite que tu sitio parezca único, incluso cuando usas un tema común.

    ¿Qué tipo de personalizaciones de código has guardado en WordPress? ¿Prefiere codificar WordPress usted mismo o confía principalmente en complementos?