Sin categoría

En Windows

1. Descargar el paquete desde el repositorio oficial (https://developers.google.com/speed/webp)
2. Descomprimir el paquete en un lugar seguro yo lo hice en c:/libwebp-1.4.0-windows-x64
3. Abrir la consola o CMD
4. Desde el CMD:
   C:\libwebp-1.4.0-windows-x64\bin\cwebp.exe cwebp -q 80 image.png -o image.webp

-o string
Especifica el nombre del archivo WebP de salida. Si se omite, cwebp realizará compresión, pero solo reporta estadísticas. Si usas “-” como nombre de salida, el resultado se dirigirá a “stdout”.

-q float
Especifica el factor de compresión para los canales RGB entre 0 y 100. El valor predeterminado es 75.
En el caso de la compresión con pérdida (predeterminada), un factor pequeño produce un archivo más pequeño con menor calidad. La mejor calidad se logra usando un valor de 100
En el caso de la compresión sin pérdida (especificada por la opción -lossless), un factor pequeño permite una velocidad de compresión más rápida, pero produce un archivo más grande. La compresión máxima se logra con un valor de 100.

Conversión en lote:

Para convertir masivamente una carpeta de imagenes podemos apoyarnos en un archivo bash siguiendo los siguientes paso:

1. En el directorio donde se encuentran las imagenes debemos crear un archivo en formato sh, este archivo contendrá el siguiente script:

#!/bin/bash

PARAMS=('-m 6 -q 70 -mt -af -progress')

if [ $# -ne 0 ]; then
	PARAMS=$@;
fi

cd $(pwd)

shopt -s nullglob nocaseglob extglob

for FILE in *.@(jpg|jpeg|tif|tiff|png); do 
    cwebp $PARAMS "$FILE" -o "${FILE%.*}".webp;
done

Esta técnica de conversión en lote esta basada en linux

La otra opción que tenemos es añadir una extensión a Photoshop

1. Para ello solo debemos descargar el plugins desde el repositorio oficial:
   https://github.com/webmproject/WebPShop/releases
2. Descargar el plugins que es el del formato 8bi
   Guardarlo en la carpeta de plugins:
   C:\Program Files\Common Files\Adobe\Plug-Ins\CC

Cree los diseños de Contact Form 7 más complicados y avanzados sin ningún conocimiento de codificación, utilizando el generador de marcado de formulario de arrastrar y soltar:

https://crocoblock.com/freemium/tools/contact-form-7-layout-builder/

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

1. Abre la página en tu navegador y utiliza las herramientas de desarrollo para inspeccionar el HTML generado por Elementor.
2. 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

1. Abre la página en Elementor.
2. Añade un widget de Shortcode.
3. 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

1. 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"], reemplazando ID_DEL_PADRE con el ID del término padre específico.

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 valores true o false.
• 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.

Imágenes con transparencia utilizando CSS, compatible con casi todos los navegadores

img{
    mask-image: linear-gradient(black 80%, transparent)
}

Te damos la bienvenida a WordPress. Esta es tu primera entrada. Edítala o bórrala, ¡luego empieza a escribir!