CSS RTL med WPML – WordPress-utveckling

CSS RTL med WPML betyder på svenska: Stilmall Höger-Till-Vänster med tillägget WPML där det senare är ett plugin för att enkelt växla mellan olika språkversioner.

Utmaning
Webbplatsen för UNIFEM Interkulturellt Nätverk hade innehåll som vände sig till personer med annat modersmål än svenska. Hade det rört sig om engelska och språk som läses vänster-till-höger hade det inte varit några problem. Men nu handlade det om arabiska och kurdiska, språk som läses höger-till-vänster.

Skapa RTL CSS
För att få en första uppfattning av hur ett RTL CSS skulle se ut körde jag style.css genom CSSJanus Left-to-Right-to-Left-ifyer. Klistra in style.css i vänstra rutan, kör funktionen och kopiera CSS-koden från den högra rutan. Spara den nya koden i rightleft.css och ladda upp jämte övriga temafiler.

Funktion: Byta språk
Förutom att det måste finnas innehåll på t.ex. arabiska ska besökaren enkelt kunna växla språkversion av webbplatsen. För detta valde jag tillägget WPML. Efter ett par grundinställningar hade jag en språkväljare på plats i sidokolumnen (det finns även flaggor, vilket kan ses i övre högra hörnet på exempelvis embrasser.se).

Redigera header.php
För detta använder jag en if-sats i header.php enligt följande (grundutförande, vissa modifieringar kvarstår):

<?php if(ICL_LANGUAGE_CODE=='ar'): ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/rightleft.css" type="text/css" media="screen" />
<?php elseif(ICL_LANGUAGE_CODE=='sv'): ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php endif;?>

IF-satsen ovan frågar först efter om valt språk är arabiska (ar). Om ‘ar’ är true länkas CSS-filen rightleft.css in och texten på sajten visas från höger till vänster. Om ‘ar’ är false dvs om valt språk inte är arabiska länkas style.css (som innehåller taggar för visning vänster till höger).

Exakt vilka sökvägar som ska användas beror på om du har ett child theme eller inte. Läs mer på http://codex.wordpress.org/Function_Reference/get_bloginfo

1 svara
  1. Pontus Abrahamsson
    Pontus Abrahamsson says:

    Snyggt gjort, ska precis göra samma sak för en sajt med arabiska som språkval.

    Tack !

Kommentering är stängd.