WordPress'te eklentiler olmadan araç ipuçları ekleme

Araç ipuçları SEO'ya zarar mı veriyor yoksa fayda mı sağlıyor?

Araç ipucu teriminin İngilizceye tek bir çevirisi yoktur, kullanıldığı bağlama bağlı olarak "araç ipucu", "yardım balonu", "açılır açıklama" veya hatta "yardım metni" olarak tanımlanabilir.

Araç ipucu, bir öğe ile etkileşime girildiğinde, üzerine tıklandığında veya farenin üzerine gelindiğinde görüntülenen bir açılır mesajdır. Bu araç ipuçları, kalıcı yer kaplamadan ek bilgi sağlamak için kullanılır. Simgeleri, teknik terimleri veya arayüzlerdeki eylemleri açıklamak için idealdir.

Araç ipuçları SEO'ya zarar mı veriyor yoksa fayda mı sağlıyor?

Neredeyse her şeyde olduğu gibi, cevap her zaman değişir. SEO uzmanları Google'ın "gizli" veya maskelenmiş içerikten hoşlanmadığı ve kullanımını sert bir şekilde cezalandırdığı konusunda uyarırken, bu durum içeriğinizi "yamyamlaştırabilecek" kötüye kullanım durumları için aşırı olacaktır. Bununla birlikte, belirli bir denge ve minimum mantıkla kullanılan araç ipuçları faydalı olabilir.

Araç ipuçlarını kullanmanın avantajları

Genel olarak konuşmak gerekirse, bu mesajlar dostane ve göze batmayan bir şekilde iletilirse, kullanıcı deneyiminin farklı yönlerinin iyileştirilmesine katkıda bulunabilir. Diğer şeylerin yanı sıra, hemen çıkma oranlarını azaltır ve erişilebilirliği artırır. Ayrıca, semantik SEO'ya yardımcı olan ana içeriğe doğal olarak uymayan ek anahtar kelimeleri kullanma fırsatları da sağlayabilir.

Ayrıca, tıklama oranlarını da artırabilirler. Navigasyonda veya harekete geçirici mesaj düğmelerinde araç ipuçları sunarak, kullanıcıları daha etkili bir şekilde yönlendirebilir ve daha yüksek tıklama oranlarına yol açabilirler. Ancak tüm bunların mümkün olabilmesi için birkaç asgari kurala uyulması gerekir.

Görünüm, içerik ve işletim için öneriler

Ekran okuyucuların ve arama motorlarının içerdikleri bilgilere erişebilmelerini sağlamak için HTML öğelerinin ve ARIA niteliklerinin kullanılması.
Bir araç ipucu kısa olmalıdır. Açıkçası, hiç kimse bir açılır pencerede büyük miktarda bilgi okumayacak ve içeriğin büyük bir bölümünü kaplayacaksınız. Minimum, kesin ve gerekli bilgileri içermelidir ve bu, herhangi bir işlemi gerçekleştirirken veya tamamlarken kullanıcı için kritik olmamalıdır.
İçerik gereksiz veya tekrarlanmış olmamalıdır, ek yararlı ve gerekli bilgiler sağladığınızdan ve "yinelenen içerikten" kaçınmak için içeriğinizde tekrarlanmadığından emin olun.
İmleci hareket ettirdiğinizde kaybolan araç ipuçlarından mümkün olduğunca kaçınmaya çalışın veya bunları yalnızca çok fazla bilgi ve/veya içerik içermeyen mesajlarda kullanın. İdeal olarak, tıklama başına görüntülenmeli ve ekranda herhangi bir yere tekrar tıkladığınızda kapanmalıdırlar.
Okunaklı ve doğru boyutta olduklarından emin olun.
Yirmi farklı tasarımda araç ipucu simgesi veya araç ipucu bağlantısı eklemeyin, bu yalnızca kafa karışıklığı yaratır. Sabit ve tutarlı bir tasarım, ziyaretçilerinizin bunları ilk bakışta tanımasına yardımcı olacaktır.
Aşırıya kaçmayın, stratejinizi iyi planlayın ve bunları yalnızca ilgili ve/veya gerekli tamamlayıcı bilgilere erişimi kolaylaştıracağını düşündüğünüz yerlere ekleyin.

Kodun özellikleri ve işlevleri

Bu durum için şeffaf arka plana sahip bu .png görüntüsü kullanılmıştır.

Burada nihai sonucu test edebilirsiniz [tooltip text="jrmora.com'da kullanılan örnek araç ipucu" position="auto"].

Resmin URL'si bu satırdaki tek tırnak işaretleri arasına eklenir:

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

Kodu bunun gibi bir SVG HTML simgesi kullanacak şekilde değiştirmeyi seçerseniz, renk, arka plan, kalınlık vb. ile daha kolay oynayabilirsiniz.

Ekran kenarlarından kaçınmak için akıllı otomatik konum ayarı. Yani, üst kenara yaklaşırken araç ipucu altta görüntülenir ve bunun tersi de geçerlidir.

Araç ipucunun içine özelleştirilebilir stillerle tamamen işlevsel bağlantılar eklenebilir. Bağlantı eklemek tavsiye edilmemekle birlikte, zaman zaman bunu yapmanız gerekebilir. Bir araç ipucunun bir bağlantı içermesi durumunda, tıklamayı kolaylaştırmak için otomatik gizlemede 200 ms'lik bir gecikme vardır.

Güvenli HTML desteği. Destekler:

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

Konum, sabit ve uyarlanabilir nitelikler.

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

ARIA öznitelikleri (aria-expanded, role="tooltip").

Duyarlı tasarım.

Mobil uyarlanabilir (tıklanabilir geçiş).

Yeniden boyutlandırma, döndürme veya kaydırma sırasında sıfırlama

Ana CSS sınıfları:

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

JS'nin temel işlevleri:

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

Kısa kod örnekleri:

[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>"]

Bu kod benim özel ihtiyaçlarım için kullandığım koddur. Bir başlangıç noktası olarak anlayın. Çok geliştirilebilir. CSS ve JS'yi ayırabilir (hatta Javascript kullanmadan da düşünebilirsiniz) ve ikonu göstermeden içerikteki kelimelere de uygulanabilecek şekilde uyarlayabilirsiniz.

Bunu kullanmak için, her zaman olduğu gibi, şablonunuz güncellendiğinde değişiklikleri korumak istiyorsanız şablonunuzun veya alt temanızın functions.php dosyasına eklemeniz yeterlidir.

Kod

/**
 * 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');