Rīkjoslu pievienošana WordPress bez spraudņiem

Terminam tooltip nav vienota tulkojuma angļu valodā, atkarībā no konteksta, kurā tas tiek lietots, to var apzīmēt kā "tooltip", "palīdzības balons", "uznirstošais apraksts" vai pat "palīdzības teksts".

Rīkjosla ir uznirstošs paziņojums, kas tiek parādīts, kad notiek mijiedarbība ar elementu, noklikšķinot uz tā vai uzvedot peli. Šos rīkjoslas padomus izmanto, lai sniegtu papildu informāciju, neaizņemot pastāvīgu vietu. Ideāli piemēroti ikonu, tehnisko terminu vai darbību skaidrošanai saskarnēs.

Vai rīkkopas kaitē vai palīdz SEO?

Nu, kā gandrīz uz visu, atbilde vienmēr ir - tas ir atkarīgs. Lai gan SEO puristi brīdina, ka Google nepatīk "slēpts" vai maskēts saturs un bargi soda tā lietošanu, tas būtu galējība ļaunprātīgas izmantošanas gadījumos , kas varētu "kanibalizēt" jūsu saturu. Tomēr rīku uzraksti, kas tiek izmantoti ar zināmu līdzsvaru un minimālu loģiku, var būt noderīgi.

Rīkjoslu lietošanas priekšrocības

Kopumā šie ziņojumi, ja tie ir draudzīgi un neuzbāzīgi, var palīdzēt uzlabot dažādus lietotāja pieredzes aspektus. Cita starpā tie samazina atteikumu skaitu un uzlabo pieejamību. Tie var arī sniegt iespēju izmantot papildu atslēgvārdus, kas dabiski neietilpst galvenajā saturā, kas palīdz semantiskajā SEO.

Turklāt tie var uzlabot klikšķu skaitu. Piedāvājot norādes navigācijā vai aicinājuma uz darbību pogas, tās var efektīvāk vadīt lietotājus, tādējādi palielinot klikšķu skaitu. Taču, lai tas viss būtu iespējams, jāievēro dažas minimālās vadlīnijas.

Ieteikumi par izskatu, saturu un darbību

• HTML elementu un ARIA atribūtu izmantošana, lai nodrošinātu ekrānlasītāju un meklētājprogrammu piekļuvi tajos ietvertajai informācijai.
• Rīkjoslai jābūt īsai. Acīmredzot uznirstošajā logā neviens negrasās lasīt milzīgu informācijas apjomu, un jūs aptversiet lielu daļu satura. Tajā jāietver minimāla, precīza un nepieciešama informācija, un tai nevajadzētu būt kritiskai lietotājam, veicot vai pabeidzot kādu darbību.
• Saturs nedrīkst būt lieks vai atkārtots, pārliecinieties, ka sniedzat papildu noderīgu un vajadzīgu informāciju un ka tā neatkārtojas jūsu saturā, lai izvairītos no "satura dublēšanās".
• Centieties pēc iespējas izvairīties no rīkjoslām, kas pazūd, kad pārvietojat kursoru, vai izmantojiet tās tikai ziņojumos, kuros nav daudz informācijas un/vai satura. Vislabāk, ja tie tiek parādīti pēc katra klikšķa un aizveras, kad vēlreiz noklikšķināt jebkurā ekrāna vietā.
• Pārliecinieties, ka tie ir salasāmi un pareizā izmērā.
• Nepievienojiet divdesmit dažādu dizainu rīku uzgaļu ikonas vai rīku uzgaļu saites, jo tas tikai rada apjukumu. Fiksēts un konsekvents dizains palīdzēs apmeklētājiem tos atpazīt no pirmā acu uzmetiena.
• Nepārspīlējiet ar tām, labi izplānojiet savu stratēģiju, lai tās pievienotu tikai tur, kur, jūsuprāt, tās atvieglo piekļuvi attiecīgajai un/vai nepieciešamajai papildinformācijai.

Koda funkcijas un funkcionalitāte

Šajā gadījumā ir izmantots šis .png attēls ar caurspīdīgu fonu.

Šeit jūs varat pārbaudīt galarezultātu, kas darbojas [tooltip text="Jrmora.com izmantotais tooltip piemērs" position="auto"].

Attēla URL tiek pievienots starp pēdiņām šajā rindā:

$default_image = 'URL-de-tu-imagen';

Ja mainīsiet kodu, lai izmantotu SVG HTML ikonu, piemēram, šo, varēsiet vieglāk spēlēties ar krāsu, fonu, biezumu utt.

Inteliģenta automātiska pozīcijas pielāgošana, lai izvairītos no ekrāna malām. T. i., tuvojoties augšējai malai, uzraksts tiek parādīts apakšpusē un otrādi.

Rīkjoslā var pievienot pilnībā funkcionālas saites ar pielāgojamiem stiliem. Lai gan nav ieteicams pievienot saites, ir iespējams, ka reizēm tas var būt nepieciešams. Gadījumā, ja rīka uzrakstā ir iekļauta saite, automātiskā paslēpšana notiek ar 200 ms kavēšanos, lai to būtu vieglāk noklikšķināt.

Drošs HTML atbalsts. Atbalsta:

<strong>, <em>, <a>, <br>, <span>

Pozīcija, fiksēti un pielāgojami atribūti.

Atributos de posición disponibles:  position="auto" (default), top, bottom, left, right

ARIA atribūti (aria-expanded, role="tooltip").

Responsīvs dizains.

Pielāgojams mobilajām ierīcēm (klikšķināms pārslēgs).

Atiestatīšana, mainot lielumu, rotējot vai pārvietojot

Galvenās CSS klases:

.tooltip-container /* Contenedor principal */
.tooltip-trigger  /* Botón/icono que activa el tooltip */
.tooltip          /* Caja del mensaje emergente */
.tooltip-arrow    /* Flecha indicadora */

JS galvenās funkcijas:

calculateBestPosition() // Determina si colocar el tooltip arriba, abajo, etc.
showTooltip()          // Muestra el tooltip
hideTooltip()          // Oculta el tooltip con retraso

Īsās kodēšanas piemēri:

[tooltip text="Texto a mostrar"] 

[tooltip text="Texto a mostrar <strong>en negrita</strong> donde sea" position="auto"] 

[tooltip text="Texto <strong>importante</strong> y <em>énfasis</em>"]

[tooltip text="<a href='https://ejemplo.com' target='_blank'>Visite nuestro sitio</a>"]

Šo kodu izmantoju savām vajadzībām. Izprotiet to kā sākumpunktu. Tas ir ļoti viegli uzlabojams. Jūs varat atdalīt CSS un JS (vai pat apsvērt to bez Javascript izmantošanas) un pielāgot to tā, lai to varētu piemērot arī vārdiem saturā bez ikonas parādīšanas.

Lai to izmantotu, kā vienmēr, vienkārši pievienojiet to sava šablona vai tēmas atvasinātās tēmas functions.php, ja vēlaties saglabāt izmaiņas, kad jūsu šablons tiek atjaunināts.

Kods

/**
 * Shortcode para tooltip con ajuste automático 
 * Un ejemplo de uso: [tooltip text="Texto <a href='#'>enlace</a>" position="auto"]
 */
function custom_tooltip_shortcode($atts) {
    $default_image = 'URL-de-tu-imagen';
    
    $atts = shortcode_atts(
        array(
            'text' => __('Información adicional', 'text-domain'),
            'position' => 'auto',
            'color' => '#6a0000',
            'shadow' => '#9c9c9c',
            'width' => '18px',
            'id' => 'tooltip-' . uniqid()
        ),
        $atts,
        'tooltip'
    );

    // HTML permitido
    $allowed_html = array(
        'strong' => array(),
        'b' => array(),
        'em' => array(),
        'i' => array(),
        'br' => array(),
        'span' => array(
            'style' => array(),
            'class' => array()
        ),
        'a' => array(
            'href' => array(),
            'title' => array(),
            'target' => array(),
            'style' => array(),
            'rel' => array()
        )
    );
    
    $text = wp_kses($atts['text'], $allowed_html);
    $position = in_array($atts['position'], ['top', 'bottom', 'left', 'right', 'auto']) ? $atts['position'] : 'auto';
    $color = sanitize_hex_color($atts['color']);
    $shadow = sanitize_hex_color($atts['shadow']);
    $width = esc_attr($atts['width']);
    $id = sanitize_html_class($atts['id']);

    $output = '
    <span class="tooltip-container" data-position="' . esc_attr($position) . '">
        <button class="tooltip-trigger" aria-describedby="' . $id . '" aria-expanded="false">
            <img src="' . esc_url($default_image) . '" width="' . $width . '" alt="" aria-hidden="true"/>
        </button>
        <span id="' . $id . '" role="tooltip" class="tooltip" style="background-color: ' . $color . '; box-shadow: 0 5px 10px ' . $shadow . ';">
            ' . $text . '
            <span class="tooltip-arrow"></span>
        </span>
    </span>';

    return $output;
}
add_shortcode('tooltip', 'custom_tooltip_shortcode');

/**
 * Estilos CSS optimizados para enlaces
 */
function add_tooltip_styles() {
    echo '
    <style>
    .tooltip-container {
        display: inline-block;
        position: relative;
        vertical-align: middle;
    }

    .tooltip-trigger {
        background: none;
        border: none;
        padding: 0;
        margin: 0 2px;
        cursor: pointer;
        line-height: 1;
    }

    .tooltip {
        position: absolute;
        color: #fff;
        padding: 10px 12px;
        border-radius: 4px;
        font-size: 14px;
        line-height: 1.5;
        width: 220px;
        max-width: 90vw;
        text-align: left;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.25s ease;
        z-index: 100000;
        pointer-events: none;
    }

    .tooltip a {
        color: #fff !important;
        text-decoration: underline;
        pointer-events: auto !important;
    }

    .tooltip * {
        pointer-events: auto;
    }

    .tooltip-arrow {
        position: absolute;
        width: 0;
        height: 0;
        border: 7px solid transparent;
    }

    /* Posiciones dinámicas */
    .tooltip[data-position="top"] {
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 10px;
    }
    .tooltip[data-position="top"] .tooltip-arrow {
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-top-color: inherit;
    }

    .tooltip[data-position="bottom"] {
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 10px;
    }
    .tooltip[data-position="bottom"] .tooltip-arrow {
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-bottom-color: inherit;
    }

    .tooltip[data-position="left"] {
        top: 50%;
        right: 100%;
        transform: translateY(-50%);
        margin-right: 10px;
    }
    .tooltip[data-position="left"] .tooltip-arrow {
        top: 50%;
        right: 0;
        transform: translate(50%, -50%);
        border-left-color: inherit;
    }

    .tooltip[data-position="right"] {
        top: 50%;
        left: 100%;
        transform: translateY(-50%);
        margin-left: 10px;
    }
    .tooltip[data-position="right"] .tooltip-arrow {
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
        border-right-color: inherit;
    }

    /* Interacción */
    .tooltip-trigger:hover + .tooltip,
    .tooltip-trigger:focus + .tooltip,
    .tooltip-trigger[aria-expanded="true"] + .tooltip {
        visibility: visible;
        opacity: 1;
    }
    </style>
    ';
}
add_action('wp_head', 'add_tooltip_styles');

/**
 * JavaScript corregido para enlaces clickeables con retraso
 */
function add_tooltip_scripts() {
    echo '
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        // Configurar todos los tooltips
        document.querySelectorAll(".tooltip-container").forEach(function(container) {
            const tooltip = container.querySelector(".tooltip");
            const trigger = container.querySelector(".tooltip-trigger");
            let hoverTimeout;
            let isMouseInTooltip = false;
            const position = container.getAttribute("data-position");

            // Función para calcular posición automática
            function calculateBestPosition() {
                const rect = trigger.getBoundingClientRect();
                const viewportHeight = window.innerHeight;
                const viewportWidth = window.innerWidth;
                const tooltipHeight = 150; // Altura estimada
                const tooltipWidth = 220; // Ancho estimado
                
                const space = {
                    top: rect.top,
                    bottom: viewportHeight - rect.bottom,
                    left: rect.left,
                    right: viewportWidth - rect.right
                };
                
                // Determinar mejor posición disponible
                if (space.top >= tooltipHeight || (space.top >= space.bottom && space.top > 50)) {
                    return "top";
                } else if (space.bottom >= tooltipHeight) {
                    return "bottom";
                } else if (space.right >= tooltipWidth) {
                    return "right";
                } else if (space.left >= tooltipWidth) {
                    return "left";
                }
                return "top"; // Default
            }

            // Actualizar posición (solo para "auto")
            function updatePosition() {
                if (position === "auto") {
                    tooltip.setAttribute("data-position", calculateBestPosition());
                }
            }

            // Mostrar tooltip
            function showTooltip() {
                clearTimeout(hoverTimeout);
                tooltip.style.visibility = "visible";
                tooltip.style.opacity = "1";
                trigger.setAttribute("aria-expanded", "true");
            }

            // Ocultar tooltip con retraso de 200ms
            function hideTooltip() {
                if (!isMouseInTooltip) {
                    hoverTimeout = setTimeout(() => {
                        tooltip.style.visibility = "hidden";
                        tooltip.style.opacity = "0";
                        trigger.setAttribute("aria-expanded", "false");
                    }, 200); // Retraso clave para enlaces
                }
            }

            // Inicializar posición
            updatePosition();

            // Eventos para el botón
            trigger.addEventListener("mouseenter", showTooltip);
            trigger.addEventListener("mouseleave", hideTooltip);
            trigger.addEventListener("focus", showTooltip);
            trigger.addEventListener("blur", hideTooltip);

            // Eventos para el tooltip (mejorados para enlaces)
            tooltip.addEventListener("mouseenter", function() {
                isMouseInTooltip = true;
                clearTimeout(hoverTimeout); // Cancelar ocultamiento
            });

            tooltip.addEventListener("mouseleave", function() {
                isMouseInTooltip = false;
                hideTooltip(); // Iniciar retraso para ocultar
            });

            // Click en el botón (para móviles)
            trigger.addEventListener("click", function(e) {
                e.preventDefault();
                if (tooltip.style.visibility === "visible") {
                    hideTooltip();
                } else {
                    showTooltip();
                }
            });

            // Reajustar posición en eventos
            if (position === "auto") {
                window.addEventListener("resize", updatePosition);
                window.addEventListener("scroll", updatePosition, { passive: true });
            }
        });

        // Cerrar tooltips al hacer clic fuera (excepto en enlaces)
        document.addEventListener("click", function(e) {
            if (!e.target.closest(".tooltip-container") && !e.target.closest(".tooltip a")) {
                document.querySelectorAll(".tooltip").forEach(function(tooltip) {
                    tooltip.style.visibility = "hidden";
                    tooltip.style.opacity = "0";
                });
                document.querySelectorAll(".tooltip-trigger").forEach(function(trigger) {
                    trigger.setAttribute("aria-expanded", "false");
                });
            }
        });
    });
    </script>
    ';
}
add_action('wp_footer', 'add_tooltip_scripts');