Erstellen eines benutzerdefinierten Sprachwechslers in MultilingualPress

In diesem Tutorial werden wir einen benutzerdefinierten Sprachwechsler erstellen, indem wir die MultilingualPress API nutzen. Wir werden damit beginnen, ein einfaches Sprachmenü zu erstellen und es dann in ein Auswahl-Dropdown konvertieren. Abschließend wird erklärt, wie ein Sprachwechsler zu einem WordPress-Widget hinzugefügt werden kann.

Übersetzungen für die aktuelle Seite erhalten

Um ein Sprachmenü zu erstellen, benötigst du zuerst eine Möglichkeit, um die Übersetzungen für eine bestimmte Seite zu erhalten. MultilingualPress bietet die Translations Klasse, die Suchparameter von der TranslationSearchArgs Klasse akzeptiert:

function multilingualpress_get_translations()
{
   $args = \Inpsyde\MultilingualPress\Framework\Api\TranslationSearchArgs::forContext(new \Inpsyde\MultilingualPress\Framework\WordpressContext())
      ->forSiteId(get_current_blog_id())
      ->includeBase();

   $translations = \Inpsyde\MultilingualPress\resolve(
      \Inpsyde\MultilingualPress\Framework\Api\Translations::class
   )->searchTranslations($args);

   return $translations;
}

Die obige Funktion gibt einen Array aus Übersetzungen zurück. Jede davon enthält Informationen wie remote_url und Sprachinformationen. Du kannst dann das Array durchlaufen, um die Übersetzungen zu erhalten:

$translations = multilingualpress_get_translations();

foreach ($translations as $translation) {
   $language = $translation->language();
   $language_iso_name = $language->isoName();
   $language_locale = $language->locale();
   $url = $translation->remoteUrl();
}

Erstellen eines Übersetzungs-Menüs am Anfang des Post-Contents

Da wir nun wissen, wie man Übersetzungen von einer Seite bekommt, können wir ein Menü erstellen. Lasst uns also mit der Erstellung eines Menüs vor dem Content des Posts beginnen. Dafür können wir den WordPress-Filter ‘the_content’ nutzen:

add_filter('the_content', function ($content) {
   if (!is_single()) {
      return $content;
   }

   $translations = array_reverse(multilingualpress_get_translations());

   if (!$translations) {
      return $content;
   }
   
   $output = '';
   $items = '';
   foreach ($translations as $translation) {
      $language = $translation->language();
      $iso_name = $language->isoName();
      $url = $translation->remoteUrl();

      if ($url) {
         $items .= "<li><a href='${url}'>${iso_name}</a></li>";
      }
   }

   if($items) {
      $output .= '<ul>';
      $output .= $items;
      $output .= '</ul>';
   }

   return $output . $content;
});

Wie man sehen kann, geben wir zu Beginn lediglich den Post Inhalt zurück, für den Fall, dass wir nicht auf einer Einzel-Post-Seite sind – aber auch für den Fall, dass es keine Übersetzungen gibt. Anschließend erstellen wir das HTML-Markup für das Menü, indem wir das Übersetzungs-Array durchlaufen. Zum Abschluss zeigen wir das Menü für den Fall an, dass es Elemente gibt, die eine URL enthalten.

Erstellen eines Sprachwechslers

Wir können den vorherigen Code zum Teil wieder nutzen, aber dieses Mal werden wir das Markup so verändern, dass es select benutzt anstatt einer unsortierten Liste:

...

foreach ($translations as $translation) {
   $language = $translation->language();
   $iso_name = $language->isoName();
   $locale = $language->locale();
   $url = $translation->remoteUrl();

   if ($url) {
      $items .= "<option data-url='${url}' value='${locale}'>${iso_name}</option>";
   }
}

if($items) {
   $output .= '<select id="multilingualpress-language-switcher">';
   $output .= $items;
   $output .= '</select>';
   $output .= '<script>';
   $output .= "jQuery('#multilingualpress-language-switcher').change(function() {window.location.replace(jQuery('#multilingualpress-language-switcher option').data('url'));});";
   $output .= '</script>';
}
...

Außerdem verwenden wir ein bisschen JavaScript, um eine Seitenumleitung auszulösen, falls der Selector verändert wird.

Hinzufügen des Sprachwechslers zu einem Widget

Der folgende Code-Ausschnitt zeigt, wie man den obigen Sprachwechsler zu einem Widget hinzufügt:

add_action( 'widgets_init', function(){

   register_widget( 'Language_Switcher_Widget' );

});

class Language_Switcher_Widget extends WP_Widget {

   public function __construct() {
      $widget_ops = array(
         'classname' => 'language_switcher',
         'description' => 'Language Switcher',
      );

      parent::__construct( 'language_switcher', 'Language Switcher', $widget_ops );
   }

   public function widget( $args, $instance ) {
      echo $args['before_widget'];
      $translations = array_reverse(multilingualpress_get_translations());
      if (!$translations) {
         return $content;
      }

      $output = '';
      $items = '';
      foreach ($translations as $translation) {
         $language = $translation->language();
         $iso_name = $language->isoName();
         $locale = $language->locale();
         $url = $translation->remoteUrl();

         if ($url) {
            $items .= "<option data-url='${url}' value='${locale}'>${iso_name}</option>";
         }
      }

      if($items) {
         $output .= '<select id="multilingualpress-language-switcher">';
         $output .= $items;
         $output .= '</select>';
         $output .= '<script>';
         $output .= "jQuery('#multilingualpress-language-switcher').change(function() {window.location.replace(jQuery('#multilingualpress-language-switcher option').data('url'));});";
         $output .= '</script>';
      }

      echo $output;
      echo $args['after_widget'];
   }
}