Klikalne zajawki na blogu w WordPressie

W niektórych motywach możesz spotkać się z sytuacją, że na liście z postami klikalnymi elementami są tytuł, miniaturka lub przycisk „czytaj więcej”. Pokażę Ci sposób na sprawienie, aby cały kontener z zajawką przenosił do podstrony z pojedynczym artykułem. Zobacz prosty sposób na klikalne zajawki na blogu.

Taki mechanizm jest zastosowany na podstronie z blogiem: https://monikaszeliga.pl/blog. Po najechaniu kursorem myszy na zajawkę kursor zmienia wygląd na „łapkę”. Nie ma znaczenia, w którym miejscu klikniesz i tak zostaniesz przekierowany do danego wpisu.

Krótko o JavaScript i jQuery

Funkcjonalność napiszemy w języku JavaScript, korzystając z biblioteki jQuery. Dla przypomnienia język JavaScript (JS) jest skryptowym językiem programowania służącym głównie do zapewnienia interakcji pomiędzy użytkownikiem a wybranymi elementami na stronie internetowej. Za pomocą JavaScript można tworzyć złożone efekty wizualnie na stronie. Natomiast jQuery jest biblioteką programistyczną do JavaScript, ułatwiającą korzystanie z tego języka. Biblioteka jQuery posiada dość duży zestaw gotowych funkcji, z których możemy korzystać. Dzięki temu kodowanie w JavaScript staje się dużo szybsze, ponieważ mamy mniej kodu do napisania.

Podłącz bibliotekę jQuery

W pierwszej kolejności należy podłączyć bibliotekę jQuery. Polecam skorzystać z biblioteki hostowanej na zewnętrznych serwerach, np. Google. U góry pliku functions.php dodaj poniższy kod:

 function add_custom_js(){
   wp_enqueue_script( 'JQ',  get_stylesheet_directory_uri() . 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', '1.0.0', true );
 }
 add_action('wp_footer' , 'add_custom_js');

UWAGA! Przed dodaniem powyższego kodu sprawdź, czy w Twoim motywie nie została już podłączona biblioteka jQuery.

Dodaj plik z rozszerzeniem js

Utwórz plik np. tools.js i dodaj go do plików z zainstalowanym motywem (motyw znajduje się w lokalizacji: wp-content -> themes). Następnie odwołaj się do nowo utworzonego pliku we wcześniej zdefiniowanej funkcji add_custom_js. Dodaj poniższą linijkę:

wp_enqueue_script( 'tools', get_template_directory_uri() . '/js/tools.js', array( 'jquery' ), '1.0.0', true );

W miejscu oznaczonym czerwoną ramką wpisz ścieżkę do nowo utworzonego pliku tools.js. W omawianym przykładzie plik ten znajduje się w folderze o nazwie js, dlatego ścieżka wygląda następująco: '/js/tools.js’.

Ostatecznie funkcja będzie miała postać:

 function add_custom_js(){
  wp_enqueue_script( 'JQ', 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js',  '1.0.0', true );
 wp_enqueue_script( 'tools', get_template_directory_uri() . '/js/tools.js', array( 'jquery' ), '1.0.0', true );
 }
 add_action('wp_footer' , 'add_custom_js');

UWAGA! Możliwe, że w Twoim motywie jest już plik z roszerzeniem .js, do którego będziesz mógł dodać kod JavaScript.

Sprawdź klasę kontenera

Przejdź na stronę z zajawkami postów i kliknij prawym przyciskiem myszy na danym kontenerze i wybierz opcję Zbadaj element.

W inspektorze odszukaj znacznik kontenera zajawki postu.

Wybrałam dwie klasy: post oraz has-post-thumbnail.

Dodaj kod JavaScript

Teraz możemy już dodać kod JavaScript odpowiedzialny za klikalne zajawki. Otwórz plik tools.js w dowolnym edytorze kodu (polecam edytor Atom) i dodaj poniższy fragment kodu:

$("article.has-post-thumbnail").click(function() {
     window.location = $(this).find("a").attr("href");
     return false;
});

Oczywiście zamiast article.has-post-thumbnail wpisz swoje klasy:

I to wszystko 😉 Od tej pory zajawki na Twoim blogu są klikalne.

Możliwe problemy

Może się zdarzyć sytuacja, że na stronie z pojedynczym wpisem kontener wpisu stanie się elementem klikalnym. W takiej sytuacji należy go wykluczyć, modyfikując kod JavaScript.

W pierwszej kolejności sprawdź, jaka jest unikalna klasa dla elementu body dla strony z pojedynczym wpisem. Jest duże prawdopodobieństwo, że będzie to klasa single, ale lepiej to sprawdź 😉

Do wykluczania klas służy pseudoklasa CSS :not(). Teraz należy zmienić odwołanie do klasy na: article.has-post-thumbnail:not(.single article.has-post-thumbnail).

Czyli tłumacząc dosłownie: „weź wszystkie kontenery o przypisanych dwóch klasach article i has-post-thumbnail oprócz kontenerów o klasach article i has-post-thumbnail znajdujących się w kontenerze nadrzędnym o klasie single. Zmodyfikowany kod bedzie miał postać:

$("article.has-post-thumbnail:not(.single article.has-post-thumbnail)").click(function() {
     window.location = $(this).find("a").attr("href");
     return false;
 });

Dodatek

W przypadku klikalnych elementów kursor powinien zmieniać wygląd na „łapkę”. Dzięki temu użytkownik od razu wie, że może taki element kliknąć. Strona staje się bardziej intuicyjna i łatwiejsza w obsłudze. Zmianę kursora w „łapkę” możemy osiągnąć przy pomocy kodu CSS:

article.has-post-thumbnail:not(.single article.has-post-thumbnail){
   cursor:pointer
}

Warto również dodać efekty wizualne po najechaniu kursorem myszy. To również można zrobić przy pomocy kodu CSS, korzystając z pseudoklasy :hover.