Premium, Tłumaczenie motywu, Wtyczki

Jak zmodyfikować niektóre elementy strony w zależności od wersji językowej?

  • Poziom trudności:

Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:

10 PLN

Klienci w Polsce są przyzwyczajeni do zwartych stron z dużą ilością materiałów, wieloma elementami i dziesiątkami rzeczy na które warto zwrócić uwagę. W Stanach trendy ostatnich lat sugerują, że strona powinna być prosta, zawierać dużo pustej przestrzeni, duże elementy i przycisk „akcji” w widocznym miejscu, najlepiej na środku. Choć trendy bez przerwy ulegają zmianie to jednak polscy przedsiębiorcy wolą przygotowywać strony internetowe na których umieszczają dużą ilość różnych informacji w każdym wolnym miejscu. Może w związku z tym warto pozmieniać swoją stronę w zależności od wersji językowej na którą użytkownik trafi? Dziś pokażę Ci sposób jak to zrobić przy odrobinie znajomości języka CSS i użyciu sprytnego operatora oraz funkcji.

Na warsztat wezmę witryny z bezpłatną wtyczką do wersji językowych czyli Polylang. Aby zmodyfikować wygląd i pozycję niektórych elementów na witrynie powinieneś mieć punkt zaczepienia w postaci klasy dopisywanej do <body> z informacją o wersji językowej. Taka klasa może zostać automatycznie dopisana, kiedy umieścisz w pliku functions.php następujący fragment kodu:

add_filter('body_class', 'my_custom_body_class', 10, 2);
  function my_custom_body_class($classes) {
    $classes[] = get_bloginfo('language');
    return $classes;
  }

Dzięki tej komendzie do Twojego znacznika <body> zostanie dodana klasa odpowiadająca za wersję językową. Przykładowo dla j. polskiego będzie to pl-PL, a dla języka angielskiego en-US.

Teraz możesz już do woli modyfikować swój plik style.css w zależności od wersji językowych. Przykładowa modyfikacja odstępów od góry i od dołu w zależności od wersji językowej:

body.pl-PL #header {
    padding: 10px 0;
}

body.en-US #header {
    padding: 30px 0;
}

Pierwsze trzy linie kodu dotyczą wersji polskiej, a ostatnie trzy wersji angielskiej. Tak jak z pewnością zauważyłeś dodanie powyższego fragmentu kodu (pod warunkiem oczywiście że Twój nagłówek ma id=”header”) sprawi, że w wersji angielskiej będzie więcej przestrzeni od góry i dołu. Tego typu modyfikacji możesz przeprowadzić znacznie więcej, a jedynym ograniczeniem jest Twoja wyobraźnia.

Czy jest jeszcze prostszy sposób?

Owszem, jest. Nie potrzebujesz nawet umieszczać dodatkowego kodu do functions.php aby z niego skorzystać. Wystarczy, że użyjesz standardowego znacznika „lang” w plikach CSS.  Przykładowo jeśli chciałbyś, aby na włoskiej wersji językowej wszystkie paragrafy miały tekst w kolorze żółtym, wtedy wystarczy wkleić do style.css następujący fragment kodu:

p:lang(it) { 
    background: yellow;
}

Selektora :lang() możesz wykorzystywać we wszystkich wersjach językowych i tym samym precyzyjnie wskazywać na określone elementy.

UDOSTĘPNIJ

Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:

10 PLN