Jak usunąć tekst pojawiający się po najechaniu kursorem na obraz w motywie Divi?

utworzone przez | paź 20, 2022 | Divi | 0 komentarzy

Jak usunąć tekst pojawiający się po najechaniu kursorem na obraz w motywie Divi

W tym artykule pokażę, jak usunąć tekst, który pojawia się po najechaniu kursorem (hover text) na obrazach w motywie Divi.

Tytuł obrazu pojawia się jako taki dymek podpowiedzi po najechaniu na zdjęcie. Poniżej zrzut ekranu z przykładem jak wygląda ten tekst.

Ten tekst to tekst wpisany jako tytuł obrazu. Przeglądarka pokaże go, gdy najedziesz na obraz i zatrzymasz się kursorem myszy przez kilka sekund.

Sposób 1 – Usuń tekst Tytuł obrazu w ustawieniach modułu Obraz lub w bibliotece obrazów WordPress.

Jeśli używasz modułu obraz, możesz usunąć tekst tytułu w ustawieniach tego modułu. Opcja tekstu tytułu znajduje się w Ustawienia modułu obrazu > Zaawansowane > Atrybuty.

Innym miejscem gdzie można usunąć tytuł obrazu to biblioteka mediów w WordPress. Gdy wejdziemy w opcje obrazu to po prawej stronie w pasku znajdziesz opcje odpowiadającą za tytuł obrazu.

Jednak w sytuacji gdy tych zdjęć jest bardzo dużo, to nie jest to zbyt dobre rozwiązanie. Dlatego mam dla Ciebie drugi sposób. Dzięki niemu nie musisz usuwać tytułów obrazów, po prostu przy pomocy skryptu wyłączymy opcje wyświetlania dymków z tekstem na obrazach.

Usuń tekst hover ze wszystkich obrazów za pomocą kodu

Usuwanie Tytułu obrazu według mnie nie jest najlepszym sposobem pod względem SEO jak i szybkością wdrożenia. Dlatego przygotowałem lepsze rozwiązanie, wykorzystując kawałek kodu jQuery. Przy pomocy niego możemy wyłączyć wyświetlanie tekstu po najechaniu myszą.

Aby usunąć tekst pojawiający się po najechaniu na wszystkie obrazach i stronach, musisz dodać poniższy kod do swojej witryny w sekcji <head>.

Przejdź do Opcji MotywuDivi > Integracja > Dodaj kod < head > Twojego bloga. Po dodaniu kodu oczywiście zapisz zmiany.

<script>
jQuery(document).ready(function($) {
    $("img").mouseenter(function() {
        let $lwp_title = $(this).attr("title");
        $(this).attr("lwp_title", $lwp_title);
        $(this).attr("title", "");
    }).mouseleave(function() {
        let $lwp_title = $(this).attr("lwp_title");
        $(this).attr("title", $lwp_title);
        $(this).removeAttr("lwp_title");
    });
});
</script>

Jeśli nie masz pewności, gdzie dodać kod, oto zrzut ekranu, który Ci pomoże:

Kod usuwa tytuł, gdy ktoś najedzie na obraz, a następnie dodaje go ponownie, gdy kursor myszy opuści obraz. Jeśli zastanawiasz się czy to wpłynie na Twoje SEO gdy usuniesz ten tytuł, to możesz być spokojny/a, nie musisz się martwić. Tytuł jest usuwany tylko w wyniku działania użytkownika, tylko po najechaniu kursorem na obraz.

0 komentarzy

Wyślij komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *