slidedown

qTranslate in WordPress – Tipps zu Navigation, Ausblenden von Seiten etc.

Für ein aktuelles Projekt benötige ich im CMS WordPress die Möglichkeit alle Inhalte in mehreren Sprachen anzulegen. Meine Wahl fällt derzeit (trotz einiger Einschränkungen) bei mehrsprachigen WordPressinstallationen eigentlich immer auf das Plugin qTranslate. Hier ist die Verwaltung unterschiedlicher Sprachversionen einigermaßen komfortabel und gleichzeitig bleibt eine hohe Flexibilität bei der Konfiguration des WordPresskerns erhalten. Zudem kann man mit qTranslate die meisten Plugins und Widgets ohne größeren Aufwand ebenfalls mehrsprachig anpassen.

Da der Arbeitsalltag zeigt, dass nicht immer alle Inhalte in allen verfügbaren Sprachen angeboten werden können, müssen bestimmte Inhalte in der Navigation (aber auch bei direktem Anspruch der nicht übersetzten Seiten) ausgeblendet werden. Diese Funktion erscheint mir in qTranslate nicht sehr konsequent umgesetzt. Während beispielsweise in der Standarnavigation Seiten, die keine Übersetzung haben, ausgeblendet werden, sind diese in Custom Menus, also selbst per Drag and Drop zusammengebaute Navigationen, nicht ausgeblendet. Sie werden auch angezeigt, wenn es keine Inhalte gibt.
Generell verhält sich das Plugin bezüglich dieser Szenarien an einigen Stellen unintuitiv. So wird zum Beispiel der Text “Dieser Inhalt ist in Deutsch nicht verfügbar. Lesen Sie den Text auf Englisch” nicht immer konsequent eingebaut. Auch die implementierten PHP-Funktionen zur Überprüfung liefern hier selten Abhilfe und das Supportforum rund um das Plugin ist leider nicht wirklich hilfreich.

Daher habe ich hier ein paar Tipps zusammengestellt, die mir bei meinen aktuellen Entwicklungen geholfen haben.

Eine CSS-Klasse für die aktuelle Sprache ausgeben

Ein einfacher Weg unbenötigte Elemente in einer Sprache auszublenden ist die Elemente einfach per CSS unsichtbar zu machen. Leider fügt qTranslate keine Information zur aktuell besuchten Sprache in die Seite ein. Abhilfe schafft hier der folgende Filter, der in die functions.php Eures Themes oder des entsprechenden Childthemes (z.B. bei Verwendung des Thematic-Frameworks) eingefügt wird:

//Add CSS class to body for language (e.g. de, en)
function extend_body_class($c) {
	$c[] = qtrans_getLanguage();
	return $c;
}
add_filter('body_class', 'extend_body_class');

Dies sorgt dafür, dass im body jetzt eine zusätzliche Klasse mit der aktuellen Sprache vorhanden ist. So kann man beispielsweise über das folgende Konstrukt Elemente der Seite ausblenden oder natürlich auch anderweitig modifizieren:

/*Hide the footer when current language is English */
.en #footer { display: none; }

Navigationselemente ausblenden durch Custom Field bzw. Checkbox

Leider habe ich es nicht wirklich automatisiert hinbekommen, dass unübersetzte Seiten nicht in selbsterstellten Navigationen auftauchen.
Tendenzielle wäre es zwar auch möglich mit der oben angegebenen Methode per CSS die Navigationselemente auszublenden die nicht benötigt werden. Die Lösung erschien mir aber zu unsauber. Zum einen sind die Links ja dann immer noch im Quelltext vorhanden und zum anderen müsste man immer wenn man etwas deaktivieren will erst CSS Regeln anlegen. Das ist nicht gerade redakteuerfreundlich.
Daher bin ich einen Umweg gegangen und habe ein benutzerdefiniertes Feld in die Seitenkonfiguration eingebaut, mit dem der Redakteur entscheiden kann, ob die Seite im Menü auf Englisch angezeigt werden soll.

Um die hier dargestellte, benutzerfreundliche Optik zu gewährleisten benutze ich übrigens das sehr brauchbare Plugin “More Fields”, dass die sonst sehr unschönen und leicht falsch zu bedienenden Custom Fields DAU-freundlich aufbereitet. Letztlich ist diese nette Ansicht aber nur eine schöne Ansicht für die WordPresskernfunktion, die dann so aussehen würde:

Hat man nun die Seiten die im Englischen Menü erscheinen sollen so durch-konfiguriert, muss nur noch die Möglichkeit geschaffen werden alle ausgeschlossenen Seiten zu ignorieren. Um dies zu erreichen werden die folgend aufgelisteten Filter, Funktionen und Klassen in die functions.php-Datei eingefügt.

Hinweis zum folgenden Code

Der folgende Code ist für die Verwendung mit dem Thematic-Template-Framework gedacht (daher auch die Hooks und Actions). Für die Verwendung in anderen Umgebungen wird man kleine Anpassungen vornehmen müssen!

// Zunächst muss die Standardnavigation des Thematic Frameworks entfernt werden
// Remove the default Thematic Access
function remove_thematic_actions() {
    remove_action('thematic_header','thematic_access',9);
}
add_action('init','remove_thematic_actions');

// Jetzt fügen wir unsere eigene Navigation an die richtige Stelle ein (man beachte den CustomWalker)
// Recreate the Thematic Access
function childtheme_page_menu() { ?></pre>
<div id="access">
 'Hauptnavigation', 'menu_class' => 'sf-menu', 'walker' => new description_walker())); ?></div>
<pre>
<!-- #access -->
object_id, 'english-version', true)) || qtrans_getLanguage() != 'en' ) {

           global $wp_query;
           $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

           $class_names = $value = '';

           $classes = empty( $item->classes ) ? array() : (array) $item->classes;

           $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
           $class_names = ' class="'. esc_attr( $class_names ) . '"';

           $output .= $indent . '</pre>
<ul>
	<li id="&quot;menu-item-'.">ID . '"' . $value . $class_names .'>';

 $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
 $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
 $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
 $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';

 //$prepend = '<strong>';
 //$append = '</strong>';
 $description = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

 if($depth != 0)
 {
 $description = $append = $prepend = "";
 }

 $item_output = $args->before;
 $item_output .= ' $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
 $item_output .= $description.$args->link_after;
 $item_output .= '';
 $item_output .= $args->after;

 $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
 } }
}

Meines Erachtens nach ist das keine optimale Lösung, aber das Plugin bietet scheinbar keine zuverlässige Methode um die nicht übersetzten Inhalte auszublenden.

Nicht übersetzte Seiten auf die Startseite weiterleiten

Durch das gerade beschriebene Custom-Field kann man die Seiten die nicht übersetzt sind auch in der entsprechenden Sprache auf die Homepage weiterleiten. Denn auch wenn die Seiten nicht in der Navigation angezeigt werden, sind diese natürlich noch über Suchmaschinen, mögliche interne Links oder die Sprachumschaltung zu erreichen. Zu diesem Zwecke kopiert man einfach die folgende Aktion in die functions.php-Datei:

//Add Language Redirect
function redirect() {
global $post; // < -- globalize, just in case
$field = get_post_meta($post->ID, 'english-version', true);
//If english-version is not true and language is English, redirect to english homepage
if(!$field && qtrans_getLanguage() == 'en') { wp_redirect(site_url('/en/'), 301); exit; }

 }
add_action('get_header', 'redirect');

Jetzt werden Besucher die auf Seiten ohne englische Version bei aktivierter Englischer Sprache landen automatisch auf die Startseite weitergeleitet.

Sprachwahl als Textlinks im Template

Wer nicht mit dem Widget zur Auswahl der verfügbaren Sprachen arbeiten will kann folgenden kurzen PHP-Code in sein Template schreiben oder es per Action-Hook über die functions.php einfügen.

if (function_exists('qtrans_generateLanguageSelectCode')) { echo qtrans_generateLanguageSelectCode("text"); }

Die Angabe “text” setzt die Namen der verüfgbaren Sprachen ein. Die ungeordnete Liste die diese PHP-Funktion erzeugt kann man dann per CSS aufhübschen. Ich habe zusätzlich per jQuery noch den Link der aktiven Sprache deaktiviert und per CSS die Optik so modifiziert, dass der Link nicht mehr klickbar aussieht!

Hoffentlich helfen diese Tipps dem ein oder anderen bei der Entwicklung. Anmerkungen könnt Ihr wie immer gerne in die Kommentare posten!

2 Kommentare to “qTranslate in WordPress – Tipps zu Navigation, Ausblenden von Seiten etc.”

  1. swooper sagt:

    ich habe deinen post mit großem interesse gelesen.

    nun habe ich eine frage: kann ich auch von qtranslate das länderkürzel in einem div der klasse hintendranhängen? oder geht das nur für den body?

    wenn es geht, wo finde ich dazu infos wie das zu machen ist?

    viele grüße!

    • Sascha sagt:

      Du kannst doch einfach in den CSS-Regeln auf die Klasse im body tag referenzierenin der Form:

      .en div { deine Regel hier }

      Falls das div bereits eine bestimmte Klasse hat nutzt du:

      .en div.deineklasse { deine Regel hier }

      Hilft das ?

Hinterlasse einen Kommentar