WordPress meertalige website, custom posts, Lessons learned

WordPress meertalige website, custom posts, Lessons learned

Het is alweer even geleden sinds mijn laatste blogupdate. De afgelopen periode heb ik mij naast opdrachten vooral gericht op het verdiepen van mijn PHP kennis. Tijdens de laatste opdrachten heb ik met deze kennis weer een stuk meerwaarde kunnen toevoegen voor de klanten. Als designer is kennis van code onmisbaar. Er zijn weliswaar veel mooie thema’s op de markt, maar deze hebben ook nadelen. Met name in de hoeveelheid functionaliteit die erin gebakken zit en die je niet of nauwelijks gebruikt. In een tijd waarin trage website worden afgestraft in de zoekresultaten wil je geen overbodige ballast. En met een zelf ontwikkeld thema kun je alleen het hoognodige toevoegen. De oplossingen voor de problemen waar ik tegenaan liep vind je hier. Wellicht dat ze jou ook verder helpen!

Stella vertaal plugin

Stella is een prachtige plugin om websites in meer talen uit te voeren. Voor eenvoudige websites voldoet de plugin ruimschoots, maar bij complexere websites loop je tegen een aantal beperkingen aan. De grootste beperking die ik merkte was dat template code voor meertalige websites niet wordt vertaald. Stella biedt weliswaar bij iedere pagina tabbladen om content te vertalen, maar dit gaat niet op als je zelf pagina templates hebt gemaakt. Als je bijvoorbeeld een contact button of CTA hebt gemaakt in je template, dan wil je dat deze ook netjes wordt vertaald.

 <a href="/contact" class="cta button primary round -ghost>
<?php _e( 'Contact us', 'degrinthorst' ); ?>
</a>

Helaas is het vertalen van template tags niet mogelijk in de huidige versie van Stella. Het omschakelen naar een andere taal in de frontend heeft geen invloed op de $locale variabele in WordPress. Deze wordt door WordPress gebruikt om de juiste taalbestanden te selecteren. Met enkele aanpassingen lukt het echter wel.

Aanpassing 1 in stella-plugin/classes/class-post-localizer.php (Ik heb de code toegevoegd na regel 365, maar kan overal binnen de Class)

 function gh_change_language($locale) {
 global $stella_plugin;
 if ( !is_admin() && STELLA_CURRENT_LANG != STELLA_DEFAULT_LANG) {
   $curr_lang = STELLA_CURRENT_LANG;
   $def_lang = STELLA_DEFAULT_LANG;
   load_textdomain('default', get_template_directory() . "/lang/" . $curr_lang . ".mo");
   return $curr_lang;
 } else {
   return STELLA_DEFAULT_LANG;
}
return $locale;
}

Dit zorgt ervoor dat Stella de juiste taalbestanden gebruikt bij het switchen van taal op de website. Dit doordat de functie de $locale variabele van WordPress mee verandert met de in Stella gekozen taal.

Taal tags zijn goed voor je SEO, en je buitenlandse bezoekers

Voor meertalige websites zijn de juiste hreflang-tags belangrijk voor Google om te bepalen welke taal-versies er beschikbaar zijn van een pagina. Ook kan de browser van de website bezoeker snel bepalen welke talen er beschikbaar zijn en automatisch de juiste taal kiezen. Met behulp van Stella en onderstaande functie kun je deze toevoegen aan de <head> van de website:

function add_lang_links()
{
// Get current language and default language
 $def_lang = STELLA_DEFAULT_LANG;
 $home_url = get_bloginfo('wpurl');

 // Create array with available site languages
 $langs = array(
     'nl' => 'nl',
     'de' => 'de',
     'en' => 'en',
     'fr' => 'fr'
 );

 // Look for the default language in the installed languages array and 
 // remove it because it's processed different.
 $l = array_search($def_lang, $langs);
 unset($langs[$l]);

 // Get the current post or page
 $args = array( 'post_type' => 'post' );
 $post = new WP_Query($args);

 // Get the page title so we can construct a permalink from it.
 $page_link = get_the_title($post->ID);

     // Echo the first hreflang link without the $lang in the url, because default language code is not added in the permalinks
     echo "<link rel='alternate' hreflang='$def_lang' href='" . $home_url . "/" . sanitize_title($page_link) . "/'>";
     // Create hreflang tags for other site languages in header
     foreach ($langs as $lang => $lang_code) {
     echo "<link rel='alternate' hreflang='$lang_code' href='" . $home_url . "/" . $lang . "/" . sanitize_title($page_link) . "/'>";
     }
     return;
  }
add_action('wp_head', 'add_lang_links'); 

Custom Posts en Loop tips

De mogelijkheid om aangepaste post types te maken is een krachtige functie van WordPress. Je kunt met aangepaste, ofwel custom post types, zelf speciale soorten artikelen samenstellen en deze in de door jou gewenste layout gieten. Handig als je iets anders op je website wilt weergeven zoals radioshows, artikelen, afspraken, concerten etc. met andere informatie dan dat je in een standaard blogpost kwijt kunt. Bij het weergeven van custom post types moet je rekening houden dat de informatie soms op een andere manier door WordPress wordt behandeld dan standaard blogposts of pagina’s.

Custom post types sorteren op datumveld

In mijn geval ging het om een datumveld en een tijdveld van radioprogramma’s. Ik wilde de radioprogramma’s eerst sorteren op datum, en vervolgens op tijd. Een datum toevoegen aan een custom post type gaat eenvoudig genoeg. Als je wilt gaan sorteren merk je dat WordPress je radioprogramma’s sorteert op de datum waarop je ze hebt aangemaakt, en niet de datum van het programma zelf. Dit is op te lossen door middel van een aangepaste query en een bijbehorende functie.

De functie zorgt dat twee gegeven waarden in een bepaalde volgorde worden gesorteerd:


function orderbyreplace($orderby)
{
return str_replace('prog_order', 'mt1.meta_value, mt2.meta_value', $orderby);
}

Daarna heb ik de volgende code gebruikt voor de query op de pagina zelf:

$args = array(
  'post_type' => 'programma',
  'posts_per_page' => 12,
  'orderby' => 'prog_order',
  'order' => 'DESC',
  'meta_query' => array(
  array(
    'key' => 'datum',
    'value' => '',
    'compare' => 'LIKE'
  ),
  array(
    'key' => 'tijd',
    'value' => '',
    'compare' => 'LIKE'
    )
  )
);

$the_query = new WP_Query( $args );

De ‘prog_order’ waarde wordt vervangen door de twee waarden in de meta_query’s van datum en tijd.

Extra classes toevoegen aan het einde of tijdens de Loop

Bij het maken van een blog layout in een grid-structuur krijg je te maken met afwisselende code. Bijvoorbeeld, je wilt vier items in een rij wilt weergeven, de rij afsluiten en daarna een nieuwe rij beginnen. Dit is met statische code best gemakkelijk, maar wat als je te maken hebt met een blog waarin wekelijks nieuwe items worden toegevoegd?

Één oplossing die voor mij goed heeft gewerkt is om een counter in te stellen die om de zoveel items een aangepaste output geeft. Zoals in dit geval:


<?php

$args = array('post_type' => 'post' );
$q = new WP_Query( $args );
$blog_count = $q->post_count; // Haal het totaal aantal items op
$i = 0; // Zet de teller op 0
?>
<?php if ( $q->have_posts() ) : ?>
  <?php /* Start loop */ ?>
  <div class="row">
  <?php while ($q->have_posts()) : $q->the_post(); ?>
    <section class="medium-4 columns <?php if($i + 1 === $blog_count) echo 'end '; ?>blog-list"> <-- voeg bij de laatste blog een class 'end' toe /-->
    <?php get_template_part( 'content', get_post_format() ); ?>
    </section>
    <?php $post_count = $q->current_post + 1; ?> // Teller die ophoogt bij ieder item
  <?php if ($post_count % 3 == 0): ?> // Sluit na iedere derde post een rij af en begin een nieuwe rij
  </div><div class="row">
  <?php endif; ?>
  <?php $i++; ?>
  <?php endwhile; ?>
</div>
<?php else : ?>
  <div class="large-8 columns">
  <?php get_template_part( 'content', 'none' ); ?>
  </div>
</div>
<?php endif; // end have_posts() check ?>

Tot zover de tips & trucs. Kom je er met deze voorbeelden niet uit, of wil je je WordPress thema aangepast hebben? Neem dan contact op om een afspraak te maken.

Vriendelijke groet,

Sander de Wijs