Polyangin kielivalikko

Kuinka teen oikean yläkulman kielivalikon kun käytössä on WordPress ja Polylang.

Tämä sivusto on kaksikielinen: suomeksi ja englanniksi. WordPressiin on useita kielilisäosia, joista tässä on käytössä Polylang. Polylang on muuten täysin toimiva ja käyttökelpoinen, mutta ei tarjoa suoraan Suomessa yleistä valikkotyyppiä: Suomeksi | På Svenska | In English. Sellaisen kirjoittaminen omaksi lisäosakseen osoittautui hankalaksi, joten tässä on artikkeli miten sellaisen saa aikaiseksi.

Kielivalikko vaatii muokkauksia teemaan. Helpointa on tehdä lapsiteema ja siihen löytyy paljon ohjeita. Lapsiteeman style.css-tiedostoon lisätään:

/* Languages horizontally */
#language ul { margin: 0; padding: 0; }
li.lang-item { list-style-type: none; display: inline; }
li.lang-item:before { content: " | "; }
li.lang-item:first-child:before { content: none; }

Teeman functions.php-tiedostoon lisätään määrittely uudelle vimpainalueelle:

register_sidebar( array(
        'name'          => 'Language',
        'id'            => 'language',
        'description'   => 'Polylang switcher area.',
        'before_widget' => '<div id="language">',
        'after_widget'  => '</div>'
) );

Teeman header.php-tiedostoon lisätään sopivaan kohtaan vimpainalue:

<aside id="language-nav" role="navigation">
    <?php dynamic_sidebar( 'language' ); ?>
</aside><!-- .language-nav-widgets -->

Lopuksi lisätään hallintapaneelissa Language Switcher vimpainalueelle Language.

Vimpainalueen saa tasattua oikeaan laitaan esimerkiksi laittamalla style.css-tiedostoon määrittely:

aside#language-nav {
  text-align: right;
  margin-left: auto;
}