Como agregar clases personalizadas a las categorías utilizando Elementor Widget Post Info
Cuando utilizas Elementor para listar categorías mediante el widget de Post Info, puede que no haya una opción directa para aplicar clases personalizadas a las categorías. Sin embargo, puedes solucionar esto utilizando un poco de CSS adicional y, si es necesario, utilizando el widget de Elementor «Shortcode» para ejecutar código personalizado. Aquí te explico cómo hacerlo:
Opción 1: Agregar Estilos CSS Directamente
Si no necesitas generar clases dinámicas, puedes aplicar estilos CSS directamente a las categorías listadas por Elementor basándote en su estructura de HTML. Puedes hacer esto en Elementor o en tu tema.
Paso 1: Inspeccionar el HTML
- Abre la página en tu navegador y utiliza las herramientas de desarrollo para inspeccionar el HTML generado por Elementor.
- Encuentra la estructura HTML de las categorías en la sección del widget «Post Info». Debería verse algo como esto:
<div class="elementor-widget-container">
<span class="elementor-icon-list-text">Diseño</span>
<span class="elementor-icon-list-text">Programación</span>
<span class="elementor-icon-list-text">Marketing</span>
</div>
Paso 2: Aplicar Estilos CSS
Basándote en la estructura que encuentres, puedes aplicar estilos CSS específicos. Ve a Apariencia > Personalizar > CSS Adicional y añade tus estilos:
.elementor-widget-container .elementor-icon-list-text {
display: inline-block;
margin: 0 5px;
padding: 5px 10px;
border-radius: 5px;
}
.elementor-widget-container .elementor-icon-list-text:contains("Diseño") {
background-color: lightcoral;
color: white;
}
.elementor-widget-container .elementor-icon-list-text:contains("Programación") {
background-color: lightseagreen;
color: white;
}
.elementor-widget-container .elementor-icon-list-text:contains("Marketing") {
background-color: lightsalmon;
color: white;
}
Opción 2: Usar el Widget de Shortcode para Código Personalizado
Si necesitas más control y personalización, puedes usar el widget Shortcode de Elementor para ejecutar código PHP que genere HTML con las clases personalizadas.
Paso 1: Crear un Shortcode en functions.php
Agrega el siguiente código a tu archivo functions.php
del tema (o en el archivo de un tema hijo):
function listar_especialidad() {
$terms = get_terms(array(
'taxonomy' => 'especialidad',
'hide_empty' => false,
));
$output = '<ul class="especialidad-lista">';
if (!empty($terms) && !is_wp_error($terms)) {
foreach ($terms as $term) {
$output .= '<li class="especialidad-' . esc_attr($term->slug) . '">' . esc_html($term->name) . '</li>';
}
}
$output .= '</ul>';
return $output;
}
add_shortcode('listar_especialidad', 'listar_especialidad');
Paso 2: Insertar el Shortcode en Elementor
- Abre la página en Elementor.
- Añade un widget de Shortcode.
- Inserta el shortcode
[listar_especialidad]
en el campo del shortcode.
Paso 3: Aplicar Estilos CSS
Asegúrate de que tus estilos CSS estén listos en style.css
o en la sección de CSS adicional en el personalizador:
.especialidades-lista li {
padding: 10px;
margin-bottom: 5px;
list-style: none;
}
.especialidad-diseno {
background-color: lightcoral;
color: white;
}
.especialidad-programacion {
background-color: lightseagreen;
color: white;
}
.especialidad-marketing {
background-color: lightsalmon;
color: white;
}
Verificación
- Asegúrate de que Elementor esté mostrando correctamente el contenido del shortcode.
- Verifica que el CSS se esté aplicando correctamente utilizando las herramientas de desarrollo de tu navegador.
Estas opciones te permitirán listar las categorías de la taxonomía «Especialidad» con las clases personalizadas que necesitas en Elementor.
Categorías de Nivel Superio y Nivel Secundario
Para lograr que un shortcode muestre solo las categorías de nivel superior o las de nivel secundario en una taxonomía personalizada como «Especialidades», podemos modificar el código del shortcode para filtrar los términos según su jerarquía. Aquí te muestro cómo hacerlo:
Paso 1: Crear Shortcode para Categorías de Nivel Superior
Primero, crearemos un shortcode que solo muestre las categorías de nivel superior (términos principales) de la taxonomía «Especialidades»:
Código para Categorías de Nivel Superior
function listar_especialidades_nivel_superior() {
$terms = get_terms(array(
'taxonomy' => 'especialidades',
'hide_empty' => false,
'parent' => 0, // Esto asegura que solo se obtengan términos de nivel superior
));
$output = '<ul class="especialidades-lista nivel-superior">';
if (!empty($terms) && !is_wp_error($terms)) {
foreach ($terms as $term) {
$output .= '<li class="especialidad-' . esc_attr($term->slug) . '">' . esc_html($term->name) . '</li>';
}
}
$output .= '</ul>';
return $output;
}
add_shortcode('listar_especialidades_superior', 'listar_especialidades_nivel_superior');
Paso 2: Crear Shortcode para Categorías de Nivel Secundario
Ahora, vamos a crear un shortcode que muestre las categorías de nivel secundario. Para esto, debes especificar el ID del término padre del que quieres listar los términos secundarios.
Código para Categorías de Nivel Secundario
function listar_especialidades_nivel_secundario($atts) {
$atts = shortcode_atts(array(
'parent_id' => 0, // ID del término padre del que deseas listar los secundarios
), $atts, 'listar_especialidades_secundario');
$terms = get_terms(array(
'taxonomy' => 'especialidades',
'hide_empty' => false,
'parent' => $atts['parent_id'], // Filtra por el ID del padre
));
$output = '<ul class="especialidades-lista nivel-secundario">';
if (!empty($terms) && !is_wp_error($terms)) {
foreach ($terms as $term) {
$output .= '<li class="especialidad-' . esc_attr($term->slug) . '">' . esc_html($term->name) . '</li>';
}
}
$output .= '</ul>';
return $output;
}
add_shortcode('listar_especialidades_secundario', 'listar_especialidades_nivel_secundario');
Paso 3: Usar los Shortcodes en Elementor
- Agregar un widget de Shortcode en Elementor:
- Para listar categorías de nivel superior, usa:
[listar_especialidades_superior]
. - Para listar categorías de nivel secundario, usa:
[listar_especialidades_secundario parent_id="ID_DEL_PADRE"]
, reemplazandoID_DEL_PADRE
con el ID del término padre específico.
- Para listar categorías de nivel superior, usa:
Paso 4: Aplicar Estilos CSS
Puedes aplicar estilos específicos a estas listas según el nivel de jerarquía:
.especialidades-lista.nivel-superior li {
font-weight: bold;
background-color: #f0f0f0;
}
.especialidades-lista.nivel-secundario li {
margin-left: 20px;
background-color: #e0e0e0;
}
Consideraciones
- IDs de Términos Padres: Asegúrate de conocer los IDs de los términos padres que quieres usar para listar los términos secundarios.
- Vacío: Si un término de nivel superior no tiene hijos, el shortcode para secundarios no mostrará nada.
- Jerarquía Compleja: Si tu jerarquía tiene más de dos niveles, puedes expandir los shortcodes para soportar múltiples niveles.
Estos pasos te permitirán usar shortcodes para mostrar categorías de nivel superior y secundario de tu taxonomía «Especialidades» en WordPress con Elementor.
Mejorando el Shot Code
Para crear un shortcode que permita seleccionar la taxonomía, activar el enlace a la categoría, y definir un nombre de clase (usando el slug por defecto si no se proporciona), podemos modificar el código del shortcode para hacerlo más flexible y personalizable. Aquí te muestro cómo puedes implementar esto:
Shortcode Mejorado para Listar Categorías
Vamos a crear un shortcode que acepte parámetros para la taxonomía, el ID del padre (para niveles secundarios), si las categorías deben ser enlazables, y una clase CSS personalizada.
Código del Shortcode
function listar_terminos_taxonomia($atts) {
// Define los atributos del shortcode y sus valores predeterminados
$atts = shortcode_atts(array(
'taxonomy' => 'especialidades', // Taxonomía predeterminada
'parent_id' => 0, // ID del término padre (0 para nivel superior)
'link' => 'false', // Determina si los términos deben ser enlaces
'class' => '', // Clase CSS personalizada
), $atts, 'listar_terminos_taxonomia');
// Convierte el valor del atributo link a booleano
$link = filter_var($atts['link'], FILTER_VALIDATE_BOOLEAN);
// Obtiene los términos de la taxonomía especificada
$terms = get_terms(array(
'taxonomy' => $atts['taxonomy'],
'hide_empty' => false,
'parent' => $atts['parent_id'],
));
$output = '<ul class="lista-terminos">';
if (!empty($terms) && !is_wp_error($terms)) {
foreach ($terms as $term) {
// Usa la clase proporcionada o el slug del término como clase predeterminada
$term_class = !empty($atts['class']) ? esc_attr($atts['class']) : esc_attr($term->slug);
// Verifica si el término debe ser un enlace
if ($link) {
$term_link = '<a href="' . esc_url(get_term_link($term)) . '" class="' . $term_class . '">' . esc_html($term->name) . '</a>';
} else {
$term_link = '<span class="' . $term_class . '">' . esc_html($term->name) . '</span>';
}
$output .= '<li>' . $term_link . '</li>';
}
}
$output .= '</ul>';
return $output;
}
add_shortcode('listar_terminos', 'listar_terminos_taxonomia');
Uso del Shortcode en Elementor
Puedes usar el shortcode con diferentes parámetros para personalizar la salida según tus necesidades.
Ejemplos de Uso:
1. Listar términos de nivel superior sin enlaces:
[listar_terminos taxonomy="especialidades" parent_id="0" link="false"]
2. Listar términos secundarios de una categoría específica con enlaces:
[listar_terminos taxonomy="especialidades" parent_id="ID_DEL_PADRE" link="true"]
3. Listar términos con una clase CSS personalizada:
[listar_terminos taxonomy="especialidades" class="mi-clase-personalizada"]
Estilos CSS
Define tus estilos CSS para personalizar la apariencia de la lista:
.lista-terminos li {
margin: 5px 0;
list-style: none;
}
.lista-terminos a, .lista-terminos span {
padding: 5px 10px;
border-radius: 5px;
text-decoration: none;
color: white;
}
.mi-clase-personalizada {
background-color: lightblue;
}
.especialidades {
background-color: lightgreen;
}
/* Agrega más estilos según los slugs de tus términos o clases personalizadas */
Notas
- Parámetro
taxonomy
: Permite seleccionar cualquier taxonomía registrada en WordPress, no solo «Especialidades». - Parámetro
link
: Controla si los términos deben mostrarse como enlaces. Acepta valorestrue
ofalse
. - Parámetro
class
: Permite definir una clase CSS personalizada. Si no se proporciona, se usa el slug del término. - Flexibilidad: Este enfoque hace que el shortcode sea muy flexible, permitiendo configuraciones dinámicas para diferentes contextos de uso.
Con este shortcode, puedes mostrar términos de cualquier taxonomía, elegir si se muestran como enlaces, y aplicar estilos personalizados según tus necesidades.
Un Plus – Mostrando las categorias en un orden Jerárquico con nivel superior y subcategoría
Vamos a ajustar el código para asegurarnos de que las subcategorías también se muestren solo si están seleccionadas. Para lograr esto, necesitamos filtrar las subcategorías de cada término principal y comprobar si están asociadas al contenido actual. Vamos a modificar el código del shortcode:
Código del Shortcode Jerárquico seleccionado
Aseguraremos que tanto las categorías principales como las subcategorías seleccionadas se muestren correctamente.
Código del Shortcode
function listar_terminos_seleccionados($atts) {
// Define los atributos del shortcode y sus valores predeterminados
$atts = shortcode_atts(array(
'taxonomy' => 'especialidades', // Taxonomía predeterminada
'link' => 'false', // Determina si los términos deben ser enlaces
'class' => '', // Clase CSS personalizada
), $atts, 'listar_terminos_seleccionados');
// Convierte el valor del atributo link a booleano
$link = filter_var($atts['link'], FILTER_VALIDATE_BOOLEAN);
// Obtiene los términos seleccionados en el contexto actual
$post_terms = get_the_terms(get_the_ID(), $atts['taxonomy']);
// Agrupa los términos seleccionados por sus padres
$terms_by_parent = [];
if (!empty($post_terms) && !is_wp_error($post_terms)) {
foreach ($post_terms as $term) {
$terms_by_parent[$term->parent][] = $term;
}
}
$output = '<ul class="lista-terminos">';
// Recorrer solo términos de nivel superior (parent ID = 0)
if (!empty($terms_by_parent[0])) {
foreach ($terms_by_parent[0] as $term) {
$output .= build_selected_term_hierarchy($term, $atts, $link, $terms_by_parent);
}
}
$output .= '</ul>';
return $output;
}
function build_selected_term_hierarchy($term, $atts, $link, $terms_by_parent) {
// Usa la clase proporcionada o el slug del término como clase predeterminada
$term_class = !empty($atts['class']) ? esc_attr($atts['class']) : esc_attr($term->slug);
// Verifica si el término debe ser un enlace
if ($link) {
$term_link = '<a href="' . esc_url(get_term_link($term)) . '" class="' . $term_class . '">' . esc_html($term->name) . '</a>';
} else {
$term_link = '<span class="' . $term_class . '">' . esc_html($term->name) . '</span>';
}
// Comienza a construir la salida HTML
$output = '<li>' . $term_link;
// Busca los términos secundarios que también estén seleccionados
if (!empty($terms_by_parent[$term->term_id])) {
$output .= '<ul>';
foreach ($terms_by_parent[$term->term_id] as $child_term) {
$output .= build_selected_term_hierarchy($child_term, $atts, $link, $terms_by_parent);
}
$output .= '</ul>';
}
$output .= '</li>';
return $output;
}
add_shortcode('listar_seleccionados', 'listar_terminos_seleccionados');
Cómo Funciona Este Código
- Agrupación por Padres: En lugar de verificar solo los términos de nivel superior, agrupamos todos los términos seleccionados por su
parent ID
. Esto nos permite construir la jerarquía basándonos únicamente en los términos seleccionados. - Jerarquía: La función
build_selected_term_hierarchy
ahora acepta la estructura agrupada por padres y solo recorre las subcategorías que están efectivamente asignadas y agrupadas bajo el término principal actual. - Uso de IDs: Utilizamos el
parent ID
para determinar qué subcategorías deben mostrarse bajo cada término principal.
Uso del Shortcode en Elementor
Para utilizar este shortcode en Elementor, agrega un widget de Shortcode y usa el siguiente código:
Ejemplos de Uso:
1. Listar términos seleccionados sin enlaces:
[listar_seleccionados taxonomy="especialidades" link="false"]
2. Listar términos seleccionados con enlaces:
[listar_seleccionados taxonomy="especialidades" link="true"]
3. Listar términos seleccionados con una clase CSS personalizada:
[listar_seleccionados taxonomy="especialidades" class="mi-clase-personalizada"]
Estilos CSS
Puedes aplicar estilos CSS para dar formato a la lista jerárquica:
.lista-terminos {
list-style: none;
margin: 0;
padding: 0;
}
.lista-terminos li {
margin: 5px 0;
padding: 5px;
}
.lista-terminos a, .lista-terminos span {
text-decoration: none;
color: white;
}
.mi-clase-personalizada {
background-color: lightblue;
padding: 5px 10px;
border-radius: 5px;
}
.especialidades {
background-color: lightgreen;
padding: 5px 10px;
border-radius: 5px;
}
/* Estilos para niveles de jerarquía */
.lista-terminos > li {
font-weight: bold;
}
.lista-terminos > li ul {
padding-left: 20px;
margin-top: 5px;
}
Este enfoque debería asegurar que solo las categorías seleccionadas, incluyendo las subcategorías, sean listadas en el contenido.